CSS布局（盒子模型）

盒子模型的介绍

盒子的概念

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

2、浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子

盒子模型

CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是 盒子模型

记忆：可以联想现实中的包装盒

内容的宽度和高度

作用：利用 width（宽） 和 height（高） 属性默认设置是盒子 内容区域 的大小

属性：width / height

常见取值：数字+px

盒子边框

作用：给设置边框粗细、边框样式、边框颜色效果

单个属性：

边框粗细：border-width 数字+px

边框样式：border-style 实线solid、虚线dashed、点线dotted

边框颜色：border-color 颜色取值

边框连写形式

属性名：border

属性值：单个取值的连写，取值之间以空格隔开 如：border : 10px solid red;

快捷键：bd + tab

边框单方向设置

场景：只给盒子的某个方向单独设置边框

属性名：border - 方位名词

属性值：连写的取值

盒子实际大小初级计算公式

需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？

注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！

盒子实际大小初级计算公式：

盒子宽度 = 左边框 + 内容宽度 + 右边框

盒子高度 = 上边框 + 内容高度 + 下边框

解决：当盒子被border撑大后，如何满足需求？

解决：计算多余大小，手动在内容中减去（手动内减）

内边距

作用：设置 边框 与 内容区域 之间的距离

属性名：padding

padding：10px；上下左右都为10px

padding：10px 20px；上下为10px，左右为20px

padding：10px 20px 30px；上为10px，左右为20px，下为30px

padding：10px 20px 30px 40px；上为10px，右为20px，下为30px，左为40px

内边距单方向设置

场景：只给盒子的某个方向单独设置内边距

属性名：padding - 方位名词

属性值：数字 + px

CSS3盒模型（自动内减）

需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？

解决方法 ① ：手动内减

操作：自己计算多余大小，手动在内容中减去

缺点：项目中计算量太大，很麻烦

解决方法 ② ：自动内减

操作：给盒子设置属性 box-sizing : border-box ; 即可

优点：浏览器会自动计算多余大小，自动在内容中减去

外边距

作用：设置边框以外，盒子与盒子之间的距离

属性名：margin

常见取值：

margin ：10px；上下左右都为10px

margin ：10px 20px；上下为10px，左右为20px

margin ：10px 20px 30px；上为10px，左右为20px，下为30px

margin ：10px 20px 30px 40px；上为10px，右为20px，下为30px，左为40px

外边距单方向设置

场景：只给盒子的某个方向单独设置外边距

属性名：margin - 方位名词

属性值：数字 + px

margin单方向设置的应用

margin-left：让当前盒子往右移动

margin-right：让右边的盒子往右移动

margin-top：让当前盒子往下移动

margin-bottom：让下面的盒子往下移动

清除默认内外边距

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的 margin和padding，后续自己设置

比如：

body标签默认有margin：8px

p标签默认有上下的margin

ul标签默认由上下的margin和padding-left

外边距折叠现象

合并现象

场景：垂直布局 的 块级元素，上下的margin会合并

结果：最终两者距离为margin的最大值

解决方法：只给其中一个盒子设置margin即可

塌陷现象

场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上

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

解决方法：

1、给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

2、给父元素设置overflow：hidden

3、转换成行内块元素

4、设置浮动

行内元素的内外边距无效情况

场景：给行内元素设置margin和padding时

结果：

1、水平方向的margin和padding布局中有效！

2、垂直方向的margin和padding布局中无效！

结构伪类选择器

作用：根据元素在HTML中的结构关系查找元素

优势：减少对于HTML中类的依赖，有利于保持代码整洁

场景：常用于查找某父级选择器中的子元素

E：first-child{ }匹配父元素中的第一个属性为E的子元素

E：last-child{ }匹配父元素中的最后一个属性为E的子元素

E：nth-child（n）{ }匹配父元素中的第n个属性为E的子元素

E：nth-last-child（n）{ }匹配父元素中的倒数第n个属性为E的子元素

n的注意点：

1、n为：0、1、2、3、4、5、6、……

2、通过n可以组成常见公式

偶数：2n、even

奇数：2n+1、2n-1、odd

前五个：-n+5

第五个往后所有：n+5

