CSS3盒子模型与页面布局

type

status

date

slug

summary

第一章盒子模型

1.1 盒子模型介绍

概念：

页面中每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局

浏览器在渲染网页时，网页中的的每个元素都包含在一个矩形框内，我们也形象的称之为盒子

模型图：

margin(外边距) - 清除边框外的区域，外边距是透明的。

border(边框) - 围绕在内边距和内容外的边框。

padding(内边距) - 清除内容周围的区域。可以使同一行不同盒子不会因为内容大小不同而导致与边框的距离发生变化，且此时就不用给内容加宽度width。

content(内容) - 盒子的内容，包含宽度和高度

代码示例：

在这里，模拟快递盒包装类比盒子模型，外边局是盒子与其他盒子之间距离，border为纸箱，padding为填充泡沫，content即为填充泡沫里面的物品。

1.2 盒子构成相关属性

1.2.1 内容区宽高（width height）

属性	属性值	功能	ㅤ
width	数字+px	宽度	ㅤ
height	数字+px	高度	ㅤ

1.2.2 边框（border）

语法：border:parm1 parm2 parm3 (三个参数不分先后)

parm1：数字+px 边框厚度

parm2：border、dashed 、dotted 实线、虚线、点线

parm3：#000 颜色值

注：

border属性可按作用边框分为 border-left，border-right ，border-top，border-bottom 属性可分别对单个边框做样式说明

border属性可按作用类型分为border-width ，border-style，border-color 属性分别声明边框粗细，边框类型，边框颜色

border边框的粗细会撑大盒子，如果设计内容为x*y，边框为n，那么盒子大小就为（x+2n）*（y+2n）

1.2.3 内边距（padding）

语法：

padding:num+px

padding:num1+px num2+px (上下，左右)

padding:num1+px num2+px num3+px (上，左右，下)

padding:num1+px num2+px num3+px num4+px (上，右，下，左)

注：和边框一样，内边距同样会撑大盒子。在纵向排列的多条列表框中，下边距经常为零。

1.2.4 外边距（margin）

语法：

margin:num+px

margin:num1+px num2+px (上下，左右)

margin:num1+px num2+px num3+px num4+px (上，右，下，左)

版心居中：(盒子水平居中)

版心意思为网页的有效内容，基本版心100%都为水平居中。

margin:x auto （x为上下外边距）

1.3 构建盒子模型问题

1.3.1 自动内减

在上面说过，边框和内边距都会撑大盒子的内边距，在设计页面布局的时候，就需要手动做减法（盒子尺寸减去边框和内边距得到内容宽高），现在做如下操作：

box-sizing:border-box; 可以是盒子大小即为width和height，边框，内边距都会在此基础上往里面缩。

1.3.2 清除默认内外边距

每个标签都是默认自带内外便签，为了设计方便，在开发网页时，一般需要加上如下代码，先使内外边距为零，后面再根据设计师设计要求设计设置相应的数值。

1.3.3 外边距折叠现象

1、合并现象

场景：垂直布局的块级元素，上下的外边距（margin）会合并。意思是，如果上边块级元素设置底部外边局为50px，下边块级元素设置顶部外边距为60px，那么最终两块级元素之间的边距是60px。即最终两者距离为最大者

解决方案：只给一个盒子设置margin即可

2、塌陷现象

场景：父子元素都是块级，子元素的margin-top会作用在父元素上

结果：导致父元素一起往下移动

解决方案：

1、给父元素设置边框border（不推荐）

2、给父级元素设置overflower:hidden (推荐)

3、设置浮动

4、参看2.2.2中双伪元素消除浮动方法

1.3.4 行内元素的内外垂直边距问题

场景：通过margin或padding改变a，span等行内元素的垂直距离，无法生效（水平距离可以生效）

解决方案：

line-height:num+px

第二章页面布局方式

CSS的页面布局用三种（即盒子按什么规则排列）：

标准流（文档流）

浮动

定位

2.1 标准流

标准流就是一个网页文档内的标签按照规定好的默认方式，从上到下，从左到右排列

1、块级元素：从上而下，垂直布局，独占一行

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2、行内元素或行内块元素：从左到右，水平布局，空间不够自动折行

常用元素：span、a、i、em等

2.2 浮动(float)

2.2.1 活用浮动

作用：

早期：图文环绕

现在：页面布局；使原本垂直布局的块级元素完美的水平布局

引出话题：为什么浮动是完美的呢，行内块元素不能实现完美在一行排列吗？

将块级元素变成行内块元素，块级元素间有空格

被转换成行内块元素的块级元素只有同行书写才能消除空格，这是不完美的

