盒模型
每個元素都被描繪成矩形盒子本股，這些矩形盒子通過一個模型來描述其占用空間圖（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
- 規(guī)定了內容元素溢出父容器的展現(xiàn)形式
- 裁剪內容，使用滾動條來顯示或直接顯示超出部分
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;
繼承與層疊
子元素會繼承父元素的一些樣式
可繼承的屬性：字體類继准，顏色類枉证，屬性越通用，則越可能可以被繼承
層疊
元素聲明的樣式的權重高于瀏覽器默認的樣式
瀏覽器默認的樣式權重高于繼承的樣式
樣式優(yōu)先級
!important > style內聯(lián)樣式 > ID選擇器 > 類選擇器 > 元素選擇器 > * 選擇