nth-of-type结构伪类选择器

E：nth-of-type（n）{ } 只在父元素的同类型（E）子元素的范围中 匹配第n个

区别：

:nth-child → 直接在所有孩子中数个数

:nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数

伪元素

一般页面中的非主体内容可以使用伪元素

区别：

1、元素：HTML 设置的标签

2、伪元素：由 CSS 模拟出的标签效果

种类：

：：befor 在父元素的最前添加一个伪元素

：：after 在父元素的最后添加一个伪元素

注意点：

1、必须设置content属性才能生效

2、伪元素默认是行内元素

标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

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

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

浮动

早期的作用：图文环绕

现在的作用：网页布局

场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

属性名：float

属性值：

float：left 左浮动

float：right 右浮动

浮动的特点

浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

相当于从地面飘到了空中

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

3、浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4、浮动元素有特殊的显示效果

一行可以显示多个

可以设置宽高

注意点：

浮动的元素不能通过text-align:center或者margin:0 auto

清除浮动

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因： 子元素浮动后脱标 → 不占位置

目的： 需要父元素有高度，从而不影响其他网页元素的布局

清除浮动的方法

直接设置父元素高度

特点：

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

额外标签法

操作：

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

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

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

单伪元素清除*

操作：用伪元素替代了额外标签

.clearfix：：after {

content：''；

display：block；

clear：both；

补充代码：在网页中看不到伪元素

height：0；

visibility:hidden;

}

优点：项目中使用，直接给标签加类即可清除浮动

双伪元素清除法

.clearfix::befour,

.clean::after{

content: ' ' ;

dispaly:table;

}

.clearfix::after {

clear:both;

}

优点：项目中使用，直接给标签加类即可清除浮动

给父元素设置overflow : hidden

操作： 直接给父元素设置 overflow : hidden

优点：方便

（拓展补充）BFC的介绍

块格式化上下文（Block Formatting Context）：BFC

是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

创建BFC方法：

1、html标签是BFC盒子

2、浮动元素是BFC盒子

3、行内块元素是BFC盒子

4、overflow属性取值不为visible。如：auto、hidden…

5、……

BFC盒子常见特点：

1、BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动

2、BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷

3、……

定位

网页常见的布局方式：

标准流

1、块级元素独占一行 → 垂直布局

2、行内元素/行内块元素一行显示多个 → 水平布局

浮动

可以让原本垂直布局的 块级元素变成水平布局

定位

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

2、一般用于 盒子之间的层叠情况

定位的常见应用场景

1. 可以解决盒子与盒子之间的层叠问题。定位之后的元素层级最高，可以层叠在其他盒子上面

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

定位的基本使用

针对于盒子与盒子之间的层叠问题，推荐使用定位完成！

步骤：

1. 设置定位方式

属性名：position

常见属性值：

静态定位：static

相对定位：relative

绝对定位：absolute

固定定位：fixed

2. 设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

选取的原则一般是就近原则 （离哪边近用哪个）

方位名词+数字+px

静态定位

介绍：静态定位是默认值，就是之前认识的标准流。

代码： position：static；

注意点：

1、静态定位就是之前标准流，不能通过方位属性进行移动

2、之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

相对定位

介绍：自恋型定位，相对于自己之前的位置进行移动

代码： position：relative；

特点：

1、需要配合方位属性实现移动

2、相对于自己原来位置进行移动

3、在页面中占位置 → 没有脱标

应用场景：

1、配合绝对定位组CP（子绝父相）

2、用于小范围的移动

绝对定位

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

代码： position：absolute；

特点：

1、需要配合方位属性实现移动

2、默认相对于浏览器可视区域进行移动

3、在页面中不占位置 → 已经脱标

应用场景：

配合绝对定位组CP（子绝父相）

子绝父相

场景：让子元素相对于父元素进行自由移动

含义：

子元素：绝对定位

父元素：相对定位

子绝父相好处： 父元素是相对定位，则对网页布局影响最小

让子盒子往右移动父盒子的一半 ：left：50%

让子盒子往左移动父盒子的一半：

普通做法：margin-left：负的子盒子宽度的一半

缺点：子盒子宽度变化后需要重新改代码

