小花带你一周入门html+css（四）CSS进阶之盒子模型与文档流丨【WEB前端大作战】
今天我们来了解一下css的盒子模型与文档流
盒子模型、盒子准备、属性整理、标准流文档流、浮动、布局、定位等
CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时我们就已经能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页啦！
关于CSS的各种属性，我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框，那就是“border”，那我们需要右侧边框做一些改变，那就是“border-right”。很明显，接下来按照我们的需求还有“右边框的宽度——border-right-with”，”右边框颜色——border-right-color”等等等，诸如此类~
完全就是我们需要什么，只要凭着需求去寻找。~follow me~
1.盒子模型
盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
CSS盒模型是一种样式HTML元素的方式。每个HTML元素都是带有边框，边距，填充和内容的矩形框。
以下代码显示了元素中每个部分的布局。最外边是边距，然后是元素边界，之后是填充，内容是核心和内部最多。
盒子的组成部分，举个例子说明一下
外边距margin：作用 – 拉开两个盒子之间的距离
边框线border
内边距padding：作用 – 拉开内容与边框线的距离panda
内容width和height – 实体化范围
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
div{
border-top:1px solid #f30;
border-right:10px solid #f60;
border-bottom:20px solid #f90;
border-left:40px solid #f20;
width:300px;
height:300px;
background:pink;
margin:100px 30px 20px 120px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
①border设置
书写border属性代表设置盒子四个方向边框线相同，如果想要设置四个方向边框线不同，方法：border中横线连接方向英文（top|left|right|bottom），例如：border-top代表顶部边框
border-top:1px solid #f30;
border-right:10px solid #f60;
border-bottom:20px solid #f90;
border-left:40px solid #f20;
②内边距padding
书写padding代表的是盒子四个方向的内边距，单独设置不同方向内边距，做法：padding中横线连接方向英文，例如：padding-top代表顶部内边距
上边距padding-top;
右边距 padding-right;
下边距 padding-bottom;
左边距padding-left;
padding是一个复合属性，由上、右、下、左等边距组成。
tips：
如果四周的内边距都一样，可以用padding:10px;
如果想要清除默认的内边距，可以使用padding:0;
如果上下边距一致，左右边距一致，则可以用padding:10x 20px;
如果上下不一样，左右一样，可以用padding:10px 20px 5px;
如果不符合以上情况，则用这种写法padding:10px 10px 10px 10px;
③外边距 margin（用法和padding一样）
④盒子尺寸
w3c中盒子尺寸计算
标准模式：通常在非IE低浏览器中。计算方法：占的空间的宽度=内容的宽度＋左右内边距的宽度＋左右边框的宽度＋左右外边 距的宽度（margin +padding+ border+ content）
模型包括margin、border、padding、content ，元素的width=content的宽度
在w3c标准中，我们在实体化一个盒子的时候，会给盒子固定的width和height，如果同时我们给这个盒子padding，或者border，那么这个盒子会在我们设置的固定值的基础上加padding值和border值，所以呢，盛放内容的width和height不变，但是最终效果盒子的尺寸变大了。
盒子占位尺寸计算公式 = margin+border+padding+实体化尺寸
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
background:pink
}
</style>
</head>
<body>
<div>华为云学院</div>
</body>
</html>
tips：
如果盒子添加了padding和border属性，因为盒子的这个特性，所以我们在做项目的时候，如果盒子已经设置了width和height，然后又给盒子添加了padding和border属性，那么需要在宽高基础之上减去相应的padding和border值
IE盒子模型（也叫做怪异模型）
怪异模式：怪异模式是指在IE6及更早的IE版本下盒模型的计算方 法：所占空间总宽度=内容＋外边距（ content＋margin）
元素的width=content+padding+border
上图显示：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。
tips：
浏览器的兼容性问题
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。
解决 IE8 及更早版本不兼容问题可以在 HTML 页面声明<!DOCTYPE html>即可。
⑤外边距塌陷/margin合并问题
当垂直排列的两个盒子，垂直外边距紧挨在一起，就会产生合并/塌陷问题，
取值方法：取值为两者之间的较大值
例如：
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
.box1{width:100px;height:100px;margin:20px;background:pink;}
.box2{width:100px;height:100px;margin:20px;background:pink;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
由于这个特性，我们在实际项目中遇到这样的问题， 只需要给1号margin-bottom，或者仅仅给2号margin-top，即可。
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
.box1{width:100px;height:100px;background:pink;}
.box2{width:100px;height:100px;margin-top:20px;background:red;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
嵌套排列的两个盒子也有外边距塌陷问题
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
.box1{width:100px;height:100px;background:pink;}
.box2{width:100px;height:100px;margin-top:20px;background:red;}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
解决办法：
给父级添加border属性，完整的划分出盒子边缘；
给父级或子级别添加float：left属性
给父级添加overflow：hidden属性
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
.box1{width:100px;height:100px;background:pink;border:1px solid #000;}
/* .box1{width:100px;height:100px;background:pink;overflow:hidden;}
.box1{width:100px;height:100px;background:pink;float:left;} */
.box2{width:100px;height:100px;margin-top:20px;background:red;}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
⑥行内标签的垂直内外边距
行内标签想要改变垂直方向的位置，通过margin和padding都不生效，唯独通过设置行高属性line-height才能生效 – 行高属性可以改变行内标签的中心基线的位置
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
.box1{width:100px;height:100px;background:pink;border:1px solid #000;}
span{background:#fc2;line-height:100px;}
</style>
</head>
<body>
<div class="box1">
<span>华为云学院</span>
</div>
</body>
</html>
tips：
margin的上下值对行内标签不起作用
把行内元素转换为行内换就可以了。
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
.box1{width:100px;height:100px;background:pink;border:1px solid #000;}
span{background:#fc2;line-height:100px;margin:10px;display:inline-block;}
</style>
</head>
<body>
<div class="box1">
<span>华为云学院</span>
</div>
</body>
</html>
⑦盒子水平居中
核心属性：margin：上下随意 左右必须为auto；
先决条件
如果想要盒子居中，盒子必须满足以下条件：
盒子必须有宽度width值
盒子必须是块级元素
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
/* auto自动水平居中的原因
左边距 = 右边距 =（浏览器的分辨率宽度 — 盒子的宽度width）/ 2
所以盒子必须有width值 */
.box1{width:100px;background:#fc2;margin:50px auto;}
</style>
</head>
<body>
<div class="box1">
<span>华为云学院</span>
</div>
</body>
</html>
2.盒子准备-（网页三步准备工作）
①清空标签的默认样式
需要清空所有用的到的想得到的标签的内外边距和列表样式
body,div,p,span,a,img,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,input{
margin:0;
padding:0;
list-style:none;
}`
原因：大多数标签都有自己默认的内外边距，我们是需要项目需要去设置内外边距的值，所以需要清除默认的内外边距
②设置全局样式
设置body的文字三属性：
根据项目设计图，设置项目中主要的字体三属性font-size,font-family,color
body{
font-size:12px;
font-family:'微软雅黑';
color:#ccc;
}
③超链接的默认样式
设置超链接的颜色和下划线
a{ color:#0000ee;}
a:hover{}
综合css reset
/* ====== reset ====== */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0}:focus{outline:0;}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
abbr,acronym{border:0;font-variant:normal;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
code,kbd,samp,tt{font-size:100%;}
input,button,textarea,select{*font-size:100%;}
body{line-height:1.5;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
sup,sub{font-size:100%;vertical-align:baseline;}
:link,:visited ,ins{text-decoration:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
3.属性整理
4.标准流文档流
标准流： 就是浏览器按照默认的样式来排列标签
其实就是一个非常常见的现象：由于页面中的所有标签默认状态下都受标准流控制，所以块级标签独占一行，行内标签可以一行共存多个
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
</head>
<body>
<div class="box">这是div，我是个块级元素</div>
<p class="box">这是p</p>
<h1>我是h1标题</h1>
<span>我是行内块span</span>
<a>我是a行内a</a> <b>我是行内b</b>
</body>
</html>
5.浮动
浮动是一种脱离标准流的形式 – 半脱离
float：left|right|none；
left- 左浮动
right- 右浮动
none - 不浮动
浏览器认为设置了浮动的元素不存在，所以会影响到后续的元素，所以浮动脱离标准流叫做半脱离。
块级标签在一行共存
注意：浮动之后的标签是完全没有间距的左对齐和顶对齐；浮动后的标签显示模式为行内块
由于浮动的元素没有行内元素、块级元素之分，所以不接受 display 进行行块转换
①浮动的特点
浮动的元素脱离文档元素，不占据空间。不浮动的元素会直接无视掉这个元素。
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
div{width:100px;height:100px;background:pink;}
.box1{width:50px;height:50px;background:#ff0;float:left;}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
浮动元素遇到另一个浮动的元素就会停下
文本和行内元素会环绕在float元素周边的
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
*{margin:0;padding:0}
div{width:100px;height:100px;background:pink;float:left;}
.box1{width:50px;height:50px;background:#ff0;}
span{background:#0f0;padding:10px;width:50px;height:50px;}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<span class="box3">box3</span>
</body>
</html>
②清除浮动clear:both;
由于浮动的盒子会影响后面的盒子排列，如果后面的盒子不想要被影响，那么需要对浮动进行清除。
left – 清除左侧浮动的影响
right – 清除右侧浮动的影响
both– 清除两侧浮动的影响
谁不想被影响，给谁加：clear:both
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
*{margin:0;padding:0}
div{width:100px;height:100px;background:pink;}
.box1{width:50px;height:50px;background:#ff0;float:left;}
.box2{clear:both;} /*为了让box2不受浮动元素box1影响，给box2增加clear:both*/
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
把清除浮动的元素当做一堵墙，用来隔开浮动的元素和浮动的的元素
例如 - box1里面的box2和box3都是浮动的，而且box1没有高度，这个时候可以给box1增加一个清除浮动的子元素clearfix
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
*{margin:0;padding:0}
.box2,.box3{width:100px;height:100px;float:left;background:pink;}
.box4{width:200px;height:120px;background:#FC0;}
.clearfix{clear:both;}
</style>
</head>
<body>
<div class="box1">
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="clearfix"></div>
</div>
<div class="box4">box4</div>
</body>
</html>
③overflow属性
overflow属性用来控制元素超出内容部分的显示情况，是显示还是隐藏
overflow —— 水平和垂直方向（默认值visible）
overflow-x —— 水平方向
overflow-y—— 垂直方向
auto —— 自动出现滚动条
hidden —— 自动隐藏超出部分
scroll —— 总是显示滚动条
例如
overflow:hidden; /*自动隐藏超出部分*/
overflow-x:auto; /*水平方向必要时显示滚动条*/
overflow-x:hidden; /*水平方向自动隐藏超出部分*/
overflow-y:scroll; /*垂直方向总是显示滚动条*/
overflow:hidden
只要盒子有浮动，那么我们就给这个盒子的父级增加overflow:hidden来清除浮动
例如：box1里面的box2和box3都是浮动的，而且box1没有高度，这个时候可以给box1增加一个overflow:hidden属性
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
*{margin:0;padding:0}
.box1{overflow:hidden;}
.box2,.box3{width:100px;height:100px;float:left;background:pink;}
.box4{width:200px;height:120px;background:#FC0;}
</style>
</head>
<body>
<div class="box1">
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
<div class="box4">box4</div>
</body>
</html>
6.布局
以后工作中页面结构会很复杂，所有结构都是由最基本的左右结构变换而来
注意：任何的左右结构都是有3个完成，一个标准流下的父级和两个浮动流的左右子级
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
*{margin:0;padding:0}
.content{width:500px;height:300px;overflow:hidden;}
.left,.right{height:300px;}
.left{float:left;background:#fff509;width:25%;}
.right{float:right;background:#FC0;width:75%;}
</style>
</head>
<body>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
7.定位
position
相对定位relative
绝对定位absolute
固定定位fixed
不定位static
①相对定位
relative - 不脱标
- 参照物 ：相对自己定位
- 改变位置：通过left、right、top、bottom来更改位置
注意：相对定位是脱离标准流的形式 = 占位脱离，不能改变盒子的显示模式
例如 - 设置left，top等偏移量的demo
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
*{margin:0;padding:0}
.box{height:200px;position:relative;background:pink;top:50px;left:50px;}
.content{width:500px;height:300px;overflow:hidden;}
.left,.right{height:300px;}
.left{float:left;background:#fff509;width:25%;}
.right{float:right;background:#FC0;width:75%;}
</style>
</head>
<body>
<div class="box">
relative
</div>
</body>
</html>
②绝对定位
absolute–完全脱标
默认情况下，参照物是浏览器
注意：绝对定位是完全脱离标准流的形式，且不占位置，会将盒子显示模式变成行内块；当偏移量属性上下冲突的时候，上生效；当左右冲突的时候，左生效
总结：以最近的已经定位的父级为参照物，如果不满足这个条件就以浏览器窗口为参照物定位
例如 - box4的参照物是box2
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
*{margin:0;padding:0}
body{background:#ccc;}
.box1{width:400px;height:400px;background:#fff509;}
.box2{width:300px;height:300px;background:#3bc9db;}
.box3{width:200px;height:200px;background:#ff6b22;}
.box4{width:100px;height:100px;background:#ff21b6;}
.box1,.box2{position:relative;top:30px;left:40px;}
.box4{position:absolute;top:30px;left:40px;}
</style>
</head>
<body>
<div class="box1">box1
<div class="box2">box2
<div class="box3">box3
<div class="box4">
box4
</div>
</div>
</div>
</div>
</body>
</html>
绝对定位特点
- 完全脱离标准流，不占位置
- 绝对定位会把盒子变成行内块
- 绝对定位使用规则
子绝父相 – 子级绝对定位，父级相对定位 == 子级的定位参照物变成父级
注意：绝对定位的元素会忽略父级设置的padding值
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
*{margin:0;padding:0}
body{background:#ccc;}
.parent{width:200px;height:200px;background:#F93;position:relative;padding:50px;margin:50px;}
.son{width:100px;height:100px;background:#f5f5f5;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
③z-index
作用：调整标签的z轴堆叠顺序
z-index取值为整数（负整数、正整数和0） – 取值越大堆叠顺序越靠上
注意：z-index必须和定位配合使用才能生效
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
*{margin:0;padding:0}
.father{ width:500px; height:500px; border:1px solid #000; margin:0 auto; position:relative;}
.father div{ width:100px; height:50px; border:1px solid #000; position:absolute;}
.son01{ background:pink; left:50px; z-index:10;}
.son02{ background:#ccc; left:80px; top:30px;}
</style>
</head>
<body>
<div class="father">
<div class="son01">son01</div>
<div class="son02">son02</div>
</div>
</body>
</html>
④固定定位
固定定位fixed将盒子固定在浏览器上（ie6不兼容，后期可以用js弥补）
fixed完全脱离标准流，不占位置
通过设置偏移量改变位置
参照物浏览器
注意：ie6对固定定位有兼容性，固定定位改变盒子显示模式为行内块
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css进阶</title>
<style type="text/css">
*{margin:0;padding:0}
.top{ height:50px; background:#ccc; text-align:center; position:fixed; width:100%;left:0; top:0;}
</style>
</head>
<body>
<div class="top">top</div>
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
<br /> <br /> <br /> <br />
</body>
</html>
tips:
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>fixed固定定位</title>
<style type="text/css">
body {
height: 2000px;
}
p.one {
position: fixed;
left: 5px;
top: 5px;
}
p.two {
position: fixed;
bottom: 50px;
right: 5px;
}
</style>
</head>
<body>
<p>我是固定定位1 我一直在固定在浏览器顶部这里一些文本。</p>
<p>我是固定定位2 我一直在固定在浏览器底部这里 更多的文本。</p>
</body>
</html>
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
tips学习小技巧:
学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？anyway~希望大家可以成为一个优秀的前端！资历有限，错误难免，欢迎大力指正。
【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890
- 点赞
- 收藏
- 关注作者
评论（0）