第三周笔记-CSDN博客

本文链接：https://blog.csdn.net/My_nerously/article/details/127629730

第三周笔记

CSS选择器
- 标签选择器
- - 写法
  - 使用场景
- 群组选择器
- - 写法
- 通配选择器
- - 写法
  - 使用场景
- 层次选择器
- 属性选择器
- 伪类选择器
- - 写法:
  - 伪类
- 结构性伪类选择器
CSS样式继承
CSS优先级
- 相同样式优先级
- 内部样式与外部样式
- 单一样式优先级
- !important
- 标签+类与单类优先级
- 群组优先级
- 层次优先级
CSS盒子模型
- 组成
- content: 内容区域
- padding: 内边距(内填充)
- margin: 外边距(外填充)
- box-sizing
- margin叠加
- margin传递
- margin自适应居中
- 不设置content的现象
- 练习
标签分类
- 按类型
- 按内容
- 按显示
- - 替换元素
  - 非替换元素
显示框类型
- display
标签嵌套规范
溢出隐藏
- overflow
透明度与手势
- opacity
- rgba
- cursor
最大、最小宽高
CSS默认样式
CSS reset
- 简单的CSS reset:
float浮动
- 文档流
- float特性
- float取值
- float注意点
- 利用clear属性清除float浮动
- - 上下排列
  - 嵌套排列

CSS选择器

标签选择器

写法

css:div{}
html:

使用场景

1、去点某些标签的默认样式
2、复杂的选择器中,如层次选择器

群组选择器

可以通过逗号给多个不同的选择器添加统一的CSS样式，以达到代码的复用

写法

css:div,p,span{}

通配选择器

用于给所有的标签添加统一的CSS样式

写法

*{}
注意:尽量避免使用通配选择器

使用场景

去掉所有标签的默认样式

层次选择器

后代:M N
父子:M > N
兄弟:M ~ N
相邻:M + N

