一、组合选择器
1.群组选择器
2.子代选择器
3.后代选择器
4.相邻选择器
5.兄弟选择器
6.交集选择器
7.组合选择器的优先级
二、属性选择器
三、盒模型
1.盒模型概念
2.盒模型成员介绍
四、边界圆角
1.单角设置
2.整体赋值
五、常用标签
1.超链接标签a
2.图片标签img
3.列表标签list
六、伪类选择器
1.a标签的四大伪类
2.内容伪类
3.索引伪类
4.取反伪类
七、盒模型布局
1.做页面必备reset操作
2.盒模型布局基本介绍
3.display：显示方式
4.兄弟坑
5.父子坑
6.解决方案
一、组合选择器
1.群组选择器
可以将任意多个选择器分组到一起，用逗号分隔。
div,.s,section{
color:red;
}
2.子代选择器
如果只希望影响到某个标签下的第一级标签，可以用子代选择器。
x > y。只会影响到x标签下的y标签，不会影响到x标签下的z标签里的y标签。
div>strong{
color:red;
}
3.后代选择器
又称包含选择器。只要是在这个标签里的某种标签都会被影响
x 空格 y。x标签下所有的y标签
div a {
text-decoration: none;
}
4.相邻选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
x + y。x标签左右的y标签
span+section{
background-color:pink;
}
5.兄弟选择器
x ~ y。x标签附近的所有的y标签。兄弟选择器包括相邻选择器。
span~section{
background-color:brown;
}
6.交集选择器
相交的部分就是要设置属性值的标签
xy。即有x又有y
i.s{ color: yellow; } <i class='s'>2333</i>
7.组合选择器的优先级
同目录结构下
子代与后代优先级相投。相邻与兄弟优先级相同。
最终的样式采用逻辑后的样式根据选择器权值进行比较
不同目录结构下
根据选择器权值进行比较
权值为标签权重之和
权重： *:1
div:10
class:100
id:1000
!important:10000
权值比较时，关心的是值的大小，不关心位置和具体选择器名
权值相同时，靠位置决定
id永远比class大，class永远比标签大
控制的是同一目标才具有可比性
二、属性选择器
属性选择器权重与class选择器一样
有属性class的所有标签
[class]{
color: orange;
}
有属性class且值为d2的所有标签
[class='d2']{
color: pink;
}
div且class='d2' ，权重增加
div[class='d2']{
color: blue;
}
属性以什么开头：^=
[class ^='he']{
color: yellow;
}
属性以什么结尾：$=
[class $='rd']{
color: tan;
}
属性模糊匹配：*=
[class^='233']{
color: cyan;
}
三、盒模型
1.盒模型概念
- 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
- 侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
- 盒模型组成：margin + border + padding + content
2.盒模型成员介绍
content
- 通过设置width与height来规定content
- 块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
- 内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定
border
- border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
- border成员：border-left、border-right、border-top、border-bottom
- border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
- border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
- border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style
| 风格 | 解释 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点状线 |
| double | 双实线 |
| groove | 槽状线 |
| ridge | 脊线 |
| inset | 内嵌效果线 |
| outset | 外凸效果线 |
padding
- padding成员：padding-left、padding-right、padding-top、padding-bottom
- padding整体设置
| 值得个数 | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
margin
- margin成员：margin-left、margin-right、margin-top、margin-bottom
- margin整体设置
| 赋值个数 | 方位 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 | 左右 |
| 3 | 上 | 左右 | 下 |
| 4 | 上 | 右 | 下 | 左 |
四、边界圆角
1.单角设置
border-top-left-radius
一个固定值:表示横纵
border-top-left-radius: 100px;
两个固定值:表示横与纵
border-top-left-radius: 100px,50px;
百分比赋值
border-top-left-radius: 100%;
2.整体赋值
border-radius
不分方位
左上为第一个角,顺时针,不足找对角
border-radius: 30px;
区分横纵
1.控制横向/控制纵向
2.横向又可以分为1,2,3,4个值;纵向亦然
border-radius: 10px 100px 50px /50px;
左上横10 右上横100 右下横50 左下横100/纵向全为50
五、常用标签
1.超链接标签a
语法
<a href="链接地址" title='鼠标悬浮的文本提示' target='目标位置'></a>
注：target:_self 当前页面打开 | _blank 新开空白标签为来打开目标网页
基本使用
<a href="https://www.baidu.com">百度</a>
注：如果是在本地的链接。当前目录./ 上一级目录..
a标签默认属性的清除
a {
color: #333;
text-decoration: none;
outline: 0
}
锚点
通过锚点名与#锚点名建起关联
name='tag'|href='#tag'
前往底部
<a href="#tag">前往底部</a>
设置一个锚点
<div class="bottom"> <a name="tag">底部</a> </div>
2.图片标签img
语法
<img src="图片地址" alt="加载错误提示文字" title="鼠标悬浮的文本提示">
3.列表标签list
reset操作
<style> ol,ul{ margin: 0; padding:0; list-style: none; } </style>
有序列表
<ol> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol>
无序列表
<ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul>
六、伪类选择器
1.a标签的四大伪类
- :link 初始状态
- :hover 鼠标悬停
- :active 活动状态
- :visited 访问过后的状态
注：鼠标样式
{
cursor: pointer | wait | move;
}
2.内容伪类
- :before：内容之前
- :after：内容之后
.txt:before{
content: '我是前缀```'
}
.txt:after{
content: '```我是后缀'
}
3.索引伪类
- :nth-child(n)：位置优先，再匹配类型。找到所有结构下的第N个标签,如果刚好是所选类型,那么匹配成功。
- :nth-of-type(n)：类型优先，再匹配位置。先将页面中的所有的所选类型找出,在匹配那些在自己结构层次下的第N个。
注：位置从1开始
4.取反伪类
- :not(selector)：对selector进行取反
七、盒模型布局
1.做页面必备reset操作
*{
margin: 0
}
2.盒模型布局基本介绍
-
布局方位：margin-left、margin-right、margin-top、margin-bottom
-
影响自身布局：margin-left、margin-top
-
影响兄弟布局：margin-right、margin-bottom
margin-bottom影响上下兄弟,尽量别对margin-right进行设置
margin-right影响上下兄弟,尽量别对margin-bottom进行设置
3.display：显示方式
- 块:block
- 内联:inline
- 内联块:inline-block
4.兄弟坑
<!-- 坑1 --> <section class="s1"></section> <section class="s2"></section>
盒模型布局的坑只出现在和margin-top相关的地方
.s1,.s2{
100px;
height: 100px;
background-color: pink;
}
和左右不一样,上下top会重叠取大值
.s1{
margin-bottom: 20px;
}
.s2{
margin-top: 20px;
}
5.父子坑
<!-- 坑2 --> <div class="sup"> <div class="sub"></div> </div>
.sup{
200px;
height: 200px;
background-color:cyan;
}
.sub{
100px;
height: 100px;
background-color:orange;
}
父子top重叠,取大值
.sup{
margin-top: 50px;
}
.sub{
margin-left: 50px;
/*margin-top:100px;*/
}
6.解决方案
1.将父级固定
.sup{
/border-top: 1px solid black;/
/border-top: 1px solid transparent;/
/保证显示区域不变200200/
/height: 199px/
}
2.通过padding
.sup{
padding-top:50px;
height: 150px;
}