前端

CSS基础补充(1)

在给别人讲解一些重构的内容的时候，发现自己还有好多基础没有补上=。= 平时都是打完页面就没有想太多东西，或者解决了问题没有总结。 于是乎看了一些文章，在这里记录一下。

盒子模型

  • 内边距外边距不会遮挡后面的元素
  • 在 CSS 中，width 和 height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
  • 外边距可以是负值，而且在很多情况下都要使用负值的外边距。
  • 在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。
  • margin百分比：相对于父元素
  • 避免浏览器变小浮动乱跑：在所有盒子外面包裹一个container,确定宽度并使他居中
  • 注意padding和width不要一起用。当设置width为100%的时候，会得到浏览器窗口的大小，但是padding却是另外计算的，所以会出现水平滚动条，多出来的padding撑出屏幕。

相对定位与绝对定位

相对定位

  • 当position设置为relative时，它们表示各个边界与原来位置的距离。当子块使用相对定位以后，它发生了偏移，即使移动到了父盒子的外面，父盒子也不会变大，就好像子盒子没有变化一样。
  • 使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。而该相对定位的盒子则仍然位于标准流中，它对父块, 兄弟子块没有任何影响。

绝对定位

  • 对于绝对定位的描述为：使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。再有，绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有任何影响，其他的盒子就好像这个盒子不存在一样。
  • 如果设置了绝对定位，而没有设置偏移属性，那么它仍然保持原有的位置。

用相对定位布局块级元素

  • 仅使用margin属性布局相对定位元素的情况
    用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。

  • 混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
    此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。从数学的角度理解为偏移属性值和外边距属性值累加。
    ###用绝对定位布局块级元素

  • 仅使用margin属性布局绝对定位元素的情况
    此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。

总结：

1、相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。
2、绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反margin属性值无效。
3、绝对定位的元素以最近的定位祖先元素为参照物。

负外边距

###负边距在普通文档流中的作用和效果
在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。

就是负的边距好像能减小元素在文档流中的尺寸一样，但事实上，它的尺寸大小并没变，只是文档流在计算元素位置的时候，会认为负边距把元素的尺寸减小了，因为位置也就发生变化了。

  • 上和下的负边距对元素高度的影响:影响元素在文档流中的位置
  • 左和右的负边距对元素宽度的影响:增加宽度

用处：

1
2
ul{ height:210px; overflow:hidden; margin-right:-20px;}/*一个负的margin-right,相当于把ul的宽度增加了20px*/
li{ height:100px; width:100px; background:#09F; float:left; margin-right:20px; margin-bottom:10px;}

负边距对浮动元素的影响

负边距对浮动元素的影响与负边距对文档流中元素的影响其实是差不多的。文档流中元素的位置由文档流的走向决定，浮动的元素也可以看成有一个“浮动流”存在，不过浮动流既可以向左，也可以向右。
就是某个元素虽然是写在了后面，但可以通过负边距让它在浏览器显示的时候是在前面的。这个以后可以再慢慢讲。

负边距对绝对定位元素的影响

利用绝对定位来居中
缺点：要知道居中元素的高度和宽度；

负margin在页面布局中的应用

左右列固定，中间列自适应布局

下面代码示例。有点不太明白

去除列表右边框

在ul里面设置一个margin-right: -(length of border-right);，使列表向右移动一个border-right或者margin-right的距离，隐藏掉。

负边距+定位：水平垂直居中

确定所需内容的大小，例如为100*100,设置margin-top: -50px; margin-left: -50px，即设置为大小的一半，利用绝对定位，设置top: 50%; left: 50%;就能使定位点在屏幕中间，实现居中。

去除列表最后一个li元素的border-bottom

设置父元素overflow: hidden,在li里面添加margin-bottom: 1px

多列等高

下面代码示例。

多列等高

等高布局有几种不同的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。
在这里，等高布局是为了维护边框线条的完整性，在有些地方则可能是为了维护背景的完整性，达到整体一致不缺失的效果。

代码参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body,p{margin: 0;padding: 0;}
		#wrap
		{
			overflow: hidden;
			width: 580px;
			margin: 0 auto;
		}
		.left,.center,.right{
			margin-bottom: -500px;
			padding-bottom: 500px;
		}
		.left 
		{
			float: left;
			width: 140px;
			background-color: #777;
		}
		.center
		{
			float: left;
			width: 300px;
			background-color: #888;
		}
		.right	
		{
			float: right;	
			width: 140px;
			background-color: #999;
		}
		p
		{
			color: #FFF;
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<div class="left">
			<p style="height:10px">
				bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。
			</p>
		</div>
		<div class="center">
			<p style="height:100px">
				bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。
			</p>
		</div>
		<div class="right">
			<p style="height:300px">
				bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。
			</p>
		</div>
	</div>
</body>
</html>

左右列固定，中间列自适应布局

此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body
		{
			margin: 0;
			padding: 0;
			min-width: 600px;
		}
		.main{
			float: left;
			width: 100%;
		}
		.mainbody
		{
			margin: 0 210px;
			background-color: #888;
			height: 200px;
		}
		.left,.right
		{
			float: left;
			width: 200px;
			height: 200px;
			background: #F60;
		}
		.left	
		{
			margin-left: -100%;
		}
		.right{
			margin-left: -200px;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="mainbody">
			Main
		</div>
	</div>
	<div class="left">left</div>
	<div class="right">right</div>
</body>
</html>

参考文章：
CSS布局奇淫巧计之-强大的负边距
负margin在页面布局中的应用
多列等高应用
CSS中的绝对定位与相对定位

分享到