本文详细介绍了CSS中的盒子模型，包括内容区域、边框、内边距、外边距以及如何计算盒子的实际大小。同时，探讨了清除默认内外边距、版心居中以及外边距折叠等常见问题。此外，还涵盖了结构伪类选择器、伪元素、标准流、浮动布局、定位技术，如相对定位、绝对定位、固定定位，并讲解了元素的层级关系和装饰效果，如垂直对齐、光标样式等。文章深入浅出，是理解CSS布局和定位的宝贵资料。
目录
一.盒子模型
1.概念
- 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
- 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
- CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
2.内容区域
宽度和高度: width, height 属性默认为盒子内容区域的大小 属性值:数字+px;
3.边框(bd)
单个取值的连写,取值之间空格隔开,不分先后 , 会撑大盒子的尺寸
①四周框线 border:10px solid pink; 线条粗细 线条类型(solid实/dashed虚/dotted点线) 线条颜色
②单边框线 border-方位名词(left/right/top/bottom) e.g: border-left:10px solid pink;
4.内边距
padding 边框与内容区域之间的距离
属性值:一个(上) 两个(上下,左右) 三个(上,左右,下) 四(上,右,下,左) 从上开始,顺时针转,未设置的看对面
5.外边距
margin 设置边框以外，盒子与盒子之间的距离 属性值规则与padding同
margin-方位名词 让当前盒子往哪边移
6.盒子实际大小
- 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
- 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
- 自己计算多余大小，手动在内容中减去（手动内减）
不会撑大盒子的特殊情况（块级元素）
- 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大:
- 手动内减 , 自己计算多余大小，手动在内容中减去(用padding替换width) 缺点：项目中计算量太大，很麻烦
- 自动内减 , 变成css3的盒子模型, 给盒子设置属性 box-sizing : border-box ; 优点：浏览器会自动计算多余大小,自动在内容中减去
7.清除默认内外边距
浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置
用通配符 *{ padding: 0; margin: 0; } / 挨个写 body,ul,p.......{ padding: 0; margin: 0; }
8.版心居中
版心: 网页有效内容 通常水平居中 margin: 0 auto;
9.其他问题
(1)外边距折叠现象
正常情况: 水平布局 的盒子，左右的margin正常，互不影响, 最终两者距离为左右margin的和
合并现象
垂直布局的块状元素, 上下的margin会合并, 最终两者距离为margin的最大值, 只设置其中一个即可
塌陷现象
互相嵌套的块状元素, 子元素的margin-top会作用在父元素上(导致父元素一起往下移)
解决方法:
- 给父元素设置border-top(有边框线的情况下) 或者 padding-top（分隔父子元素的margin-top）
- 给父元素设置overflow：hidden
- 转换成行内块元素 (不满足互相嵌套的块状元素,自然可以解决问题)
- 设置浮动, 定位解决等
(2)行内元素的垂直内外边距
给行内元素设置margin和padding时, 水平方向的margin和padding布局中有效, 垂直方向的margin和padding布局中无效.
改变垂直位置, 转显示模式, 或者加行高
二.结构伪类选择器
根据元素在HTML中的结构关系查找元素 , 减少对于HTML中类的依赖，有利于保持代码整洁 , 常用于查找某父级选择器中的子元素
- :nth-child → 直接在所有孩子中数个数
- :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数
三.伪元素
一般页面中的非主体内容可以使用伪元素, 通过css创建标签,装饰性的不重要的小图
::before/ ::after 在父元素内容得最前/后添加一个伪元素
- 元素：HTML 设置的标签 , 伪元素：由 CSS 模拟出的标签效果
- 必须设置content(内容)属性才能生效, 否则伪元素不生效
- 伪元素默认是行内元素, 宽高不生效
四.标准流
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
五.浮动
1.作用
早期: 图文环绕
现在: 网页布局 让垂直布局的盒子变成水平布局，如：一个在左，一个在右
将块状元素转为行内式,中间有一个空格的距离(代码换行所致),运用浮动, 即使代码换行写,也可以在一行且无间隔 .
2.属性
float: left/right; 左/右浮动
3.特点
- 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置(浮在表面)
- 浮动元素(标签)比标准流高半个级别，可以覆盖标准流中的元素, 半脱标, 不覆盖内容
- 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动, 默认顶对齐, 可以使用margin-top挪动
- 浮动元素有特殊的显示效果 , 一行可以显示多个, 可以设置宽高, 浮动后的的标签具有行内块标签的特点
- 浮动的元素, text-align:center或者margin:0 auto无法生效, 盒子无法水平不能居中
4.清除浮动
(1)浮动影响
- 子元素浮动后脱标 → 不占位置, 此时子元素不能撑开标准流的块级父元素, 需要父元素有高度，从而不影响其他网页元素的布局
- 父子级标签,子级浮动,父级没有高度,后面的标准流盒子会受影响,会显示在上边的位置
(2)清除浮动方法
①直接设置父元素高度
简单方便, 但在有些布局中不能固定父元素高度. e.g:新闻列表, 京东推荐模块
②额外标签法
在父元素内容的最后添加一个块级元素 , 给添加的块级元素设置 clear:both
缺点: 会在页面中添加额外的标签，会让页面的HTML结构变得复杂 <div id="clearfix"></div>
③单伪元素清除法
用伪元素替代了额外标签, 项目中使用，直接给标签加类即可清除浮动
<div class="eight clearfix">
④双伪元素清除法
项目中使用，直接给标签加类即可清除浮动
⑤给父元素设置overflow: hidden;
六.定位
1.定位的基本介绍
(1)网页常见布局方式
- 标准流: 块级元素独占一行 → 垂直布局 ,行内元素/行内块元素一行显示多个 → 水平布局
- 浮动: 可以让原本垂直布局的 块级元素变成水平布局
- 定位 :可以让元素自由的摆放在网页的任意位置 , 一般用于 盒子之间的层叠情况
(2)应用场景
- 可以解决盒子与盒子之间的层叠问题 (定位之后的元素层级最高，可以层叠在其他盒子上面)
- 可以让盒子始终固定在屏幕中的某个位置
2.定位的基本使用
(1)使用步骤
①设置定位方式 position 属性值: static / relative / absolute / fixed 静态/相对/绝对/固定
②设置偏移值 水平和垂直方向各选一个即可, 就近原则(离哪边近用哪个)
- 水平: left / right 数字 + px 距离左/右边的距离
- 垂直: top / bottom 数字 + px 距离上/下边的距离
- 如果水平都写,以left为准, 垂直都写则以top为准
(2)静态定位
静态定位是默认值，就是之前认识的标准流。 position: static ;
注意:
- 静态定位就是之前标准流，不能通过方位属性进行移动
- 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
(3)相对定位
自恋型定位, 相对于自己之前的位置进行移动 position: relative;
特点:
- 在页面中占有原来的位置 → 没有脱标, (div标签的盒子也占有新位置的一整行)
- 仍然具有标签原有的显示模式特点
- 移动距离是以原来位置为基准移的
- 配合绝对定位组cp(子绝父相, 子级绝对定位,父级相对定位配合使用)
- 用于小范围的移动
(4)绝对定位
拼爹型定位, 相对于非静态定位的父元素进行定位移动 position: absolute;
特点:
- 脱标, 不占页面中位置
- 改变标签的显示模式特点, 具备行内块的特点(一行共存,且宽高生效 )
- 先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位; 有父级,但父级没有定位, 以浏览器窗口为参照物进行定位.
绝对定位查找父级的方式: 就近找定位的父级,如果逐层查找不到这样的父级, 就以浏览器窗口为参照进行定位.
(5)固定定位
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动, 页面移动,始终可见
- 在页面中不占位置 → 已经脱标
- 让盒子固定在屏幕中的某个位置
(6)居中
绝对定位盒子不能使用margin: 0 auto;居中.
①手动计算居中
可使用: left: 50%; margin-left: -150px; top: 50%; margin-top: -150px;(盒子大小的一半)
50%会让盒子在中间偏右下的位置(是以左顶点为准居中的,故需要再移动一点位置)
不方便, 多次改, 奇数不可,
②自动计算居中 left:50%; top: 50%; transform: translate(-50%,-50%) 即可
3.元素层级问题
(1)层级关系
- 不同布局方式元素的层级关系： 标准流 < 浮动 < 定位
- 不同定位之间的层级关系： 相对、绝对、固定默认层级相同
- 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
默认情况下, 定位的盒子, 后来者在上, 会压先来的
(2)更改定位元素的层级
z-index: 整数; 值越大, 显示越靠上, 默认值0 配合定位才能生效
七.装饰
1.基线
基线: 浏览器文字类型元素排版中存在用于对齐的基线（baseline）
浏览器处理行内标签,行内块标签默认按文字解析, 默认基线对齐
2.垂直对齐方式
vertical-align: baseline / top/ middle / bottom; 默认,基线对齐 / 顶部 / 中部 / 底部对齐
e.g: 盒子设置宽未设置高,图片撑开盒子, 盒子多出一点, 可以 display:block; 也可 vertical-align:middle;
解决的问题:
- 文本框和表单按钮无法对齐问题
- input和img无法对齐问题
- div中的文本框，文本框无法贴顶问题
- div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
- 使用line-height让img标签垂直居中问题
- 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
- 推荐优先使用浮动完成效果
3.光标
设置鼠标光标在元素上显示的样式 属性名 cursor
属性值:
- default 默认值,通常是箭头
- pointer 小手效果,提示用户可以点击
- text 工字型, 提示用户可以选择文字
- move 十字光标, 提示用户可以移动
4.边框圆角
让盒子四个角变得圆润,增加页面细节,提升用户体验 border-redius: 数字px/ 百分比; (最多4个值)
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角(一个值则四角同,两个值则左和对角一样,右和对角一样)
- 正圆: 设置属性值为盒子宽高的一半, 必须是正方形
- 胶囊按钮: 设置 → border-radius：盒子高度的一半; 50%变椭圆 盒子要求是长方形
5.溢出部分展示效果
指的是盒子 内容部分 所超出盒子范围的区域 overflow
控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
- visible 默认值,溢出部分可见
- hidden 溢出部分隐藏
- scroll 无论是否溢出,都显示滚动条
- auto 根据是否溢出,自动显示或隐藏滚动条
6.元素本身隐藏
让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
常见属性:
- visibility: hidden; 隐藏元素本身, 并且在网页中占位置
- display: none; 隐藏元素本身, 并且在网页中不占位置
注意:
- 开发中经常会通过 display属性完成元素的显示隐藏切换
- display：none；（隐藏）、 display：block；（显示）
display: none; /* 显示隐藏效果, 隐藏图片,不占位 */ }
ul li a:hover img{ /* 鼠标悬停显示隐藏, 需要显示的是图片img */
display: block; }
7.元素整体透明度
让某元素整体（包括内容）一起变透明 opacity: 0~1之间的数字;
注意点：
- 1：表示完全不透明 0：表示完全透明
- opacity会让元素整体透明，包括里面的内容，如：文字、子元素等
8.边框合并
9.画三角形
在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。利用盒子边框完成
设置一个盒子 ,设置四周不同颜色的边框 ,将盒子宽高设置为0，仅保留边框 ,得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明,,通过调整不同边框的宽度，可以调整三角形的形态
八.选择器拓展
1.链接伪类选择器
常用于选中超链接的不同状态
- a:link{} 选中a链接未访问过的状态
- a:visited{} 选中a链接访问之后的状态
- a:hover{} 选中鼠标悬停的状态 常用, 可换点击时的颜色等
- a:active{} 选中鼠标按下的状态
2.焦点伪类选择器
用于选中元素获取焦点时状态，常用于表单控件
input:focus{ background-color: pink; }
表单控件获取焦点时默认会显示外部轮廓线
3.属性选择器
通过元素上的HTML属性来选择元素，常用于选择 input 标签
- E[attr] 选择具有attr属性的E元素
- E[attr="value"] 选择具有attr属性并且属性值为value的E元素
CSS属性书写顺序
浏览器执行效率更高, (写代码时可以把要放前边的往上写即可)
1.浮动 / display
2.盒子模型相关属性 margin, border, padding 宽度高度背景色
3.文字样式
扫一扫
866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