优化做法：transform：translateX(-50%)

优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码

让子盒子往下走大盒子一半 ：top：50%

（拓展） 子绝父绝特殊场景

场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！

原因： 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局

固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动

代码： position：fixed；

特点：

1、需要配合方位属性实现移动

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

3、在页面中不占位置 → 已经脱标

应用场景： 让盒子固定在屏幕中的某个位置

元素的层级关系

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

标准流 < 浮动 < 定位

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

相对、绝对、固定默认层级相同

此时HTML中写在下面的元素层级更高，会覆盖上面的元素

更改定位元素的层级

场景：改变定位元素的层级

属性名：z-index

属性值：数字 （1-999）数字越大，层级越高

装饰

垂直对齐方式

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

属性名：vertical-align

属性值：

基线对齐（默认）：baseline

顶部对齐：top

中部对齐：middle

底部对齐：bottom

文字对齐问题

场景：解决行内/行内块元素垂直对齐问题

当图片和文字在一行中显示时，其实底部不是对齐的

光标类型

场景：设置鼠标光标在元素上时显示的样式

属性名：cursor

常见属性值：

default 默认值，通常为箭头

pointer 小手效果，提示用户可以点击

text：工字型，提示用户可以选择文字

move：十字光标，提示用户可以移动

边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px 、百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角

画一个正圆：

1、盒子必须是正方形

2、设置边框圆角为盒子宽高的一半 → border-radius:50%

胶囊按钮：

1、盒子要求是长方形

2、设置 → border-radius：盒子高度的一半

溢出部分显示效果

溢出部分：指的是盒子 内容部分 所超出盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

属性名：overflow

常见属性值：

visible 溢出部分可见，默认值

hidden 溢出部分隐藏

scroll 无论是否溢出都显示滚动条

auto 根据是否溢出自动显示或隐藏滚动条

元素本身隐藏

场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

常见属性：

1、visibility：hidden

2、display：none

区别：

1、visibility：hidden 隐藏元素本身，并且在网页中 占位置

2、display：none 隐藏元素本身，并且在网页中 不占位置

注意点：

开发中经常会通过 display属性完成元素的显示隐藏切换

display：none；（隐藏）、 display：block；（显示）

（拓展）元素整体透明度

场景：让某元素整体（包括内容）一起变透明

属性名：opacity

属性值：0~1之间的数字

1：表示完全不透明

0：表示完全透明

注意点：

opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

拓展）边框合并

场景：让相邻表格边框进行合并，得到细线边框效果

代码：border-collapse：collapse；

（拓展）用CSS画三角形技巧（面试题）

场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。

实现原理：

利用盒子边框完成

实现步骤：

1、设置一个盒子

2、设置四周不同颜色的边框

3、将盒子宽高设置为0，仅保留边框

4、得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

根目录

根目录：网站的第一级文件夹

1、图片文件夹: images

2、样式文件夹: CSS

3、首页 : index.html

布局流程

从外到内, 从上到下

CSS美化 ：

宽度,高度,背景色 → 调整位置

放内容 → 调整内容位置 → 调整细节(文字样式等等)

选择器拓展

链接伪类选择器

场景：常用于选中超链接的不同状态

选择器语法：

a:link { } 选中a链接未访问过的状态

a:visited { } 选中a链接访问之后的状态

a:lhover { } 选中鼠标悬停的状态

a:active { } 选中鼠标按下的状态

注意点：

如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写

其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态

焦点伪类选择器

场景：用于选中元素获取焦点时状态，常用于表单控件

选择器语法：

input：focus {

background-color：skyblue；

}

效果： 表单控件获取焦点时默认会显示外部轮廓线

属性选择器

场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签

选择器语法：

E[attr] 选择有attr属性的E元素

E[attr="val"] 选择有attr属性且属性值定于val的E元素

CSS样式补充

精灵图

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

例如：需要在网页中展示8张小图片

8张小图片分别发送 → 发送8次

合成一张精灵图发送 → 发送1次

精灵图的使用步骤

1.创建一个盒子

2.通过PxCook量取小图片大小，将小图片的宽高设置给盒子

3.将精灵图设置为盒子的背景图片

