盒模型
每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间图（margin border padding content）
box-model.jpeg
margin属性 ：
margin: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin: 10px 20px 30px 40px; 上右下左
margin: 10px 20px; 上下10px，左右20px
border: 1px solid #ccc;
元素的显示和隐藏
display
- 所有的后代元素都隐藏
- 隐藏以后这个元素就不存在了，下面的元素会顶上去
display: none;
display: block;
visibility
- 元素的大小不变，可理解为透明
- 子元素设置为visibility: visible，则该子元素依然可见
visibility: hidden;
visibility: visible;
overflow
- 规定了内容元素溢出父容器的展现形式
- 裁剪内容，使用滚动条来显示或直接显示超出部分
overflow: hidden; 裁剪
overflow: auto; 自定义滚动
背景
background: #e8e8e8 url('bg.jpg') no-repeat center center/100px 100px;
background-color: #e8e8e8;
background-image: url('bg.jpg');
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center center;
继承与层叠
子元素会继承父元素的一些样式
可继承的属性：字体类，颜色类，属性越通用，则越可能可以被继承
层叠
元素声明的样式的权重高于浏览器默认的样式
浏览器默认的样式权重高于继承的样式
样式优先级
!important > style内联样式 > ID选择器 > 类选择器 > 元素选择器 > * 选择
