文档章节

css3布局

laixc
 laixc
发布于 2016/10/08 11:36
字数 1473
阅读 9
收藏 0

    在我们对页面的设计中,经常会用到布局,在这里我主要总结了以下两类:

  1.     居中布局;
  2.     多列布局;
    1.   多列定宽;
    2.   其中至少有一列不定宽;
    3.   多列布局columns

 一、居中布局

    1. 把margin设为auto

        具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效。

    2、使用 text-align:center

        这个没什么好说的,只能对图片,按钮,文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中,它是能对任何元素进行水平居中的。

    3、使用line-height让单行的文字垂直居中

        把文字的line-height设为文字父容器的高度,适用于只有一行文字的情况。

    4、使用表格

        如果你使用的是表格的话,那完全不用为各种居中问题而烦恼了,只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中,垂直居中可以使用 vertical-align:middle,至于水平居中,貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中,IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用,对块状元素无效。

    5、使用display:table-cell来居中

        对于那些不是表格的元素,我们可以通过display:table-cell 来把它模拟成一个表格单元格,这样就可以利用表格那很方便的居中特性了。

    6、使用绝对定位来进行居中

        此法只适用于那些我们已经知道它们的宽度或高度的元素。

        绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的,而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离,所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置,这个负的margin值就取元素宽度或高度的一半。

    7、使用浮动配合相对定位来进行水平居中

        此方法也是关于浮动元素怎么水平居中的解决方法,并且我们不需要知道需要居中的元素的宽度。

        浮动居中的原理是:把浮动元素相对定位到父元素宽度50%的地方,但这个时候元素还不是居中的,而是比居中的那个位置多出了自身一半的宽度,这时就需要他里面的子元素再用一个相对定位,把那多出的自身一半的宽度拉回来,而因为相对定位正是相对于自身来定位的,所以自身一半的宽度只要把left 或 right 设为50%就可以得到了,因而不用知道自身的实际宽度是多少。

二、多列布局

    1、多列定宽

        这个就很简单了,顾名思义,只需要给定每列的宽度就行了。

    2、其中至少有一列不定宽(主要说两列布局,三列及多列可以此类推)

        2.1 一列定宽,一列自适应

            a、采取float+margin的方法

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.parent{
		width: 500px;
		font-size: 20px;
		color: #fff;
		margin: 20px;
	}
	.left{
		background: red;
	}
	.right{
		background: blue;
	}
	.parent1 .left{
		float: left;
		width: 100px;
	}
	.parent1 .right{
		margin-left: 120px;
	}
</style>
<body>
	<div class="parent1 parent">
		<div class="left">
			<p>left</p>
		</div>
		<div class="right">
			<p>right</p>
			<p>right</p>
		</div>
	</div>
		
</body>

            但这个方法有一些弊端,比如,在ie6版本中会产生3px的bug,在right 的第一个p中加入清除浮动的话,会使得right中的元素整体下滑一行。

            b、float+margin+fix

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.parent{
		width: 500px;
		font-size: 20px;
		color: #fff;
		margin: 20px;
	}
	.left{
		background: red;
	}
	.right{
		background: blue;
	}
	.parent2 .left{
		float: left;
		width: 100px;
        position:relative;
	}
	.parent2 .right-fix{
		float: right;
		width: 100%;
		margin-left: -100px;
	}
	.parent2 .right{
		margin-left: 120px;
	}
</style>
<body>
	<div class="parent2 parent">
		<div class="left">
			<p>left</p>
		</div>
		<div class="right-fix">
			<div class="right">
				<p>right</p>
				<p>right</p>
			</div>
		</div>	
	</div>
</body>

            c、float+overflow

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.parent{
		width: 500px;
		font-size: 20px;
		color: #fff;
		margin: 20px;
	}
	.left{
		background: red;
	}
	.right{
		background: blue;
	}
	.parent3 .left{
		float: left;
		width: 100px;
		margin-right: 20px;
	}
	.parent3 .right{
		overflow: hidden;
	}
</style>
<body>
	<div class="parent3 parent">
		<div class="left">
			<p>left</p>
		</div>
		<div class="right">
			<p>right</p>
			<p>right</p>
		</div>
	</div>
</body>

            d、table

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.parent{
		width: 500px;
		font-size: 20px;
		color: #fff;
		margin: 20px;
	}
	.left{
		background: red;
	}
	.right{
		background: blue;
	}
	.parent4 .left{
		display: table-cell;
		width: 100px;
		padding-right: 20px;
	}
	.parent4 .right{	
		display: table-cell;
	}