后代

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    ul li{border:1px red solid;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>

运行效果

效果分析：
代码中写入了一个无序列表和有序列表，当写入了层次选择器中的后代选择器ul li{border:1px red solid;}时，给无序列表的li标签添加了样式而没有给有序列表的li标签添加样式

父子

在上一个示例中会存在一个问题，我们为ul标签添加一个id属性，然后在其中的一个li标签中再嵌套一个ul标签，此时的运行结果就不太美观了
示例代码:

    <style>
    #list li{border:1px red solid;}
    </style>
</head>
<body>
    <ul id="list">
        <li>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>

运行效果

如果我们只想要最外层的ul标签拥有样式，而嵌套的ul标签没有样式，就需要用到父子选择器将上面的#list li{border:1px red solid;}改为#list > li{border:1px red solid;}此时就能达到预期的运行效果了

兄弟

兄弟选择器的写法为M ~ N {}，其运用场景是，要为M标签(不包括)下的所有N标签添加统一的样式
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div ~ h2{background: red;}
    </style>
</head>
<body>
    <h2>标题1</h2>
    <div>小块</div>
    <p>小段落</p>
    <h2>标题2</h2>
    <h2>标题3</h2>
    <h2>标题4</h2>
</body>
</html>

运行效果

相邻

相邻标签的写法为M + N {}，主要是用于选择与M标签(不包括)相邻的N标签，并为其添加样式，注意:不会选择M标签以上的N标签

属性选择器

属性选择器
M为标签，attr为属性
=:完全匹配
*=:部分匹配
^=:起始匹配
$=:结束匹配
[][][]:组合匹配

伪类选择器

CSS伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加

写法:

标签:伪类{}

伪类

:link 访问前的样式–><a>
:visited 访问后的样式–><a>
:hover 鼠标移入时的样式
:active 鼠标按下时的样式
:after 在元素后添加一段文本内容，且能使这段文本内容拥有单独的样式
写法:
标签:after{content:“文本内容”;样式}
:before 在元素前添加一段文本内容，且能使这段文本内容拥有单独的样式
写法:
标签:before{content:“文本内容”;样式}
:checker 用于input标签的选择框，被选中时显示的样式
:disabled 用于input标签的选择框，未被选中时显示的样式
:focus 用于input标签，被点击后显示的样式
注意:
1、link、visited只能给a标签加，hover和active可以给所有的标签加
2、如果四个伪类都生效，一定要注意顺序:L V H A
3、一般网站只这样去设置:a{} a:hover{}

结构性伪类选择器

:nth-of-type()、:nth-child() 对相同标签添加样式，括号中可以输入数字也可以输入含n的表达式，n的范围为零到无穷大用于对单个或者多个写入标签添加样式
:first-of-type、:first-child 对第一个写入的标签添加样式
:last-of-type、:last-child 对最后一个写入的标签添加样式
:only-of-type、:only-child 如果写入的标签是唯一的，就添加样式
type与child的区别
示例代码

    h2:nth-child(6){background: red;}
    h2:nth-of-type(2){background: blue;}
    </style>
</head>
<body>
    <h2>标题1</h2>
    <div>小块</div>
    <p>小段落</p>
    <h2>标题2</h2>
    <h2>标题3</h2>
    <h2>标题4</h2>
</body>
</html>

运行结果

如果使用type对标题2进行选择，只需要在括号里写入2，而在child的括号中写入6却选中了第四个h2标签，所以如果要使用child对标题2进行选择，则需要在括号里写入4

CSS样式继承

文字相关的样式可以被继承，布局相关的样式不能被继承
在html中，一般会使用标签之间的嵌套，当为外层的标签添加布局样式和文字样式时，此标签的内部标签会继承文字样式，而布局样式是默认不继承的，可以单独写入标签{样式:inherit;}来继承外层标签的布局样式

CSS优先级

相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况

内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高

单一样式优先级

style行间 > id > class > tag > * > 继承

!important

提升样式优先级，非规范模式，不建议使用(不能提升继承的优先级)
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #demo{color: blue;}
    </style>
</head>
<body>
    <div id="demo" style="color: red;">一个小块</div>
</body>
</html>

运行效果

这里由于style行间的优先级高于id选择器所以字体会显示红色，若想要字体显示为蓝色，又不想改变id选择器的位置，只能在blue后面加上空格并写入!important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #demo{color: blue !important;}
    </style>
</head>
<body>
    <div id="demo" style="color: red;">一个小块</div>
</body>
</html>

运行效果

标签+类与单类优先级

标签+类 > 单类

群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高

层次优先级

1、权重比较
style 权重 1000
id 权重 100
class 权重 10
tag 权重 1
ul li .box p input{} 权重: 1+1+10+1+1
.hello span #elem{} 权重: 10+1+100
2、约分比较
ul li .box p input{}
.hello span #elem{}
两者约掉相同等级的部分，剩余部分比较权重
li p input{} 权重: 1 + 1 + 1
#elem{} 权重: 100

CSS盒子模型

标准盒子模型

组成

content(物品)->padding(填充物)->border(包装盒)->margin(盒子与盒子之间的间距)

content: 内容区域

由width和height组成

padding: 内边距(内填充)

只写一个值: 30px(上下左右)
只写两个值: 30px 40px(上下、左右)
写四个值: 30px 40px 50px 60px(上、右、下、左)
单一样式只能写一个值:
padding-left
padding-right
padding-top
padding-bottom

margin: 外边距(外填充)

只写一个值: 30px(上下左右)
只写两个值: 30px 40px(上下、左右)
写四个值: 30px 40px 50px 60px(上、右、下、左)
单一样式只能写一个值:
margi-left
margin-right
margin-top
margin-bottom
注：
1、背景色填充到margin(不包括)以内的区域
2、文字在content区域添加
3、padding不能为负数，而margin可以为负数

box-sizing

box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值)|border-box
盒尺寸可以改变盒子模型的展示形态
默认值:content-box:width、height -> content
意思就是将输入的大小分给content部分
border-box:width、height -> content padding border
意思就是将输入的大小分给content、padding、border三个部分
使用场景:
1、不用再去计算content的大小
2、解决一些大小设置为100%的问题

margin叠加

