学习笔记07

2017年9月26日

学习笔记与总结

1.盒子模型简介：

margin：当前元素和相邻元素之间的距离

分四个方向，按顺时针方向：top right bottom left

特点：1.垂直方向的相邻元素，上下外边距只会取最大值

2.在子元素里添加垂直方向的外边距，

需要给父元素添加overflow：hidden

padding与margin同理

上 右 下 左

上下 左右

上 左右 下

上下左右

border本身就是一个复合样式

1：边框的宽度

2：边框的颜色

3：边框的样式

border又分顺时针四个方向 上右下左

border会增大元素的内容空间

div居中

父div： 子div：

margin: 0 auto; margin:50px auto;

overflow: hidden;

2.标准流盒子模型

在标准流下

1：块级元素从上往下依次显示，宽度和容器等宽

2：行级元素从左往右排，宽度不够的时候才换行

浮动入门：

清除浮动带来的影响的办法：

1：在含有浮动元素的后面添加一个无关的元素

让添加的无关元素去清除浮动，使用clear：both;

缺点是 添加了一个无关元素，代码阅读受影响

2：只需要在含有浮动元素的父元素中，添加overflow：hidden

缺点是 一旦包含非浮动元素，页面显示不正常

3:通过伪类来实现 在需要清除浮动的父元素里，添加一个清除浮动的伪类

#body：after{

content: "";

display: block;

clear: both;

行内盒子的水平外边距

水平排放的行内盒子 水平间距的margin是累加的

垂直间距则是取最大值

3.变态盒模型（IE）

box-sizing: content-box

标准盒模型

width只包含一部分：content

box-sizing: border-box

变态盒模型(低版本IE浏览器)

width包含：border，padding，content

（哪个子类需要用使用 加在该子类样式中）

练习中有用的知识点：

div中的子div

padding和boder会增大父div的占用面积

边框外变形圆矩角

border-radius: 10px;

选中选框时触发的伪类选择器（focus）

input:focus{

outline: none; （外边无样式）

outline: 1px solid red;

}