</style>
<body>
	<div class="parent4 parent">
		<div class="left">
			<p>left</p>
		</div>
		<div class="right">
			<p>right</p>
			<p>right</p>
		</div>
	</div>
</body>

                可是在这里我出现了一点问题,因为是给div设的背景颜色,所以左右两块并没有分开,并且高也被撑起来了。如果是给p标签设背景色就不会了。

            e、flex

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.parent{
		width: 500px;
		font-size: 20px;
		color: #fff;
		margin: 20px;
	}
	.left{
		background: red;
	}
	.right{
		background: blue;
	}
	.parent5{
		display: flex;
	}
	.parent5 .left{
		width: 100px;
		margin-right: 20px;
	}
	.parent5 .right{
		flex: 1;
	}
</style>
<body>
	<div class="parent5 parent">
		<div class="left">
			<p>left</p>
		</div>
		<div class="right">
			<p>right</p>
			<p>right</p>
		</div>
	</div>
</body>

            这里也会出现等高的情况。

            这里附上a~c的图;

            下面是d和e的图:

    

    

    3、多列布局columns 

        这是css3中新加入的一个属性。

        不管想让一段文本呈多少列显示,你需要的只是两个属性:column-count 和column-width

         column-count 属性设置列的具体个数。

         column-width属性控制列的宽度。

        column-gap属性修改列之间的缝隙间隔宽度。

    

© 著作权归作者所有

laixc
粉丝 0
博文 4
码字总数 3737
作品 0
成都
程序员
私信 提问
HTML5开发手机App之:CSS全教程-何韬-专题视频课程

HTML5开发手机App之:CSS全教程—20784人已学习 课程介绍 全面解读CSS2,CSS3以及CSS布局模式等各项知识点,深入系统了解CSS能够实现的各种功能并加以灵活运用。 课程收益 使致力于开发Web前...

pkutao
2016/03/31
0
0
网页瀑布流效果实现的几种方式

前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it 起由 最近,在搭建个人博客时,其中的Demo展示页面想用瀑布流形式展现,发现现有...

撒网要见鱼
2016/11/13
0
0
25 个 CSS3 高级用户界面特效教程

1、SVG & CSS 交互图表 该教程将让你对 SVG 效果创建与交互有一定了解。 2、CSS3 3D 动画直方图 该教程将叫你创建一个完整的 3D 直方图。你需要遵循一些要求,使直方图有独立的背景,能够自适...

彭博
2013/04/09
8.1K
19
Ajax+json+jquery实现无限瀑布流布局

Ajax+json+jquery实现无限瀑布流布局 <!doctype html><html><head><meta charset="utf-8"><title>定宽Jquery+AJAX+JSON瀑布流布局(每行代码都有详细注释)</title><style type="text/css">......

mengmeng1990
2012/08/19
3.7K
0
15 个 jQuery 和 CSS3 实现的页面切换效果

带页面切换效果的全屏布局 Tutorial || Demo 页面切换效果集合 Tutorial || Demo Pesudo-Elements 动画和转换 Tutorial || Demo CSS夹叠加效应效应转换 Tutorial || Demo 全屏 PageFlip 布局...

oschina
2013/06/03
32.3K
18

没有更多内容

加载失败,请刷新页面

加载更多

左边竖条的实现方法

下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签是一个 div : 1 < div > div> 定义如下通用CSS: 1 2 3 4 5 6 div{ position : relative ; width : 200px ; height ...

前端老手
21分钟前
2
0
java利用ECHARTS.JS在前台显示图表

步骤1: (1)在java后台,使用MSQL分组函数,列出所有线在对应的点的值, (2)组成的Map如图所示: 注意: key为0的value表示X轴需要的数据;key为其他的值表示图表线条的名字,value为x轴的点对应的y...

文文1
24分钟前
6
0
解题博客

https://blog.csdn.net/hk2291976/article/category/9265848

素雷
49分钟前
4
0
linux-ubuntu下使用linuxdeployqt+appimagetool将qt程序打包成xxx.AppImage文件

下文中提及的inuxdeployqt patchelf appimagetool工具及示例下载地址: 链接: https://pan.baidu.com/s/1BGm_btMIe75uW9hOC09Xlg 提取码: 7ayh 需要创建目录及文件 xxx.AppDir xxx.AppDir/Ap...

shzwork
53分钟前
5
0
javascript-ASCII码混合四位随机验证码

// 产生一个随机字符库:数字大写小写的数量是对应的 function randomStr(){ // 产生库 var strData = ""; for(var i=0;i<4;i++){ var num = random(0,9); var az = String.fromCharCode(ra......

ACKo
54分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部