问题描述:
当给两个盒子同时添加上下外边距的时候，就会出现叠加问题。这个问题，只在上下有，左右是没有叠加问题的。出现两个区域的margin同时存在的问题时，会取上下中值较大的作为叠加的值而不会进行累加
解决方案:
1、BFC规范
2、想办法只给一个元素添加间距

margin传递

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的
问题展示:
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{width: 200px;height: 200px;background: red;}
    #box2{width: 100px;height: 100px;background: blue;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

运行结果:

此时我们想给蓝色区域添加外边距，那么会在box2选择器中添加margin-top:100px;此时会将这个外边距传递给box1，导致达不到想要的效果

解决方案:
1、BFC规范
2、给父容器加边框
在示例中，只需要在box1选择器后面加上一个边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{width: 200px;height: 200px;background: red;border: 1px yellow solid;}
    #box2{width: 100px;height: 100px;background: blue;margin-top:100px;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

运行效果

此时就已经达到想要的效果了，只是这里设置的边框颜色不明显
3、margin换成padding
在示例中，只需要在box1选择器后面添加padding-top，然后再修改一下原来的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{width: 200px;height: 100px;background: red;padding-top: 100px;}
    #box2{width: 100px;height: 100px;background: blue;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

运行效果

margin自适应居中

左右居中是可以的，上下居中就不行
写法:
1、margin-left:auto;margin-right:auto;
2、margin: 0 auto;
3、margin:auto auto;

不设置content的现象

在进行嵌套时，如果内部与外部的样式不同，当内部不写入长或高时，会自动填满长或高达到外部的大小，此时无论是添加内填充还是边框，都不会导致内部的总大小超过外部的总大小而是等于外部的总大小
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{width: 200px;height: 300px;background: red;}
   #box2{height: 100px;background: blue;border-left: black solid 20px;padding-left: 50px;color: white;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">一个小块</div>
    </div>
</body>
</html>

运行效果

如果给box2选择器添加了width，那么内填充和左边框会溢出，导致内部的div块大于外部的div块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{width: 200px;height: 300px;background: red;}
    #box2{width: 200px;height: 100px;background: blue;border-left: black solid 20px;padding-left: 50px;color: white;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">一个小块</div>
    </div>
</body>
</html>

运行效果

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #box1{width: 400px;height: 400px;background: red;padding:30px;border: 10px chocolate solid;margin: 0 auto;}
    #box2{height:320px;background:  blue;border: 10px black dashed; padding: 30px;}
    #box3{height:240px;background: purple;border: 10px green solid;padding: 30px;}
    #box4{height:100px;background: purple;border: 10px gray dotted;padding: 60px;}
    #box5{height:80px;background: greenyellow;border: 10px gold solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

运行效果

这里对高度计算，是由每相邻两层当中的上一层决定的，上一层的高度等于下一层的高度加上两倍的边框像素再加上两倍的内填充像素

标签分类

按类型

block:块

div、p、ul、li、h
特性:
1、独占一行
2、支持所有样式
3、不写宽的时候，跟父元素的宽相同
4、所占区域为一个矩形

inline:内联

span、a、en、strong、img
特性:
1、挨在一起
2、部分样式不支持，例如width、height
margin、padding
3、不写宽的时候，宽度由内容决定
4、所占区域不一定为矩形
5、内联标签之间会有空隙，由换行引起
注意：布局一般用块标签，修饰一般用内联标签

inline-block:内联块

input、select
特点:
1、挨在一起，但是支持宽高
2、内联块标签之间会有空隙，由换行引起

按内容

相关关系
具体详情请见W3C
Flow:流内容
Metadata:元数据
Sectioning:分区
Heading:标题
Phrasing:措辞
Embedded:嵌入的
Interactive:互动的

按显示

替换元素

浏览器根据元素的标签和属性，来决定元素的具体显示内容
包含标签:
img、input

非替换元素

将内容直接告诉浏览器，将其显示出来
包含标签:
div、h、p…

显示框类型

display

