1.宽高属性
宽度 width:长度值 | 百分比 | auto
最大宽度 max-width:长度值 | 百分比 | auto
最小宽度 min-width: 长度值 | 百分比 | auto
注意: 宽和高只这只一个时,另一个自动为auto
2.边框border
border-top-color:red;
边框颜色
border-top-width:10px;
边框粗细
border-top-style:solid;
边框的线性,常用的有:solid(实线) dotted(点线) dashed(虚线)
边框属性连写:borde:10px solid red;
没有顺序要求,线性为必写项
3.内边距padding
padding-top:20px;
/* 设置顶部内间距20px */padding:20px 40px 50px 30px;
/* 四个值按照顺时针方向,分别设置的是 上 右 下 左
四个方向的内边距值。 */padding:20px 40px 50px;
/* 设置顶部内边距为20px,左右内边距为40px,底部内边距为50px */padding:20px 40px;
/* 设置上下内边距为20px,左右内边距为40px*/padding:20px;
/* 设置四边内边距为20px */
padding的使用技巧
- padding的值不能为负, margin可以为负
- 盒子所占的空间不单和width和height有关,还和padding’和border有关
- 盒子的宽度=定义的宽度+左右边框宽度+左右内边距
- 行内元素只能定义左右内外边距
4.外边距margin
外边距的设置方法和padding的设置方法相同,将上面设置项中的’padding’换成’margin’就是外边距设置方法。
margin的使用技巧
- 设置元素水平居中: margin:x auto
- margin负值让元素位移及边框合并
- 垂直方向外边距合并。即两个盒子一个设置下外边距,一个设置上外边距,取设置较大的值
margin-top 塌陷 这是个bug
在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下:
- 外部盒子设置一个边框
- 外部盒子设置 overflow:hidden
- 外部盒子使用伪元素类:(最常用)
.clearfix:before{
content: '';
display:table;
}
css元素溢出
当子元素的尺寸超过父元素(父元素设置了高度)的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。
overflow的设置项:
- visible 默认值。内容不会被修剪,会呈现在元素框之外。
- hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。
- scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
- inherit 规定应该从父元素继承 overflow 属性的值。
元素溢出示例: