本文详细讲解了CSS中的布局技术，包括层叠性、继承性、优先级和权重计算，以及盒子模型。重点阐述了边框、内边距、外边距的使用，特别是边框合并和外边距塌陷的问题。此外，还介绍了浮动布局的原理、应用场景、浮动特性以及清除浮动的方法。最后，探讨了定位的几种模式，如静态、相对、绝对、固定定位，并讨论了定位与浮动的区别和相互配合。
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、权重的叠加
权重叠加：如果是复合选择器，则会有权重的叠加，需要计算权重
<head>
<style>
li {
color:green;
}
/* li 的权重是 0,0,0,1 /
ul li{
color :red;
}
/ 复合选择器权重叠加，ul li权重 0,0,0,1 + 0,0,0,1 =0,0,0,2 /
.nav li{
color:pink;
}
/ .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
<style>
</head>
<body>
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>
div ul li----------> 0,0,0,3
.nav ul li -------------->0,0,1,2
a:hover ---------------->0,0,1,1 /* 伪类选择器*/
.nav a-------------------->0,0,1,12.盒子模型
页面布局要学习三大核心
盒子模型
浮动
定位
盒子模型的组成：
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像素
padding: 5px 10px 20px; 3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素
padding :5px 10px 20px 30px 4个值，上是5像素，右是10像素，下20像素，左是30像素，顺时针
以上四种情况，我们实际开发都会遇到。
2.2.1、影响盒子大小
padding会影响盒子大小的情况
当我们给盒子指定 padding 值之后，发生了2件事情：
内容和边框有了距离，添加了内边距
padding影响了盒子实际大小
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
解决方案：
如果保证盒子跟效果图大小保持一致&#
最低0.47元/天 解锁文章
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
