定位
1.1 相邻行内块元素的间距问题
布局的时候,相邻的行内块元素之间默认有几像素的外间距。
只能用浮动来解决这个问题。
1.2 Border-radius: 边框半径
有四个值:左上,右上,右下,左下
四个值为元素宽度或是高度的一半的时候,会将元素变成圆形或是椭圆形,峰值只能到达宽度或是高度的一半。
1.3 行内元素的margin
行内元素的左右margin是可以起作用的,但是上下的margin是不起作用的。
1.4 清除浮动
浮动的原因就是因为父盒子没有高度,原来的高度是靠标准流中的子元素撑起来,但是子元素浮动了之后 ,脱离标准流了,造成父级元素的高度为0;
- 给父盒子设置一个高度
- Clear: both
- Overflow: hidden 触发了BFC模式 也可以用来清除浮动
- 伪元素或是双伪元素清除法
.clearfix:before, .clearfix:after {
/*清除浮动,最好最标准的写法*/
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/ /*兼容IE6下的写法*/
}1.5 定位的元素的层级
如果只给一个元素绝对定位,而不写trbl值的话,会以原位显示
定位(相对和绝对或固定)的元素都有一个层级的属性或是概念。如果定位了的相邻多个元素,在同一个位置的话,后面的元素默认会压住前面的元素。如果同样是定位了的元素,默认他们的层级都是0,只不过后面的元素会压住前面的元素。如果想让当前的元素显示在后面的元素之上,这个时候就需要改变层级的关系,用z-index来改变。
z-index的取值范围0---9999999,最好是正数,尽量不要用负数。
1.6 列表
ul li unordered list 无序列表
ol li ordered list 有序列表
dl dt dd
dl: difinition list 定义列表
dt difinition title 标题
dd difinition description 定义描述