4.通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

背景图片大小

作用：设置背景图片的大小，

语法：background-size：宽度 高度；

取值：

数字+px

百分比 相对于当前盒子自身的宽高百分比

contain 包含，将背景图等比缩放，直到不会超出盒子的最大

cover 覆盖，将图片等比缩放，直到填满整个盒子

background连写拓展

完整连写： background：color image reprat position/size；

注意点：

background-size和background连写同时设置时，需要注意覆盖问题

解决：

1.要么单独的样式写连写的下面

2.要么单独的样式写在连写的里面

文字阴影

作用：给文字添加阴影效果，吸引用户注意

属性名：text-shadow

取值：

h-shadow 必须，水平偏移量，允许负值

v-shadow 必须，垂直偏移量，允许负值

blur 可选，模糊度

color 可选，阴影颜色

拓展： 阴影可以叠加设置，每组阴影取值之间以逗号隔开

盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名：box-shadow

取值：

h-shadow 必须，水平偏移量，允许负值

v-shadow 必须，垂直偏移量，允许负值

blur 可选，模糊度

spread 可选，阴影扩大

color 可选，阴影颜色

inset 可选，将阴影改为内部阴影

过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名：transition

常见取值：

all：所有能过渡的属性都过渡

width：只有width过渡

数字+s（秒） 过渡的时长

注意点：

1. 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果

2. transition属性给需要过渡的元素本身加

3. transition属性设置在不同状态中，效果不同的

① 给默认状态设置，鼠标移入移出都有过渡效果

② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

骨架结构标签

文档类型声明，告诉浏览器该网页的 HTML版本

注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签

是网页使用的语言

作用：搜索引擎归类 + 浏览器翻译

常见语言：zh-CN 简体中文 / en 英文

是网页使用的字符编码

作用：保存和打开的字符编码需要统一设置，否则可能会出现 乱码

Ø

常见字符编码：

1. UTF-8：万国码，国际化的字符编码，收录了全球语言的文字

2. GB2312：6000+ 汉字

3. GBK：20000+ 汉字

注意点：开发中 统一使用 UTF-8 字符编码 即可

SEO三大标签

1. title：网页标题标签

2. description：网页描述标签

3. keywords：网页关键词标签

SEO（Search Engine Optimization）：搜索引擎优化

作用：让网站在搜索引擎上的排名靠前

提升SEO的常见方法：

1.竞价排名

2.将网页制作成html后缀

3.标签语义化（在合适的地方使用合适的标签）

4.……

（拓展补充） 有语义的布局标签

场景：在HTML5新版本中，推出了一些有语义的布局标签，可以增强网页的语义化

常见有语义的布局标签有哪些？

header：网页头部

nav：网页导航

footer：网页底部

aside：网页侧边栏

section：网页区块

article：网页文章

ico图标设置

场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标

常见代码：

版心

场景：把页面的主体内容约束在网页中间

作用：让不同大小的屏幕都能看到页面的主体内容

代码：

.wrapper {

width：1200px；

margin：0 auto；

}

注意点： 版心类名常用：container、wrapper、w 等

文件和目录准备

1. 新建项目文件夹 xtx-pc-client，在VScode中打开

在实际开发中，项目文件夹不建议使用中文

所有项目相关文件都保存在 xtx-pc-client 目录中

2. 复制 favicon.ico 到 xtx-pc-client 目录

一般习惯将ico图标放在项目根目录

3. 复制 images 和 uploads 目录到 xtx-pc-client 目录中

images ：存放网站 固定使用 的图片素材，如：logo、样式修饰图片… 等

uploads：存放网站 非固定使用 的图片素材，如：商品图片、宣传图片…等

4. 新建 index.html 在根目录

5. 新建 css 文件夹保存网站的样式，并新建以下CSS文件：

base.css：基础公共样式

common.css：该网站中多个网页相同模块的重复样式，如：头部、底部

index.css：首页样式

基础公共样式

场景：一般项目开始前，首先会 去除掉浏览器默认样式，设置为 当前项目需要的初始化样式

作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发

要求： 已经准备好base.css代码，同学们需要认识，项目中可以直接引入使用

index页面骨架