# 1.盒子模型
- box-sizing:border-box;
設置padding,和border,它的寬度還是會保持不變
- box-sizing:content-box;(默認設置)
當設置padding和border時寬度會發生改變
# 2.float
> 目的:為了讓元素并排顯示
### 2.1給多個元素float
子元素float父元素的高度坍塌
### 2.2如何清除float
~~~
(1)給下面的兄弟元素給clear:both;
(2)給父級加overflow:hidden;
(3)用偽元素,給父級內容生成
.row:before{
display:table;
content:””
}
.row:after{
display:table;
content:””
clear:both;
}
~~~
demo
實現導航
# 3.定位position
~~~
position:absolute | relative
Relative 定位
相對定位:元素在頁面上正常的位置。
~~~
~~~
Absolute定位
絕對定位的元素的位置相對于最近的相對定位的父元素，如果沒有已定位的父元素，那么它的位置相對于<html>:
都通過left,top,right,bottom移動
z-index:設置元素的堆疊順序 給position:absolute絕對定位的元素
~~~
~~~
position:fixed
//例子簡書
~~~
demo:
1.搜索框
# 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%*child*width;
margin-top:-50%*child*height;
}
~~~
- 第二種
~~~
parent{
position:relative;
}
child{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
~~~
# 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.絕對路徑和相對路徑
**絕對路徑：從盤符開始的路徑**
~~~
<img src="D:/images/down.jpg" alt=""/>
~~~
**相對路徑：相對當前文件所在的路徑**
~~~
同級目錄 src='down.jpg'
下一級目錄 src='images/down.jpg'
上一級目錄 src='../down.jpg
~~~
# 8.定位的寬高繼承問題
~~~
父元素給position:relative
子元素position:absolute
子元素絕對定位,不會繼承父元素的width
~~~
