前端开发：CSS相关的核心知识点
置顶
三掌柜666
已于 2022-10-11 01:20:38 修改
220
收藏 2
文章标签： css html 前端
版权
前言
在前端开发过程中，有三驾马车组成：JS、CSS、HTML，JS负责页面交互，CSS负责页面样式，HTML负责页面结构，这三大块也是在实际开发中必备内容，关于三者所起到的作用不用说读者就知道。本文想要分享的是关于CSS相关的内容，尤其是在实际开发中比较常用且重要的知识点，总结分享一下，方便后期查阅使用。
一、CSS的优先级、继承和层叠
CSS的三大特性：优先级、继承和层叠。
1、CSS的优先级
CSS的优先级，由大到小的顺序以此为：行内样式>ID选择器>类选择器>标签选择器。在实际开发中，本着就近原则。
2、CSS继承
CSS继承的原则：
1⃣️父元素的样式会在子元素中生效，但如果子元素中定义了相同的样式，那么就会遵循就近原则，以子元素设定的样式为准；
2⃣️子元素设置的样式不会对父元素的样式产生影响，但是父元素的样式会对子元素样式产生影响。
3、层叠
CSS层叠的特性：
1⃣️给同一个元素设置不同的样式：这时样式会层叠叠加 ，且共同作用在元素上；
2⃣️给同一个元素设置相同的样式：这时样式会层叠覆盖 ，写在最后的样式会生效在元素上；
3⃣️当设置的样式发生冲突，只有当前选择器优先级相同的时候，才能通过层叠来判断。
二、Display
在实际开发中，关于display的使用是非常常见的，比如常用的两个div并排放的时候，每一个div都会独占一行，怎么才能设置两个div不独占一行并行呢？这就需要通过display属性，可以随意的控制元素在页面的显示方式。上述问题也可以通过flex和grid解决，但是本文是主要讲解display的属性，所以这里只讲解display属性，其他的方式这里不再赘述。
1 、显示块
块元素默认占用100%的可用空间，也就是沾满整行，且不允许任何元素放置在同一行，即便减小元素宽度，元素大小也会随着减小，但仍不会允许其他元素在它旁边放置。一般情况下， HTML 元素默认的就是块元素。
2 、显示内联块
在display中，inline-block元素允许将其他非块元素放置在它们旁边，且只有在没有足够空间留给其他元素的时候，才会将其他元素推到下一行显示。
3、 显示内联
在display中，内联元素类似inline-block，因为它们允许将其他元素放在旁边，但是内联元素的尺寸大小（这里指的是元素的宽度和高度）不能更改，因为尺寸大小是由它们的内容（这里指的是文本和填充）决定的。
注意：可以通过使用<br>元素在 inline或者inline-block 元素之后进行换行。
三、盒子模型
盒子模型，“盒子”基本上指的是 HTML 元素的构建块，主要由四个主要块组成：边距（margin)、边框(border)、填充(padding)和内容(content)。
1、填充padding
padding的四个值：
padding-top
padding-right
padding-bottom
padding-left
padding的取值：
当设定一个值：四个内边距值都是该值。
当设定两个值：按照上/下、右/左取值。
当设定三个值：按照上、右/左、下取值。
当设定四个值：按照上、右、下、左取值。（以顺时针来）
2、边框border
边框的四个值：
border-top
border-right
border-bottom
border-left
边框的特征：
border-style：边框样式
border-width：边框宽度
border-color：边框颜色
边框的方向和特征：
border-top-style
border-top-width
border-top-color
3、边距margin
margin的四个值：
margin-top
margin-right
margin-bottom
marginleft
margin的取值：
当设定一个值：四个方向的边距全部是该值；
当设定两个值：上/下、右/左；
当设定三个值：上、右/左、下；
当设定四个值：上、右、下、左。（以顺时针来）
4 、内容content
内容content，基本上指的是计算完padding和border之后剩下的空间，主要是文本或图片或子 HTML元素开始出现在所选元素中的位置。
四、定位
在实际开发中，关于定位的使用是非常常见的，它允许控制元素的位置，各种位置设置都可以控制。控制元素位置的主要有四个关键字：static、relative、absolute、fixed。
1 、static
默认情况下，所有的HTML 元素都是 position: static。这就意味着不能使用 top、left、right、bottom 属性来移动元素，但是仍然可以使用 margin、flexbox 等来移动元素位置。只是在某些情况下，只想把元素稍微移动到，没有在它周围移动元素，这就是使用 position: relative;的原因。
2 、relative
relative，即相对位置，指的是该元素将相对于其原始位置放置，但是与边距不同，不会移动它周围的任何其他元素。通过使用 relative，可以使用 top、left、right 和 bottom 属性来重新定位元素。
3 、absolute
absolute，即绝对位置，相对于最近的非位置定位所选元素。一般只在创建需要浮动在其他元素之上的东西（例如弹出或关闭按钮）时才使用此属性。
4、 fixed
fixed，即位置固定，它和absolute 类似，它使元素浮动在其他元素之上。但是，它始终是相对于正文放置的，即便滚动页面，它也会保持在原来的位置。
五、z-index
z-index，即元素层级，在实际开发中涉及到元素重叠放置的时候会用到该属性。但是 z-index 仅适用于兄弟元素，如果该兄弟元素的 z-index 高于父元素，则子元素不能显示在其父兄弟元素的顶部（上部）。
注意：给元素添加z-index的属性值越大，层级越高，越在层级最上面。
六、浮动
在实际开发中，关于浮动的使用也是非常普遍的，比如图文环绕的业务需求，水平布局等等。
1、浮动属性
float
2、浮动的值
左浮动： float: left;
右浮动： float: right;
3、浮动的特征
浮动元素会脱离标准流，在标准流中不占位置；
浮动元素比标准流高半个级别，可以覆盖标准流中的元素；
浮动元素会受到上面块级元素边界的影响；
一行可以显示多个元素；
可以设置元素的宽高；
4、注意
1⃣️浮动元素不能通过父元素设置text-align:center或自身设置margin: 0 auto来让浮动元素自身水平居中。
2⃣️子元素设置浮动，这时子元素脱离标准流无法撑开父元素，会影响到页面其他元素的布局。
七、装饰
一般是设置元素的细节处理，如设置文字对齐，边框圆角等等。
1、设置圆角边框
设置边框圆角，使用的属性是border-radius，设置的值是百分比或者像素值。
2、设置文字对齐
设置文字对齐，使用的属性是vertical-align，属性值如下表所示：
3、隐藏元素
元素隐藏一般有两种方式：visibility: hidden;和display: none; 。
二者区别：visibility: hidden;隐藏元素本身，并且在当前页面中占留位置。display: none;隐藏元素本身，当前页面中不占留位置。
4、透明度设置
设置元素显示的透明度，是通过属性opacity来设置，opacity的值为：0～1之间，0表示完全透明，1表示完全不透明。
5、overflow
overflow是控制溢出部分的显示效果，具体设置的属性如下表所示：
经典设置：overflow: hidden;
最后
通过本文关于CSS相关的核心知识点的详细介绍，如果认真阅读并且实践示例，应该会很好的掌握这些知识点，尤其是属性选择器的语法模块，掌握之后可以事半功倍，非常方便使用，是一篇值得阅读的文章。欢迎关注，一起交流，共同进步。
————————————————
版权声明：本文为CSDN博主「三掌柜666」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/CC1991_/article/details/127127910