[TOC]
### 1.css盒子模型
box-sizing:border-box
box-sizing:border-box;
設置padding,和border,它的寬度還是會保持不變
給元素border,padding不會改變它的width,height
box-sizing:content-box;(默認設置)
當設置padding和border時寬度會發生改變
### 2.浮動float
目的:為了讓元素并排顯示
2.1如何清除浮動
(1) 給下面的兄弟元素給clear:both;
(2) 給父級加overflow:hidden;
(3)用偽元素,給父級內容生成
.row:after{
display:table;
content:””
clear:both;
}
### 3.定位:position
position:absolute | relative
Relative 定位
相對定位元素的定位是相對其正常位置。
postion:relative
Absolute定位
絕對定位的元素的位置相對于最近的相對定位的父元素，如果沒有已定位的父元素，那么它的位置相對于<html>:
都通過left,top,right,bottom移動
z-index:設置元素的堆疊順序 給position:absolute絕對定位的元素
例子:搜索框
當子元素沒有設置寬度，如果設置了絕對定位,它不會繼承父元素的寬度
### 4.布局方式的總結
常用的布局方法
1.table表格布局 07年之前使用廣泛,可以說是唯一的布局方式
2.float浮動+margin(經典)
3.inline-block布局——(有小問題設置父元素的font-size:0)
4.flexbox布局(正統的布局方式)
### 5.實現元素的垂直水平居中
父元素設置parent{position:relative;}
子元素設置
child{
position:absolute;left:50%;top:50%;
margin-left:-50%childwidth;
margin-top:-50%childheight;
}
### 6.CSS樣式的幾種引入方式
外部樣式表
<link rel="stylesheet" type="text/css" href="/c5.css">
內部樣式表（位于 <head> 標簽內部）
<style>
p{color:pink;font-size:16px}
</style>
內聯樣式（在 HTML 元素內部）
<p style=”color:pink;font-size:16px”>hello world</p>
給同一選擇器設置同一樣式,離元素近的樣式設置方式優先級高
### 7.絕對路徑和相對路徑
絕對路徑：從盤符開始的路徑
相對路徑：相對當前文件所在的路徑
同級目錄 src='down.jpg'
下一級目錄 src='images/down.jpg'
上一級目錄 src='../down.jpg
postman
### 8.定位的寬高繼承問題
父元素給position:relative
子元素position:absolute
子元素絕對定位,不會繼承父元素的width
