本文详细探讨了CSS的三大特性——层叠性、继承性和优先级，解释了权重的叠加和优先级判断规则。接着，文章介绍了盒子模型，包括边框、内边距和外边距的详细内容，以及它们如何影响元素大小。此外，还讲解了浮动、定位的原理和应用，以及清除浮动的各种方法。最后，提到了元素的隐藏与显示方式，如display、visibility和overflow属性的使用。这是一篇适合前端初学者深入理解CSS布局的教程。
web前端剑法之css
??web前端剑法之css
地址
??CSS基础班笔记(一)
https://blog.csdn.net/Augenstern_QXL/article/details/115560532
??CSS基础班笔记(二)
https://blog.csdn.net/Augenstern_QXL/article/details/115560502
??CSS基础班笔记(三)
https://blog.csdn.net/Augenstern_QXL/article/details/115726577
??CSS进阶班笔记(四)
https://blog.csdn.net/Augenstern_QXL/article/details/119172527
??CSS进阶班笔记(五)
https://blog.csdn.net/Augenstern_QXL/article/details/120374974
目录总览
1.CSS三大特性??
1.1、层叠性??
- 相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。
- 层叠性主要解决样式冲突的问题
- 层叠性原则：
- 样式冲突，遵循的原则是就近原则
1.2、继承性??
- CSS中的继承：子标签会继承父标签里面的某些样式
- 如文本颜色和字号等
特殊： 行高的继承
body {
font:12px/1.5 Microsoft YaHei
}
- 1.5的意思：让里面所有的子元素的行高是当前文字大小的1.5倍
1.3、优先级??
– 当同一个元素指定多个选择器，就会有优先级的产生
<head>
<style>
div{
color:pink;
}
.text {
color:red;
}
</style>
</head>
<body>
<div class="text">你笑起来真好看</div>
</body>
- 选择器相同，则执行层叠性
- 选择器不同，则按权重
选择器
权重
继承或者 *
0，0，0，0
元素选择器（标签选择器）
0，0，0，1
类选择器，伪类选择器
0，0，1，0
ID选择器
0，1，0，0
行内样式style=""
1，0，0，0
！important重要的
无穷大
-
类选择器权重为10
-
伪类选择器权重为10
-
ID选择器权重为100
1.4、优先级注意点??
- 等级判断是从左到右，如果某一位数值相同，则判断下一位数值
- 继承的权重是0
- 权重可以叠加，但是永远不会有进位
1.5、权重的叠加??
-
权重叠加：如果是复合选择器，则会有权重的叠加，需要计算权重
div ul li----------> 0,0,0,3.nav ul li-------------->0,0,1,2a:hover---------------->0,0,1,1 /* 伪类选择器*/.nav a-------------------->0,0,1,1
2.盒子模型??
页面布局要学习三大核心
- 盒子模型
- 浮动
- 定位
盒子模型的组成：
border(边框)content(内容)padding(内边距)margin(外边距)
2.1边框border??
-
CSS 边框属性允许你指定一个元素边框的样式和颜色
-
边框由三部分组成：边框宽度（粗细） 边框样式 边框颜色
border : borde-width || border-style || border-color
属性
作用
border-width
定义边框粗细，单位是px
border-style
边框的样式
border-color
边框颜色
2.1.1、border-style??
边框样式 border-style可以设置如下值：
none:没有边框即忽略所有边框的宽度（默认值）solid:边框为单实线（最为常用的）dashed: 边框为虚线dotted: 边框为点线
边框简写：没有顺序
border : 1px soilid red;
边框分开写法：
/*只设定上边框，其余同理*/
border-top: 1px solid red;
2.1.2、border-collapse
-
border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框
-
border-coppapse表格的细线边框border-collapse : collapse;
-
表示相邻边框合并在一起
-
collapse 单词是合并的意思
2.1.3、边框会影响盒子实际大小??
边框会额外增加盒子的实际大小，因此我们有两种方案解决：
- 测量盒子大小的时候，不量边框
- 如果测量的时候包含了边框，则需要 width/height 减去边框宽度
2.2内边距padding??
padding 属性用于设置内边距,即盒子边框与内容之间的距离
属性
作用
padding-left
左内边距
padding-right
右内边距
padding -top
上内边距
padding-bottom
下内边距
- padding属性(简写属性)可以有一到四个值
值的个数
表达意思
padding : 5px;
1个值，代表上下左右都有5像素内边距
padding :5px 10px;
2个值，代表上下内边距是5像素，左右内边距是10像素
最低0.47元/天 解锁文章
扫一扫
684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
