css概述（三）

盒模型
每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间图（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

1. 所有的后代元素都隐藏
2. 隐藏以后这个元素就不存在了，下面的元素会顶上去
   display: none;
display: block;

• visibility

1. 元素的大小不变，可理解为透明
2. 子元素设置为visibility: visible，则该子元素依然可见
   visibility: hidden;
visibility: visible;

• overflow

1. 规定了内容元素溢出父容器的展现形式
2. 裁剪内容，使用滚动条来显示或直接显示超出部分
   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选择器 > 类选择器 > 元素选择器 > * 选择