# 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
实现导航
### 13.定位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">
```
- 内部样式表（位于 标签内部）
```
<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
```
