今天我们来了解一下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 – 实体化范围

①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+实体化尺寸

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 页面声明即可。

⑤外边距塌陷/margin合并问题

当垂直排列的两个盒子，垂直外边距紧挨在一起，就会产生合并/塌陷问题，

取值方法：取值为两者之间的较大值

例如：

由于这个特性，我们在实际项目中遇到这样的问题， 只需要给1号margin-bottom，或者仅仅给2号margin-top，即可。

嵌套排列的两个盒子也有外边距塌陷问题

解决办法：

给父级添加border属性，完整的划分出盒子边缘；

给父级或子级别添加float：left属性

给父级添加overflow：hidden属性

⑥行内标签的垂直内外边距

行内标签想要改变垂直方向的位置，通过margin和padding都不生效，唯独通过设置行高属性line-height才能生效 – 行高属性可以改变行内标签的中心基线的位置

tips：

margin的上下值对行内标签不起作用

把行内元素转换为行内换就可以了。

⑦盒子水平居中

核心属性：margin：上下随意 左右必须为auto；

先决条件

如果想要盒子居中，盒子必须满足以下条件：

盒子必须有宽度width值

盒子必须是块级元素

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.标准流文档流

标准流： 就是浏览器按照默认的样式来排列标签

其实就是一个非常常见的现象：由于页面中的所有标签默认状态下都受标准流控制，所以块级标签独占一行，行内标签可以一行共存多个

这是p

我是h1标题

我是行内块span 我是a行内a 我是行内b

5.浮动

浮动是一种脱离标准流的形式 – 半脱离

float：left|right|none；

left- 左浮动

right- 右浮动

none - 不浮动

浏览器认为设置了浮动的元素不存在，所以会影响到后续的元素，所以浮动脱离标准流叫做半脱离。

块级标签在一行共存

注意：浮动之后的标签是完全没有间距的左对齐和顶对齐；浮动后的标签显示模式为行内块

由于浮动的元素没有行内元素、块级元素之分，所以不接受 display 进行行块转换

①浮动的特点

浮动的元素脱离文档元素，不占据空间。不浮动的元素会直接无视掉这个元素。

浮动元素遇到另一个浮动的元素就会停下

文本和行内元素会环绕在float元素周边的

box3

②清除浮动clear:both;

由于浮动的盒子会影响后面的盒子排列，如果后面的盒子不想要被影响，那么需要对浮动进行清除。

left – 清除左侧浮动的影响

right – 清除右侧浮动的影响

both– 清除两侧浮动的影响

谁不想被影响，给谁加：clear:both

把清除浮动的元素当做一堵墙，用来隔开浮动的元素和浮动的的元素

例如 - box1里面的box2和box3都是浮动的，而且box1没有高度，这个时候可以给box1增加一个清除浮动的子元素clearfix

③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属性

6.布局

以后工作中页面结构会很复杂，所有结构都是由最基本的左右结构变换而来

注意：任何的左右结构都是有3个完成，一个标准流下的父级和两个浮动流的左右子级

7.定位

position

相对定位relative

绝对定位absolute

固定定位fixed

不定位static

①相对定位

relative - 不脱标

参照物 ：相对自己定位

改变位置：通过left、right、top、bottom来更改位置

注意：相对定位是脱离标准流的形式 = 占位脱离，不能改变盒子的显示模式

例如 - 设置left，top等偏移量的demo

②绝对定位

absolute–完全脱标

默认情况下，参照物是浏览器

注意：绝对定位是完全脱离标准流的形式，且不占位置，会将盒子显示模式变成行内块；当偏移量属性上下冲突的时候，上生效；当左右冲突的时候，左生效

总结：以最近的已经定位的父级为参照物，如果不满足这个条件就以浏览器窗口为参照物定位

例如 - box4的参照物是box2

绝对定位特点

完全脱离标准流，不占位置

绝对定位会把盒子变成行内块

绝对定位使用规则

子绝父相 – 子级绝对定位，父级相对定位 == 子级的定位参照物变成父级

注意：绝对定位的元素会忽略父级设置的padding值

③z-index

作用：调整标签的z轴堆叠顺序

z-index取值为整数（负整数、正整数和0） – 取值越大堆叠顺序越靠上

注意：z-index必须和定位配合使用才能生效

④固定定位

固定定位fixed将盒子固定在浏览器上（ie6不兼容，后期可以用js弥补）

fixed完全脱离标准流，不占位置

通过设置偏移量改变位置

参照物浏览器

注意：ie6对固定定位有兼容性，固定定位改变盒子显示模式为行内块

tips:

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

我是固定定位1 我一直在固定在浏览器顶部这里一些文本。

我是固定定位2 我一直在固定在浏览器底部这里 更多的文本。

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

tips学习小技巧:

学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？anyway~希望大家可以成为一个优秀的前端！资历有限，错误难免，欢迎大力指正。

【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890

CSS HTML web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。