承接JAVA前端CSS学习笔记（四，显示模式和CSS特性）
文章目录
目录
前言
本篇主要记载盒子模型相关概念和CSS浮动，其中包括盒子模型：相关概念，内容宽度和高度，边框，内边距，外边距；CSS浮动：结构伪类选择器，伪元素，标准流，浮动，清除浮动。
本篇承接上篇，读者可以点进作者的主页看第一篇的学习笔记。若对前端不是很了解的读者可以去作者主页面阅读5篇HTML基础知识点笔记，更易于初学者入门。
如果此篇有什么疑问可以私信询问我，笔者回消息很快的。如果此篇对你有所帮助，恳请您给这篇学习笔记点个赞，将此篇分享给更多的人。
一，盒子模型
1，盒子模型概念：
1，页面中的没一个标签，都可以看做一个“盒子”，通过盒子视角更方便布局。
2，浏览器在渲染（显示）网页时，会将网页中的元素看作是个矩形区域。
2，盒子模型：
CSS中规定每个盒子分别由：内容区域（contrnt），内边距区域（padding），边框区域（border），外边距区域（margin）构成。
例：
<style>
div{
border:1px solid red;
/* 边框线 */
padding: 20px;
/* 内边距（出现在内容和边框之间） */
margin: 20px;
/* 外边距（出现在盒子和盒子之间） */
}
</style>3，内容的宽度和高度：
属性：width/height
作用：利用width和height属性默认设置是盒子内容区域大小。
常见取值：数字+px；
例：
<style>
div{
width: 100px;
height: 100px;
}
</style>4，边框（border）
1，连写形式
属性值：border
连写形式：border：10px solid red；
取值：
| solid | 直线 |
| dashed | 虚线 |
| dotted | 点线 |
2，单方向设置
作用：只给盒子的某个方向单独设置边框
属性名：border-方位名词
方位名词：
| top | 上 |
| bottom | 下 |
| left | 左 |
| right | 右 |
3，单个属性
作用：给设置边框粗细，边框样式，边框颜色效果
单个属性：
| 作用 | 属性名 | 属性值 |
| 边框粗细 | border-width | 数字+px |
| 边框样式 | border-style | 实线solid，虚线dashed，点线dotted |
| 边框颜色 | border-color | 颜色取值 |
5，内边距（padding）
padding属性可以当作复合属性使用，最多可以取四个值。
四值：上/右/下/左
padding:10px 20px 40px 80px;
三值：上/左右/下
padding:10px 40px 80px;
两值：上下/左右
padding:10px 80px
补充（自动内减）：
需求：盒子尺寸300*300，边框10px实线黑色，上下左右20px内边距。
（给盒子设置border或padding时盒子会自动撑大）
解决方法（1）：手动内减
操作：自己计算多余大小，手动在内容减去。
缺点：项目中计算量太大。
解决方法（2）：自动内减
操作：给盒子设置属性box-sizing：border-box即可。
优点：浏览器会自动计算多余大小，自动在内容中减去。
例：
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
padding:20px;
box-sizing: border-box;
}
</style>6，外边距（margin）
属性值：margin
属性值：数字+px；
清除默认内外边距：
作用：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续会自己设置。
解决方法：
*{
margin:0;
padding:0;
}版心居中：
代码：margin:0 auto
版心：网页的有效内容。
二，CSS浮动
1，结构伪类选择器
作用：根据元素在HTML中的结构关系查找元素。
优势：减少HTML中类的依赖，有利于保持代码整洁。
场景：常用于查找某父级选择器中的子元素。
选择器：
| 选择器 | 说明 |
| E:first-child{} | 匹配父元素中第一个子元素，并且是E元素 |
| E:last-child{} | 匹配父元素中最后一个子元素，并且是E元素 |
| E:nth-child(n){} | 匹配父元素中第n个子元素，并且是E元素 |
| E:nth-last-child(n){} | 匹配父元素中倒数第n个子元素，并且是E元素 |
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:first-child{
color: aquamarine;
}
</style>
</head>
<body>
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
</body>
</html>
n的注意点：
1，n为：0，1，2，3等等
2，通过n可以组成常见公式：
| 功能 | 公式 |
| 偶数 | 2n，even |
| 奇数 | 2n+1，2n-1，odd |
| 找到前五个 | -n+5 |
| 找到从第五个往后 | n+5 |
2，伪元素
伪元素：一般页面中的非主体内容可以使用伪元素。
区别：
| 元素 | HTML设置的标签 |
| 伪元素 | 由CSS模拟出来的标签效果 |
种类：
| 伪元素 | 作用 |
| ::before | 在父元素内容的最前面添加一个伪元素 |
| ::after | 在父元素内容的最后面添加一个伪元素 |
注意：
1，必须设置content属性才能生效。
2，伪元素默认是行内元素。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 300px;
height: 300px;
}
.father::before{
content:'老鼠'
}
.father::after{
content:'大米'
}
</style>
</head>
<body>
<div class="father">爱</div>
</body>
</html>
3，标准流
标准流：又称为文档流，是浏览器在渲染显示网页内容时，默认采用的一套排版规则，规定了应该以何种方式排列元素。
常见标准流默认排版规则：
1，块级元素：从上往下，垂直布局，独占一行。
2，行内元素或行内块元素：从左往右，水平布局，空间不够自行折行。
4，浮动
为什么需要浮动
网页中有很多的布局效果，标准流没有办法完成。此时我们就可以利用浮动来实现部分网页布局，因为浮动可以改变元素标签默认的排列。
作用：早期：图文环绕，现在：网页布局。
代码：float
基础语法：选择器{float：属性值；}
（float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及到包含块或者触及到另一个浮动框的边框）
属性值：
| none | 不浮动 |
| left | 左浮动 |
| right | 右浮动 |
| inline-start | 表明元素必须浮动在其所在块容器的开始一侧，在Itr脚本中是左侧，在rtl脚步是右侧 |
| inline-end | 表明元素必须浮动在其所在块容器的结束一侧，在Itr脚本中是右侧，在rtl脚步是左侧 |
浮动特点：
1，浮动元素会脱离标准流；
2，浮动元素会在一行内显示，并沿着元素顶部对齐；
3，浮动元素会具有行内块元素特性。
清除浮动
含义：清除浮动带来的影响。
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素。
方法：
（1）：直接设置父元素高度
特点：
优点：简单粗暴，方便。
缺点：有些布局中不能固定父元素高度。如：新闻列表
（2）额外标签法
操作：1，在父元素内容的最后面添加一个块级元素。2，给添加的块级元素设置clear：both。
特点：
缺点：会在页面中添加额外的标签，让HTML结构变得复杂。
总结
本篇主要记载盒子模型相关概念和CSS浮动，其中包括盒子模型：相关概念，内容宽度和高度，边框，内边距，外边距；CSS浮动：结构伪类选择器，伪元素，标准流，浮动，清除浮动。
本篇承接上篇，读者可以点进作者的主页看第一篇的学习笔记。若对前端不是很了解的读者可以去作者主页面阅读5篇HTML基础知识点笔记，更易于初学者入门。
如果此篇有什么疑问可以私信询问我，笔者回消息很快的。如果此篇对你有所帮助，恳请您给这篇学习笔记点个赞，将此篇分享给更多的人。
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
