[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
