摘要：标准文档流的常见现象空白折叠现象。浮动浮动的特点脱离标准文档流，元素一旦脱离标准文档流脱标，后面的元素会占据浮动元素原本的位置，而且元素就不再遵守文档流中块级元素和行内元素的特性。元素浮动会脱离文档流但是不会脱离文本流，所以会产生字围效果。
CSS 盒子模型
（点击查看官方解释）
实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成
content 内容区域
padding 内边距
border 边框
margin 外边距
并且margin, border, padding分别有上下左右4个值
如上图所示，可以很容易的得出盒子的大小，也就是对应标签真正大小。
所谓的宽高不是width和height,而是盒子的宽度和高度。
高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距 宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距
margin,border,padding三个属性在设值的时候均可以对上下左右进行多带带设置：
margin-top: 100px; margin-bottom: 100px; margin-left: 50px; margin-right: 50px;
也可以一次性使用简写的方法设置：
/* 上 右 下 左*/ margin: 100px 100px 50px 50px; /* 上下 左右*/ margin: 100px 50px; /* 上 左右 下*/ margin: 100px 20px 50px;
这里需要注意的是，多次设置时要先写大后写小：
/* 错误写法 */ margin-left: 20px; margin: 10px;
这个种写法会导致 margin-left:20px失效。
在使用盒子模型进行布局的时候要格外注意的一个问题是： margin塌陷。
* {
margin:0;
}
div {
width: 300px;
height: 300px;
}
.d1 {
background-color: #c1c1c1;
margin-bottom: 20px;
}
.d2 {
background-color: pink;
margin-top: 30px;
}
上述代码实际效果如下图所示
肉色部分是Chrome浏览器检查div.d2属性的margin边距，很明显它的top是30px,也就是说margin距离是距离上下左右容器border的距离，所以造成了div.d1的20px的margin-bottom塌陷在div.d2的margin-top里了。
在计算盒子之间的距离时需要考虑margin，但margin也有一个很好用的方法使块剧中：
margin: 0 auto;
border属性的三要素：
border-width 粗线
border-style 线形
border-color 颜色
一般设置border的样式时一般使用简写方式：
border: 1px solid red;
再说行内元素的盒模型与块级元素的盒模型之间的差异：
行内元素不能设置宽和高。行内元素的宽高是由其内容决定的；而块级元素可以设置宽和高。
块级元素会独占一行。而行内元素却部能够独占一行，只能和其他的行内元素共用一行。
如果块级元素不设置宽度，那么块级元素会自动的沾满父元素的全部宽度。
可以通过设置dispaly属性将元素在行内和块之间转换，其参数包括：
inline
block
inline-block
标准文档流标准文档流实际上是一个不太好的翻译，一开始不是很理解，查了一下发现，标准中说的是 normal flow 翻译为普通流或者常规流更好。
当浏览器解析网页的时候，遵循从上往下，从左到右的顺序。
一旦元素脱离了标准文档流的时候，行内元素和块元素的特性将消失。
标准文档流的常见现象：
空白折叠现象。
高矮不齐，底边对齐。
自动换行，一行写不完，自动换行。
单词没写完不换行。
浮动float: left / right;
浮动的特点：
脱离标准文档流，元素一旦脱离标准文档流(脱标)，后面的元素会占据浮动元素原本的位置，而且元素就不再遵守文档流中块级元素和行内元素的特性。
元素浮动会脱离文档流但是不会脱离文本流，所以会产生字围效果。
相互贴靠。
浮动会带来的影响：
能让浮动后的元素布局混乱
子元素浮动会对父元素产生影响
HTML代码：
- HTML
- CSS
- JavaScript
- jQuery
- 测试文字
- 测试文字
- 测试文字
- 测试文字
CSS代码：
.box ul li {
float: left;
width: 100px;
height: 50px;
background-color: orange;
margin-left: 10px;
}
此时效果如下图：
如何清除浮动带来的影响：
1.首先可以通过为父元素设置高度来消除浮动：
.box {
height: 50px;
}
2.使用overflow:hidden属性清除浮动：
.box {
overflow:hidden;
}
3.在父元素底部插入一个具有clear:both属性的空标签：
.clear { clear:both; }
- HTML
- CSS
- JavaScript
- jQuery
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112187.html
摘要：标准文档流的常见现象空白折叠现象。浮动浮动的特点脱离标准文档流，元素一旦脱离标准文档流脱标，后面的元素会占据浮动元素原本的位置，而且元素就不再遵守文档流中块级元素和行内元素的特性。元素浮动会脱离文档流但是不会脱离文本流，所以会产生字围效果。 CSS 盒子模型 （点击查看官方解释） 实际上网页中的每一个标签都可以看成一个盒子模型，而这个盒子模型从内到外有以下这几个元素组成 conten...
摘要：之小白初入江湖超文本标记语言简称是一种用于创建网页的标准标记语言。描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。是块级元素，是行内元素。层叠样式表简称是一种用来为结构化文档如添加样式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本标记语言(HyperText Markup Language, 简称HTML)是一种用于创建网页的标准标记语言...
摘要：之小白初入江湖超文本标记语言简称是一种用于创建网页的标准标记语言。描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。是块级元素，是行内元素。层叠样式表简称是一种用来为结构化文档如添加样式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本标记语言(HyperText Markup Language, 简称HTML)是一种用于创建网页的标准标记语言...
摘要：原文链接在这之前先要了解一下循环中和的区别是函数级作用域或者全局作用域，是块级作用域看一个例子循环中的逻辑代码函数下的输出，全局下的不存在现在我们把换为循环中的逻辑代码报错了，不在函数作用域下，当然肯定也不会再全局下因为和的这个区别当然和的 原文链接在这之前先要了解一下 for循环中let 和var的区别 var 是函数级作用域或者全局作用域，let是块级作用域看一个例子 fu...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
阅读 1089·2021-11-15 18:00
阅读 2800·2021-09-22 15:18
阅读 1962·2021-09-04 16:45
阅读 749·2019-08-30 15:55
阅读 3852·2019-08-30 13:10
阅读 1330·2019-08-30 11:06
阅读 1983·2019-08-29 12:51
阅读 2293·2019-08-26 13:55
