本文详细介绍了CSS中的选择器类型，如后代选择器、子代选择器、并集选择器等，并探讨了背景属性，包括颜色、图片、平铺、位置等。深入解析了CSS的三大特性：层叠性、继承性和优先级。此外，讲解了盒子模型，包括边框、内边距、外边距以及浮动和定位布局。最后，提到了CSS3的新特性，如圆角边框、盒子阴影和三种布局方式。内容涵盖了CSS的基本概念和高级用法，是理解CSS布局和样式的宝贵资料。
目录
一、复合选择器
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只能选亲儿子 | 较少 | 符号是大于 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号，.nav, a |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{}和a:hover{} |
| :focus 选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | 记住input:focus用法 |
二、CSS背景
1.背景颜色background-color
background-color: transparent;
2.背景图片background-image
background-image: url(picture.jpg);
3.背景平铺background-repeat
background-repeat: repeat,no-repeat,repeat-x,repeat-y;
4.背景位置background-position
background-position: x y;
| 参数值 | 说明 |
|---|---|
| length | 百分数 / 由浮点数字和单位字符组成的长度值 |
| position | top / center / bottom / left / center / right 方位名词 |
5.背景图像固定background-attachment
background-attachment: scroll,fixed;
| 参数 | 作用 |
|---|---|
| scroll | 背景图像随着对象内容滚动 |
| fixed | 背景图像固定 |
6.背景复合属性background
一般顺序如下：
background: color url() repeat position attuchment;
7.背景色半透明
CSS3中用rgb中的“a”的参数来表示透明度
background: rgba(0, 0, 0, 0.3);
注：alpha取值范围为0~1.
三、CSS的三大特性
CSS 有三个非常重要的特性：层叠性、继承性、优先级。
1.层叠性
相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
- 样式冲突：遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
- 样式不冲突，不会层叠
2.继承性
CSS 中子标签会继承父标签的某些样式，如文本颜色和字号。
- 恰当使用继承可以简化代码，降低 CSS 的复杂性
- 子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及 color 属性）
行高的继承性：
body {
font: 12px/1.5 Microsoft Yahei;
}- 行高可以跟单位也可以不跟
- 如果子元素没有设置行高，则会继承父元素的行高为 1.5
- 此时子元素的行高是：当前子元素的文字大小*1.5
- body 行高 1.5 这样写法最大优势就是里面的子元素可以根据文字大小自动调整行高
3.优先级
3.1 优先级
比较权重
当一个元素指定多个选择器时，就会有有优先级的产生。
| 选择器 | 选择器权重 |
|---|---|
继承或者* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID 选择器 | 0,1,0,0 |
行内样式 style="" | 1,0,0,0 |
!important | ∞ 无穷大 |
p {
color: pink !importent;
}注意：
1.继承的权重是0，即使加了important权重还是0
2.a 链接默认指定了一个样式，蓝色，下划线，他不会去继承父级样式
3.2 复合选择器权重的叠加
权重可以叠加，需要计算权重，但是没有进位。
ol li {}
(0,0,0,1)+(0,0,0,1)=(0,0,0,2)
.class ul li {}
(0,0,1,0)+(0,0,0,1)+(0,0,0,1)=(0,0,1,2)
a:hover {}
(0,0,1,0)+(0,0,0,1)=(0,0,1,1)
四、盒子模型
1.网页布局过程
- 准备好网页相关元素，基本都是盒子box
- 利用css设计盒子样式，然后摆放到相应的位置
- 往盒子里面装内容
本质就是利用CSS摆盒子
2.盒子模型组成
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，包括：边框、外边距、内边距和实际内容。
2.1 边框border
border: width, style, color;
| 属性 | 属性值 | 作用 |
| width | 5px | 边框的粗细，单位px |
| style | solid, dashed, dotted | 边框的样式 |
| color | pink | 边框的颜色 |
可以只定义一边或多边的边框
border-top: width, style, color;
2.11 相邻表格边框绘制方式border-collapse
border-collapse: collapse;
表示相邻边框合并在一起
2.2 内边距padding
边框与内容之间的距离
padding: 20px;
三个值分别代表的是上 左右 下
四个值分别代表的是上 右 下 左（顺时针）
注意：
- border和padding和margin的值会撑大盒子的宽度和高度；
- 当盒子本身没有写出width/hight的值时，则此时padding不会撑开盒子的大小；
2.3 外边距margin
2.3.1块级盒子水平居中
margin: 0 auto;
注意：
- 盒子必须指定了宽度width
- 把左右外边距设置为auto
行内块元素或行内元素需要居中对齐的时候给其父元素加text-align: center就可以了
2.3.2 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案
- 为父元素定义上边框
- 为父元素定义上内边距
- 为父元素添加
overflow:hidden
2.3.3 清除内外边距
网页元素很多都带有默认内外边距，而且不同浏览器默认的也不一致，因此在布局前，要先清除网页元素的内外边距。
语法
* {
margin: 0;
padding: 0;
}注意：
为了照顾兼容性，行内元素只写左右内外边距，不写上下内外边距
五、圆角边框border-radius（CSS3）
border-radius: length;
技巧：让一个正方形 变成圆圈把length设为高度的一半
六、盒子阴影border-shadow(CSS3)
border-shadow: offset-x offset-y [blur] [spread] [color] [inset]
| 值 | 描述 |
|---|---|
| offset-x | 阴影的水平偏移量。正数向右偏移，负数向左偏移。 |
| offset-y | 阴影的垂直偏移量。正数向下偏移，负数向上偏移。 |
| blur | 可选。阴影模糊距离，不能取负数。(虚实) |
| spread | 可选。阴影大小 |
| color | 可选。阴影的颜色 |
| inset | 可选。表示添加内阴影，默认为外阴影 |
七、三大布局方式
1.标准流（文档流）
- 元素以自身的默认顺序依次排列
- 块级元素独占一行，从上到下依次排列（常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table）
- 行内元素从左到右依次排列，碰到父级元素的边缘自动换行（常用元素：span、a、i、em等）
2.浮动float
2.1特性
- 脱离标准流的控制，移动到指定位置，不保留原先的位置（脱标）
- 如果都设置了浮动，则会在顶端一行显示，一行内放不下时会另起一行
- 添加浮动后，元素具有行内块相似特性（可设置宽高，一行内显示，内容可撑起宽高）但是元素之间没有空白缝隙
- 浮动不会压住文字，因为最初用浮动的目的是为了做文字环绕的
2.2浮动布局的两个注意点
- 浮动通常搭配标准流的父级来布局（先用标准流的父元素排列上下位置，再用浮动的内部子元素排列左右位置）
- 一个元素浮动了，理论上其他兄弟元素也要添加浮动（浮动的元素只会影响其位置后面的标准流，不会影响前面的标准流）
2.3清除浮动
有的盒子不方便给高度，就会想要用子盒子撑开高度，但浮动的盒子不占有高度，那么父盒子的高度就变为0，会影响下面的标准流
a.额外标签法（隔墙法）<div style=”clear:both”></div>
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
b.父级添加overflow属性
可以给父级添加： overflow: hidden| auto| scroll; 都可以实现。
c.父级添加伪类元素after
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /* IE6、7 专有 */
}
d.父级添加双伪类元素
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
3.定位position
定位=定位模式 + 边偏移
3.1定位模式（盒子在文档中如何摆放）
| 值 | 语义 | 特性 |
|---|---|---|
static | 「静态」定位 | 相当于标准流，无边偏移 |
relative | 「相对」定位 | 不脱标，参照点：以自己原来的位置；（给绝对定位当爹的，子绝父相） |
absolute | 「绝对」定位 | 脱标，参照点：有定位的祖先元素，优先级由近到外，直到以浏览器为参照点 |
fixed | 「固定」定位 | 脱标，参照点：以浏览器的可视窗口；与父元素无关，不随滚动而滚动 |
扩展：
a.绝对定位的盒子紧贴版心边缘
- left: 50%;让盒子的左侧移动到浏览器的水平中心位置；
- margin-right: 600px;让盒子向右移动版心宽度的一半。
b.绝对定位的盒子居中
- left: 50%;让盒子的左侧移动到浏览器的水平中心位置；
- margin-left: -100px;让盒子向左移动自身位置的一半。
3.2边偏移
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
top | top: 80px | 「顶端」偏移量，定义元素相对于其父元素「上边线的距离」。 |
bottom | bottom: 80px | 「底部」偏移量，定义元素相对于其父元素「下边线的距离」。 |
left | left: 80px | 「左侧」偏移量，定义元素相对于其父元素「左边线的距离」。 |
right | right: 80px | 「右侧」偏移量，定义元素相对于其父元素「右边线的距离」。 |
注意：
如果一个盒子既写了左又写了右，则会执行左
如果一个盒子既写了上又写了下，则会执行上
布局总结：
浮动、绝对定位、固定定位都会脱标，会转换为类似行内块的特性，都会压住下面的标准流，但浮动不会压住文字，因为浮动最初的用法是做文字环绕的。
八、CSS书写顺序
-
布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
-
自身属性：width / height / margin / padding / border / background
-
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
-
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
九、定位的叠放次序z-index
特性：
-
属性值：正整数、负整数或 0，默认值是 auto，数值越大，盒子越靠上；
-
如果属性值相同，则按照书写顺序，后来居上；
-
数字后面不能加单位
-
z-index只能用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
十、显示隐藏元素
| 属性 | 区别 | 用途 |
|---|---|---|
| display | 隐藏对象，不保留位置 | 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 |
| visibility | 隐藏对象，保留位置 | 使用较少 |
| overflow | 只是隐藏超出大小的部分 | 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围 |
| 属性值 | 描述 | |
| visible | 不剪切内容也不添加滚动条 | |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 | |
| scroll | 不管超出内容否，总是显示滚动条 | |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
扫一扫
735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
