1、清除元素默认的内外边距
/*清除元素默认的内外边距*/
* {
margin: 0;
padding: 0;
}
2、清除列表样式
/*清除列表样式*/
li {
list-style: none;
}
3、行内元素没有大小,需要转化为块级元素
a {
display: block;
}
4、去掉button默认自带边框
/*去掉button默认自带边框*/
button {
border: none;
}
5、行内块中间的空白缝隙(图片、表单、单元格)
用浮动解决。
6、行高=高度只能让单行文本垂直居中
height: 42px;
line-height: 42px;
7、外边距塌陷问题:浮动可以解决;
8、有宽度的盒子,用padding会撑开盒子
9、以font-,line-,text-,color-开头的可以继承父级元素
10、行内元素只有左右内外边距
11、父盒子的宽度是可以大于子盒子(版心)的
12、位置相对盒子不发生改变的固定定位
13、改变display属性的几种方法:
块级元素不给width默认通栏显示
1、利用display: inline-block转化为行内块元素(行内块元素不给width,默认的宽度就是内容的宽度)
2、float: left浮动也能转化
3、绝对定位(固定定位)也能转化
14、定位的盒子如果需要通栏:
宽度给100%
15、浮动元素、绝对定位(固定定位)元素都不会触发垂直外边距合并的问题
16、隐藏元素:
display: none ——隐藏元素不保留位置
visibility: visible ——隐藏元素并保留位置
overflow: hidden——隐藏超出盒子的部分