# 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
~~~
