CSS
盒子模型
实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成
content内容区域
padding内边距
border边框
margin外边距
并且margin,border,padding分别有上下左右4个值
如上图所示，可以很容易的得出盒子的大小，也就是对应标签真正大小。
所谓的宽高不是width和height,而是盒子的宽度和高度。
这个种写法会导致margin-left:20px失效。
在使用盒子模型进行布局的时候要格外注意的一个问题是： margin塌陷。
上述代码实际效果如下图所示
肉色部分是Chrome浏览器检查div.d2属性的margin边距，很明显它的top是30px,也就是说margin距离是距离上下左右容器border的距离，所以造成了div.d1的20px的margin-bottom塌陷在div.d2的margin-top里了。
在计算盒子之间的距离时需要考虑margin，但margin也有一个很好用的方法使块剧中：
再说行内元素的盒模型与块级元素的盒模型之间的差异：
行内元素不能设置宽和高。行内元素的宽高是由其内容决定的；而块级元素可以设置宽和高。
块级元素会独占一行。而行内元素却部能够独占一行，只能和其他的行内元素共用一行。
如果块级元素不设置宽度，那么块级元素会自动的沾满父元素的全部宽度。
可以通过设置dispaly属性将元素在行内和块之间转换，其参数包括：
inline
block
inline-block
标准文档流
标准文档流实际上是一个不太好的翻译，一开始不是很理解，查了一下发现，标准中说的是normal flow翻译为普通流或者常规流更好。
当浏览器解析网页的时候，遵循从上往下，从左到右的顺序。
一旦元素脱离了标准文档流的时候，行内元素和块元素的特性将消失。
标准文档流的常见现象：
空白折叠现象。
高矮不齐，底边对齐。
自动换行，一行写不完，自动换行。
单词没写完不换行。
浮动
float: left / right;
浮动的特点：
脱离标准文档流，元素一旦脱离标准文档流(脱标)，后面的元素会占据浮动元素原本的位置，而且元素就不再遵守文档流中块级元素和行内元素的特性。
元素浮动会脱离文档流但是不会脱离文本流，所以会产生字围效果。
相互贴靠。
浮动会带来的影响：
能让浮动后的元素布局混乱
子元素浮动会对父元素产生影响
HTML代码：
此时效果如下图：
如何清除浮动带来的影响：
1.首先可以通过为父元素设置高度来消除浮动：
最后：“相信有很多想学前端的小伙伴，今年年初我花了一个月整理了一份最适合2018年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5等都有整理，送给每一位前端小伙伴，53763，1707这里是小白聚集地，欢迎初学和进阶中的小伙伴。”
祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
网友评论