【Web前端】一文带你吃透CSS(中篇)
前端学习路线总结主要包括以下内容：
基础入门
学习HTML、CSS和JavaScript等前端基础知识，并掌握VUE、REACT和Angular等三大主流框架的基本使用方法。
深入学习
- 小程序开发：掌握Node.js与Python的使用方法。
- 前端工程化：了解jQuery的高级功能及其在实际项目中的应用。
- CSS进阶：深入学习盒子模型（Box Model）、边框（Border）、填充（Padding）、外边距（Margin）以及内边距（Padding）等概念。
- 流动与定位：理解float属性及其作用方式，以及position属性的不同取值对元素布局的影响。
- 框装与轮廓：掌握CSS盒模型（Box Model）的详细结构及应用。
- 布局与溢出：了解overflow属性的作用及其不同取值对内容显示的影响。
- 粘性定位与滚动：掌握sticky定位及其在页面中的应用效果。
摘要涵盖了前端开发的核心知识点和实践技巧。
前端学习路线小总结 ：
- 入门级知识：
- HTML / CSS / JavaScript
- 主流前端框架 trio：
- VUE, React 和 Angular
- 深入学习：
- 小程序开发中采用 Node.js 技术 stack 加强功能实现
继续学习CSS吧！
-
一.CSS盒子模型(Box Model)
-
- 1.CSS 盒子模型
- 2.元素的宽度和高度
-
二.CSS边框(Border)
-
- 1.边框样式
- 2.边框宽度
- 3.边框颜色
- 4.单独设置各边
- 5.属性简写
-
第三部分：CSS框架（Outline）
-
第四部分：CSS margin属性
-
- CSS margin属性的应用
-
- CSS margin属性的简化表示方法
-
-
五.CSS填充(padding)
-
- 1.CSS填充的使用
- 2.CSS填充属性简写
-
六.CSS分组和嵌套选择器
-
- 1.分组选择器
- 2.嵌套选择器
-
-
七.CSS尺寸管理机制(Dimension)
- 八.CSS显示与可见性控制(Display Visibility)
-
1. 隐藏元素 -
2. 调整元素的可见状态
九.CSS的位置机制（Position）
- 十. CSS中的溢出管理
- 十一. CSS中的浮动效果
- 如何实现元素的浮动效果？
- 在相邻容器内如何处理浮动元素？
- 如何清除容器中的浮动效果？
一.CSS盒子模型(Box Model)
首先，在这里所有HTML元素可以看作盒子，下面一起来看看。
1.CSS 盒子模型
CSS语言中的盒子模型主要用于布局和排版。其本质是一个包裹并组织周围HTML元素的结构；它包含以下几部分：边距；边框；填充；以及实际内容。
说明
- 外边距 - 位于边框外部并透明的部分。
- 内边距环绕的内容框架。
- 内部填充物 - 包围在内容周围的空白区域。
- 盒子的内容 - 显示文本与图像。
2.元素的宽度和高度
完整大小的元素，必须包括宽度和高度，还必须包含内边距，边框和外边距。
div {
width: 300px;
border: 25px solid blue;
padding: 25px;
margin: 25px;
}
总宽度等于宽度加上左侧填充值、右侧填充值、左侧边界、右侧边界、左侧间距和右侧间距之和；
整体高度等于高度加上顶端填充值、底端填充值、顶端边界、底端边界、顶端间距和底端间距之和。
二.CSS边框(Border)
可以利用边框属性指定元素边框的样式和颜色。
1.边框样式
border-style属性用来定义边框的样式，例如：
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
2.边框宽度
border-width 属性用来指定边框宽度，例如：
<style>
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
为边框指定宽度有两种方法：
明确长度参数
“border-width” 属性必须和border-style一起使用，否则不起作用！
3.边框颜色
border-color字段用于设置边框色。
与HTML类似地设置颜色的方法是：如：
<style>
p.one
{
border-style:solid;
}
p.two
{
border-style:solid;
border-color:red;
}
</style>
border-color属性必须和border-style一起使用，否则不起作用。
4.单独设置各边
在CSS中，可以把边框各边设置成不同的样式和颜色，例如：
<style>
p
{
border-top-style:solid;
border-top-color:red ;
border-right-style:dotted;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
5.属性简写
为了使用方便可以在border一个属性中设置边框，例如：
border:5px solid red;三.CSS轮廓(outline)
轮廊（outline）是一条环绕在元素周围的线。它位于边框边缘的外围位置，并具有突出显示元素的作用。轮廊属性决定了元素轮廓的样式、颜色和宽度。例如： outline: 0; outline: border-left 2px solid #007bff; outline: 2px solid #007bff; outline: none; 如上所示的是轮廊属性的不同取值及其对应的效果。轮廊（outline）是一种用于突出显示元素的重要CSS样式机制。
常用的outline属性如下：
- 定义了轮廓的颜色设定。
- 定义了轮廓样式的选择。
- 定义了轮廓尺寸的参数。
<style>
p{
border:1px solid black;
outline:red solid 3px;
}
</style>
四.CSS外边距(margin)
1.CSS外边距的使用
margin外边距属性定义了元素周围的空间，例如：
p.margin
{
margin-top:200px;
margin-bottom:200px;
margin-right:50px;
margin-left:50px;
}外边框属性可能的值如下所示：
auto：指定由浏览器自动计算的外边距length：指定一个固定的长度作为外边距%：定义一个百分比值作为外边距（通常根据字体宽度进行调整）
2.CSS外边距属性简写
为了使用方便，可以使用一个margin属性指定所有的外边距。
margin属性可以有一到四个值，定义的内容稍有不同：
margin:25px 50px 30px 60px;- 上边距为25
- 右边距为50
- 下边距为30
- 左边距为60
margin:25px 50px 30px- 上边距为25
- 左右边距为50
- 下边距为30
margin:25px 50px- 上下边距为25
- 左右边距为50
margin:25px- 四个边距都是25
五.CSS填充(padding)
1.CSS填充的使用
CSS padding 属性旨在确定元素与其内容之间的填充空间。该属性具体指围绕在元素内容四周的内侧间隙，在实际应用中可灵活调整布局效果。
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}填充属性的可能取值为：
- 长度指定为固定长度：
- 百分比指定为百分比比例：
2.CSS填充属性简写
为了使用方便，可以在一个padding属性中指定所有的填充值。
padding属性可以有一到四个值，定义内容稍有不同：
padding:25px 50px 75px 100px;- 上填充为25
- 右填充为50
- 下填充为75
- 左填充为100
padding:25px 50px 75px- 上填充为25
- 左右填充为50
- 下填充为75
padding:25px 50px- 上下填充为25
- 左右填充50
padding:25px- 四边的填充都为25
六.CSS分组和嵌套选择器
1.分组选择器
在样式表中存在多个相同样式的元素。通过分组选择器能够优化代码长度！例如：
<style>
h1,h2
{
color:red;
}
</style>使用效果和以下代码相同：
<style>
h1
{
color:red;
}
h2
{
color:red;
}
</style>2.嵌套选择器
使用于选择器内部的选择器样式！例如：
通过
p{ ：}语法定义，默认会对所有的p元素应用样式。
使用：.marked{ ：}可以选择所有class属性设为"marked"的元素并应用相应样式。
. marked 和p结合使用的语法：.marked p{ ：}会针对属于class="marked"的所有p元素进行样式应用。 基于复合选择器的规则：p.marked{ ：}会选择属于class="marked"的所有p子元素并应用相应的样式的定义。
七.CSS尺寸(Dimension)
CSS 尺寸 (Dimension) 属性用来控制元素的高度和宽度。
CSS 尺寸 (Dimension)属性：
| 属性 | 功能 |
|---|---|
| height | 设置元素的高度。 |
| line-height | 设置行高。 |
| max-height | 设置元素的最大高度。 |
| max-width | 设置元素的最大宽度。 |
| min-height | 设置元素的最小高度。 |
| min-width | 设置元素的最小宽度。 |
| width | 设置元素的宽度。 |
八.CSS显示与可见性(Display Visibility)
display 属性 用于 决定 元素 的 显示 方式 ，它 指 定 如何 展示 一个 元素 ，而 visibility 属性 则 指 定 元素 的 可见 性 或 隐藏 性 。
1.隐藏元素
主要采用display:none或visibility:hidden的方法来实现元素隐藏功能，在当前应用环境中两者均被广泛使用。其中一种方法能够完全不占据任何空间的区域而不显示内容，另一种则虽然不可见但仍然会占用与显示状态相同的物理空间并影响整体布局安排。
2.改变元素的显示
块元素是一种类型，在网页布局中占据整个页面宽度，并且两端均为换行符。例如<h1>这类实例，则是直接呈现为居中显示的大型标题。
内联元素仅需基本宽度，并无需强行换行以提升阅读体验。如<span>等实例，则能够实现文字水平居中显示功能。
可以通过改变块级元素和内联元素，使元素有一定的特定布局。
span {display:block;}通过改变内联元素的属性使得显示为块级元素，前后带有换行符！
九.CSS定位(Position)
position 属性指定了元素的定位类型，position 属性的五个值：
- static
- relative
- fixed
- absolute
- sticky
1.static定位
其默认值通常为无定位状态，并且位于整个页面文档流中的自然位置。静态定位的元素不受方位指令的影响。
div.static {
position: static;
border: 3px solid red;
}2.fixed定位
元素的位置相对于浏览器窗口是固定位置。不会随着窗口滚动而移动。
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}3.relative定位
基于正常元素的位置，将该元素的位置进行调整时，其占用的空间保持不变。
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}4.absolute定位
绝对定位的元素的位置基于最近确定的父容器进行设置。当一个元素没有任何被指定为相对定位的父容器时，则该元素的位置将被视为相对于整个<html>文档。
h2
{
position:absolute;
left:100px;
top:150px;
}该定位的元素不占据空间，因为它与文档流无关，可以与其它元素重合。
5.sticky 定位
相关元素涉及到用户滚动操作的影响，在 position 属性设置为 relative 或 fixed 时实现转换。
div.sticky {
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
设置一个元素仅在特定方向（如top边缘）上应用固定偏移量时（即设置top、right、bottom或left四个属性中的一个），才会启用此固定位置功能（粘性定位）。如果未设置任何该方向上的固定偏移量，则该元素的行为将与使用相对定位实现的效果一致（即会按照相对定位的方式运行）。
6.重叠的元素
由于元素的定位不受文档流的影响, 因此它们能够覆盖页面上的其他元素. z-index属性则决定了一个特定元素在叠加层次中的位置, 它规定了哪些图形应当位于前、后方.
当两个定位元素发生重叠时，在未设置z-index属性的情况下，默认情况下会使得位于HTML文档前的元素被展示在最顶端位置。
十.CSS布局(Overflow)
CSS中的overflow属性用于管理内容超出容器框时的显示方式，在对应的区域添加滚动条。该属性仅应用于具有指定高度的块级元素。
div {
background-color: #eee;
width: 300px;
height: 50px;
border: 1px solid black;
overflow: visible;
}
#overflowTest {
background: #eee;
width: 500px;
height: 150px;
overflow: scroll;
border: 1px solid black;
}
overflow属性的所有值：
- visible:默认值。内容不会被修剪，会呈现在元素框之外。
- hidden:内容会被修剪，并且其余内容是不可见的。
- scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
- inherit:规定应该从父元素继承 overflow 属性的值。
十一.CSS浮动(Float)
CSS 的浮点属性（Float）会导至元素在水平方向上发生偏移，并引起其周边元素的位置发生变化。这种效果常见于图像布局场景中。
1.元素是怎么浮动？
元素除了水平方向的浮动外，在垂直方向上无法移动。
当一个浮动元素试图向某一侧移动时，在其外边缘接触包含框或相邻的浮动框边框之前会停止。
在某个浮动元素之前出现的其他元素不受其影响，在其之后出现的所有后续元素则会围绕它排列。
<style>
img
{
float:left;
}
</style>
2.彼此相邻的浮动元素
当几个浮动的元素放在一起，如果有空间的话，它们将彼此相邻。
左浮动：
.images
{
float:left;
width:200px;
height:200px;
margin:5px;
}
/*css的样式会优先于标签的属性。*/
右浮动：
.images
{
float:right;
width:200px;
height:200px;
margin:5px;
}
3.清除浮动
当一个元素发生移动后，其他元素会自动重新组织位置。为了防止这种情况发生，则可以通过设置 clear 属性来实现。该属性的作用是阻止任何浮动的 sibling 元素出现在其两侧。
没有使用clear属性的效果：
使用了clear属性的效果：
<style>
.images
{
float:left;
width:200px;
height:200px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>