display:inline;–>强转为内联类型
display:block;–>强转为块类型
display:inline-block;–>强转为内联块类型
display:none;–>浏览器中不显示
display:none;与visibility:hidden;的区别:
display:none;会让标签不占空间而visibility:hidden;仅仅只是让标签不显示，但仍然会占位置

标签嵌套规范

1、块标签可以嵌套内联标签
2、块标签不一定能嵌套块标签，绝大多数情况是可以嵌套的
特殊:p标签内不能嵌套div标签
3、内联标签不能嵌套块标签
特殊:a标签能嵌套div标签，a标签也不能嵌套a标签

溢出隐藏

overflow

visible:默认
hidden:隐藏溢出部分
scroll:通过滚动条隐藏溢出部分
auto:自适应滚动条(内容过长可滚动，内容过短不可滚动)
over-flow-x:针对x轴设置
over-flow-y:针对y轴设置

透明度与手势

opacity

opcity是一个CSS样式
0(透明)~1(不透明)
0.5(半透明)
注意：占空间，所有的子内容也会透明

rgba

rgba也是一个CSS样式相当于rgb颜色后方加入一个透明值
写法:
rgba(r,g,b,a)
rgb决定颜色，a决定透明度

cursor

default:默认
自定义鼠标样式
要实现自定义手势:
准备图片: .cur、.ico
写法:
cursor:url(地址),auto;

最大、最小宽高

min-width(最小宽度)、max-width(最大宽度)
min-height(最小高度)、max-height(最大高度)
注意：强化对百分比单位的理解
%单位：
换算–>以父容器的大小进行换算
一个容器要适应屏幕的高:容器加height:100%;body:100%;html:100%;

CSS默认样式

有些标签有默认样式，有些标签没有默认样式
没有默认样式:
div、span、…
有默认样式:
body(margin:8px;)、h1(margin:上下 21.440px;font-weight:bold;)、…、h6、p(margin:上下 16px;)、ul(margin:上下 16px;padding-left:40px;默认点:list-style:disc)、a(text-decoration:underline;)、…

CSS reset

简单的CSS reset:

*{margin:0;padding:0;}
优点:不用考虑哪些标签有默认的margin和padding
缺点:稍微影响性能
ul{list-style;none;}
消去无序列表前面的点
a{text-decoration:none;color:#666;}
img{display:block;}
由于内联元素的对齐方式是按照文字基线对齐的而不是文字底线对齐的，导致图片与容器底部有一些空隙，通过这个重置方法可以消去空隙
img{vertical-align:baseline;}基线对齐(默认)
img{vertical-align:bottom;}底线对齐–>也可以使用这种方法解决这个问题

float浮动

这里将浮动理解为上帝视角的楼层，浮动的在第二层，不浮动的在第一层

文档流

文档流是文档中可显示对象时所占用的位置

float特性

加浮动的元素，会脱离文档流，会延着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列

float取值

left
right
none(默认)

float注意点

1、只会影响到后面的元素
2、内容默认提升半层
3、默认宽根据内容决定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body{border: 1px black solid;}
    #box1{width: 50px;height: 50px; background: blue;}
    #box2{width: 100px;height: 100px; background: red;float: left;}
    #box3{width: 200px;height: 200px; background: green;}
    #box4{background:purple;float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容</div>
    <div id="box4">一个较长的文本内容</div>
</body>
</html>

运行效果
这里box1没有收到box2的浮动的影响，而box3中的文字也没有进入到box2中，box4的宽度由文本内容决定
4、换行排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    ul{margin: 0;padding: 0;list-style: none;width: 300px;height: 300px;border: 1px black solid;}
    li{width: 100px;height: 100px;background: red;border: 1px plum solid;box-sizing: border-box;float: left;}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

运行效果
5、主要给块元素添加，但也可以给内联元素添加

利用clear属性清除float浮动

上下排列

clear属性，表示清除浮动，left、right、both
clear属性只会操作块标签，对内联标签不起作用

嵌套排列

固定宽高:不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动:不推荐，因为父容器浮动也会影响到后面的元素。
overflow:hidden(BFC规范)，如果有子元素想溢出，那么会受到影响。
display:inline-block(BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签:不推荐，会多添加一个标签。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。