语法：float:right | left | none

特性：

1、浮动元素会脱离标准流的控制，在标准流中不占位置

2、浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3、浮动找浮动，下一个浮动元素会在上一个浮动元素后面浮动，且两标签是顶对齐的

4、浮动后在一排显示，可以设置宽高 —— 具备行内块元素特点

5、浮动后可以设置上下左右的外边距，但是不能通过margin-top:0 auto 和text-align:center水平居中

案例 1

设计如下图所示的网页布局

代码

案例 2

使用浮动，完成设计图中布局效果

代码

案例3

使用浮动，完成如下导航栏设计

示例代码

CSS书写顺序：（浏览器执行效率会更高）

1、浮动/display

2、盒子模型：margin、border、padding 宽高背景色

3、文字样式

2.2.2 清除浮动

作用：清除浮动带来的影响，

场景：父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受到影响。

场景构建

1、在下图布局中，主框架父级元素设置高度，然后嵌套了俩浮动的子元素，高度相同。此时最低下元素不会顶上来。

2、但是在实际开发网页中，如果给主框架父级元素设置高度的话，那么框架中的内容就会受到高度影响而导致只能填充有限内容。就需要把高度去掉。

3、此时，问题出现了，高度去除之后的底部元素就会自动往上面排列，此时浮动带来的影响就出来了

4、而我们需要出现的结果是：主体父元素不设置高度，底部元素依然在底部不会往上排列，那么就能无限制的往主体添加浮动子元素，主题的高度由浮动子元素来撑开。

清除浮动的方法：

1、额外标签法：

操作：

1、给父元素内容的最后添加一个块级元素

2、给添加的块级元素设置：clear:both

代码

缺点：会在页面中额外添加标签，会让页面的HTML结构变得复杂

2、单伪元素清除法：

操作：为伪元素替代了额外标签添加块级元素

代码

3、双伪元素消除法

操作：

代码

优点：既可以消除浮动，好能防止塌陷

4、给父级设置overflow:hidden

代码:

直接在父级元素css中添加overflow:hidden 即可

优点：方便

2.3 定位

作用：

可以让元素自由的摆放在页面的任意位置

一般用于盒子之间的等层情况（浮动无法做到）

可以让盒子始终固定在屏幕的某个位置

2.3.1 语法

注：静态定位static是默认值，标准流，不做讲解

设置偏移量：

方向	属性名	属性值	含义
水平	left	数字+px；百分比	距离左边的距离
水平	right	数字+px；百分比	距离右边的距离
垂直	top	数字+px；百分比	距离上边的距离
垂直	bottom	数字+px；百分比	距离下边的距离

2.3.2 相对定位

语法：position:relative

特点：

配合偏移量实现移动，偏移量是相对于自己原来的位置（不做定位前标准流的位置）

自己原来的位置依然存在——>没有脱标

left和right都有，只生效left；top和bottom都有，只生效top

案例：

2.3.3 绝对定位

语法：position:absolute;

概念：先找已经定位的父元素，如果有这样的父元素就以这个父级为参照物进行定位；如果有父级但没有定位，以浏览器窗口为参照进行定位

特点：

配合偏移量实现定位；偏移量是

原有标准流位置被后面元素顶掉，不再被占用——>脱标

改变标签显示模式特点：具备行内块特点（在一行共存，宽高生效）

案例1：以浏览器为参照定位

案例2：以父级元素参照定位（子绝父相）

可以将.son选择器中的position:relative; 删除，然后对比下效果。

注：

对于已经定位的父元素，不管是相对定位还是绝对定位，子元素的绝对定位都会生效。但一般来说父级相对定位，子级绝对定位，俗称子绝父相

绝对定位中的相对定位的父级元素是广义的父级，只要是包含子级的父级就行。

子绝父相中的子元素居中对齐：（区分和标准流中居中对其区别）

left:50% 整个子盒子移动到父盒子中间偏右的位置

top:50% 整个子盒移动到父盒子中间偏下的位置

2.3.4 固定定位

语法：position:fixed

概念：相对浏览器窗口进行定位，他的位置不会随着浏览器的滚动而改变。常用语侧边栏和导航栏。

特点：

需要配合方向属性实现定位。left，right，top，bottom

在页面不占位置——>脱标

相对浏览器可视区域进行移动

2.3.5 元素层级关系

1、不同布局方式元素的层级关系：

标准流 < 浮动 < 定位

2、不同定位之间的层级关系：

默认：按照代码顺序，”后来者居上“

z-index:整数：取值越大显示顺序越靠上（默认为0，且该属性必须配合定位使用）

第一章 盒子模型