web前端开发笔记46-71，78-83 2022/11/04

web前端开发笔记

一、标签群组通配等选择器（TAG）
- 1、标签选择器
- 2、群组选择器（不同标签）
- 3、通配选择器（一锅端）
二、层次选择器
- - 后代（）：M N
- - 父子：M > N
- - 兄弟：M~N （当前M下面的所有兄弟N标签）
- - 相邻：M+N （当前M相邻的下一个N标签）
三、属性选择器
四、伪类选择器
- （一）、hover等伪类
- - 1、:link 访问前的样式
  - 2、:visited 访问后的样式
  - 3、:hover 鼠标移入时的样式
  - 4、:active 鼠标按下时的样式
- （二）、after等伪类
- - 1、:after、:before 通过伪类的方式给元素添加一个文本内容
- （三）、表单伪类选择器
- - 1 、:checked、:disabled、:focus 针对表单元素
- （四）、结构性伪类选择器
- - 1、nth类选择器
  - 2、first类选择器
五、CSS样式继承
六、CSS优先级
七、CSS盒子模型
- 1、基础
- 2、box-sizing
- 3、问题
- - - margin叠加
  - - margin传递
- 4、扩展
- - margin自适应居中
  - 不设置content的现象
八、标签分类
- 1、按类型
- 2、按内容
- 3、按显示
九、显示框类型
- 1、display
十、标签嵌套规范
十一、溢出隐藏
十二、透明度与手势
- （一）、透明度
- - 1、opacity
  - 2、rgba
- （二）、手势
- - 1、cursor
十三、最大和最小宽高
十四、CSS默认样式
十五、CSS重置样式（reset）
十五、float浮动
- 1、浮动解释和演示
- 2、float注意点
- 3、清除float

一、标签群组通配等选择器（TAG）

1、标签选择器

css：div{ }
html：<div>

在head文件中的style标签下放入div{ }，可以设置网页中所有div标签的样式
一般在做通用设置的时候使用标签选择器
1、去掉某些标签的默认样式
2、复杂的选择器中，如：层次选择器

2、群组选择器（不同标签）

css：div，p，span{ }
可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用

<html><head><style>#p1, div, .h3p, .div1{background-color: greenyellow;}</style></head><body><p id="p1">段落</p><div class="div1">块</div><h3 class="h3p">标题</h3><div>第二个块</div></body>
</html>

3、通配选择器（一锅端）

*{添加样式} 包含了所有标签

尽量避免使用通配选择器，会给所有的标签添加样式

<html><head><style>*{border: 5px brown double;}</style></head><body><p id="p1">段落</p><div class="div1">块</div><h3 class="h3p">标题</h3><div>第二个块</div><h1>一级标题</h1></body>
</html>

二、层次选择器

- 后代（）：M N

例如 ul li{ }

<html><head><style>.ul0 li{border: 3px gold solid;}</style></head><body><ul class="ul0"><li><ul><li></li><li></li><li></li></ul></li></ul><ol><li><ol><li></li><li></li><li></li></ol></li>    </ol></body>
</html>

- 父子：M > N

例子 ul > li{ }

<html><head><style>.ul0 > li{border: 3px gold solid;}</style></head><body><ul class="ul0"><li><ul><li></li><li></li><li></li></ul></li></ul><ol><li><ol><li></li><li></li><li></li></ol></li>    </ol></body>
</html>

- 兄弟：M~N （当前M下面的所有兄弟N标签）

示例 div~p{ } （div标签下面的所有p标签添加样式）

<html><head><style>div ~ p{border: 1px red solid;}</style></head><body><p>F</p><h3>E</h3><h2>A</h2><div>B</div><p>C</p><h1>D</h1><p>G</p></body>
</html>

- 相邻：M+N （当前M相邻的下一个N标签）

示例 div + p{ } （对div下相邻的一个p标签添加样式）

<html><head><style>div + p{border: 1px red solid;}</style></head><body><p>F</p><h3>E</h3><h2>A</h2><div>B</div><p>C</p><p>H</p><p>I</p><h1>D</h1><p>G</p>    <p>J</p></body>
</html>

注意区别后代和父子两个层次的区别

三、属性选择器

示例1：div[class]{background:red;}

<html><head><style>div[class]{background: green;border: 3px solid red;}</style></head><body><div>66666</div><div class="div1">66666</div><div class="div2">66666</div><div id="div3">66666</div></body>
</html>

示例2：div[class*=box]{background}

<html><head><style>div[class*=box]{background: blueviolet;border: 3px solid red;}</style></head><body><div>AAAAAA</div><div class="box">66666</div><div class="box_fail">BBBBBBBB</div><div id="div3">CCCCCCCC</div></body>
</html>

说明：=：完全匹配
*=：部分匹配
^=：起始匹配
$=：结束匹配

示例3：div[class][id]{background}

<html><head><style>div[class][id]{background: yellow;border: 3px solid red;}</style></head><body><div>AAAAAA</div><div class="box" id="lll">66666</div><div class="box_fail">BBBBBBBB</div><div id="div3">CCCCCCCC</div></body>
</html>

四、伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
写法：M:伪类{}

（一）、hover等伪类

1、:link 访问前的样式

只能添加给<a></a>标签

2、:visited 访问后的样式

只能添加给<a></a>标签

3、:hover 鼠标移入时的样式

可以添加给所有的标签

<html><head><style>div{width:100px;height:300px;background:yellow;border:3px blue double}div:hover{ width:300px; height: 100px; background: red; border: 7px black unset}</style></head><body><div>66666666</div></body>
</html>

鼠标未移入时

鼠标移入时

4、:active 鼠标按下时的样式

可以添加给所有的标签

<html><head><style>div{width:100px;height:300px;background:yellow;border:3px blue double}div:active{background: red;}</style></head><body><div>66666666</div></body>
</html>

鼠标未按下

鼠标按下时

注意如果四个伪类都生效，一定要注意顺序：L V H A

（二）、after等伪类

1、:after、:before 通过伪类的方式给元素添加一个文本内容

<html><head><style>div:after{ content:"薇尔莉特·伊芙加登"}p:before{ content:"saber:"}</style></head><body><div>永远与自动手记人偶：</div><p>阿尔托莉雅·潘德拉贡</p></body>
</html>

作用：可以单独控制文本内容的格式

（三）、表单伪类选择器

1 、:checked、:disabled、:focus 针对表单元素

<html><head><style>:checked{width: 50px; height: 50px;}:disabled{width: 100px; height: 100px;}:focus{background: blueviolet;}</style></head><body><input type="checkbox">A<input type="checkbox">B<input type="checkbox" disabled>C<input type="checkbox" checked>D<input type="checkbox">F<input type="checkbox">H<input type="text"></body>
</html>

初始状态：

选中A、F并在文本框加入光标时的状态：

（四）、结构性伪类选择器

1、nth类选择器

nth-of-type( ){ }、nth-child( ){ } 用法相同

区别：li:nth-of-type(2)：li标签中第2项样式一定是li标签 就算ul下有li外的标签，但样式也只会赋给ul下的第2个li标签

li:nth-child(2)：ul标签下的第2项样式不一定是li标签 因为ul内可以在第2项插入div（不符合规范，但也可应用）此时样式应该赋给div 但标签应该是li 所有不会出现样式，可以改为div:nth-child(2)

<html><head><style>li:nth-of-type(2){background: blueviolet;}li:nth-of-type(5){border: brown 4px double;}</style></head><body><ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li>       </ul></body>
</html>

li:nth-of-type(2) 表示第2项li标签
li:nth-of-type(n) 表示从0到无穷大（即全选）
li:nth-of-type(2n)表示偶数项（可以达到隔行换色的样式 2n-1等等表达式）

2、first类选择器

first-of-type、last-of-type、only-of-type

<html><head><style>li:first-of-type{background: blueviolet;}li:last-of-type{border: brown 4px double;}li:only-of-type{background: red;}</style></head><body><ul><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li>       </ul></body>
</html>

li:only-of-type 当li标签只有一个时才会生效

五、CSS样式继承

文字相关的样式可以被继承
布局相关的样式默认是不能被继承，但可以设置继承属性 inherit值

例如：div父标签下有个p子标签，对div添加样式，若添加了与文字相关的样式则会继承到p子标签上

<html><head><style>div{border: 5px double red; color: violet;}</style></head><body><div><p>This is a pagger</p></div></body>
</html>

<html><head><style>div{width: 100px; height: 100px; border: 5px double red; color: violet;}p{border: inherit;}</style></head><body><div><p>This is a pagger</p></div></body>
</html>

设置p标签继承div的边框样式

六、CSS优先级

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

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

单一样式优先级
style行间 > id > class > tag > * > 继承

!important
提升样式优先级，非规范方式，不建议使用。（不能针对继承的属性进行优先级的提升）

标签+类与单类
标签+类 > 单类

群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高。（同一等级下比较）

层次优先级
1、权重比较：标签权重相加比较（同一级别不论多少个相加都不可能大于上一级的权重）
2、约分比较（约去相同级别的优先级标签在比较）

七、CSS盒子模型

1、基础

组成：（由内向外）content (物品)> padding（填充物） > border（包装盒） > margin（盒子与盒子之间的间距）

content：内容区域 width和height组成的
padding：内边距（内填充，可以选择方向） 30px（上下左右填充30像素） （黄框与蓝框之间的位置）

padding-left
padding-right
padding-top
padding-bottom

也可以像这样写
padding:30px 40px; (上下、左右)
padding:30px 40px 50px 60px; (上、右、下、左)

比较10px和50px

<html><head><style>#div1{width: 100px; height: 100px; background: red ; border: 10px pink solid; padding: 10px; }#div2{width: 100px; height: 100px; background: red ; border: 10px pink solid; padding: 50px;}</style></head><body><div id="div1">盒子模型</div><h2>分割</h2><div id="div2">盒子模型</div></body>
</html>

div块的宽高相同但是外填充（padding）不同导致整体盒子大小不同

margin：外边距（外填充） 30px 类似于padding
效果：0px

<html><head><style>#div1{width: 100px; height: 100px; background: red ; border: 10px pink solid; padding: 30px; margin: 0px;}#div2{width: 100px; height: 100px;background: blueviolet; color: white; }</style></head><body><div id="div1">盒子模型</div><h2>分割</h2><div id="div2">盒子模型</div></body>
</html>

30px

<html><head><style>#div1{width: 100px; height: 100px; background: red ; border: 10px pink solid; padding: 30px; margin: 30px;}#div2{width: 100px; height: 100px;background: blueviolet; color: white; }</style></head><body><div id="div1">盒子模型</div><div id="div2">盒子模型</div></body>
</html>

注：
1. 背景颜色会填充到margin以内的区域。
2. 文字会在content区域。
3. padding不能出现负值，margin是可以出现负值。

2、box-sizing

box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
取值为content-box(默认值) | border-box。

盒子的尺寸，可以改变盒子模型的展示形态。
width、height是默认作用到content的区域，但使用box-sizing属性后，就可以作用到 content、padding、border 区域。

示例：
box-sizing: content-box;将width和height分给一个区域（content）
box-sizing: border-box;将width和height分给三个区域（content、padding、border）

作用：1、不用再去计算一些值（尺寸）
2、解决一些百分比的问题

3、问题

- margin叠加

当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题（不会累加）。这个问题，只在上下有，左右是没有这个叠加问题的。会取上下中值较大的margin像素值作为叠加的值

解决方案：1、BFC规范(不做要求)
2、想办法只给一个元素添加间距

- margin传递

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。

<html><head><style>#div1{width: 200px; height: 200px; background: red ; }#div2{width: 50px; height: 50px;background: blueviolet; margin-top: 30px}</style></head><body><div id="div1"><div id="div2"></div></div></body>
</html>

解决方案：1、BFC规范(不做要求)
2、给父容器加边框。
3、margin换成padding。

4、扩展

margin自适应居中

auto（使盒子在浏览器窗口居中）margin: 0 auto;
左右自适应是可以的
上下自适应不可

<html><head><style>#div1{width: 200px; height: 200px; background: red ; margin: 0 auto;}</style></head><body><div id="div1"></div></body>
</html>

不设置content的现象

width、height不设置的时候，对盒子模型的影响（自动计算盒模型的值，节省代码）

八、标签分类

1、按类型

bolck：块
例如：div、p、ul、li、h1···
独占一行、支持所有样式、不写宽的时候，跟父元素的宽相同、所占的区域是矩形

inline：内联
例如：span、a、em、strong、img···
挨在一起的、有些样式不支持（宽高填充等）、不写宽的时候由内容决定宽度、所占的区域不一定是矩形

inline-block：内联块
例如：input、select···
挨在一起，但支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

2、按内容

Flow: 流内容
Metadata: 元数据
Sectioning: 分区
Heading: 标题
Phrasing: 措辞
Embedded: 嵌入的
Interactive: 互动的

3、按显示

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如：img、input···

非替换元素：将内容直接告诉浏览器，将其显示出来。
例如：div、h1、p···

九、显示框类型

1、display

block
inline
inline-block
none
注：display:none（不占空间的隐藏）与 vixibility:hidden（占空间的隐藏）区别

十、标签嵌套规范

ul、li
dl、dt、dd
table、tr、td

块标签可以嵌套内联标签
块标签不一定能嵌套块标签
内联标签不能嵌套块标签（a标签是一个例外）

<div><span> </span><a href="#"> </a>
</div>

块嵌套块：

<div><div></div>
</div>

特殊（不允许）：
错误的写法：

<p><div></div>
</p>

内联是不能嵌套块
错误写法：

<span><div> </div>
</span>

特殊：
正确写法：

<a href="#"><div> </div>
</a>

十一、溢出隐藏

overflow

visible：默认
hidden：隐藏
scroll：上下和左右滚动条
auto：上下滚动条
X轴、Y轴

也可以对X和Y两个轴分别设置（overflow-x: auto; 、overflow-y: scroll;）

十二、透明度与手势

（一）、透明度

1、opacity

写法：opacity: 0（透明，占空间）~1（不透明）
0.5半透明
注：占空间，所有的子内容也会透明

<html><head><style>#div1{width: 100px;height: 100px; color:black; background:  gold; opacity: 1;}#div2{width: 100px;height: 100px; color:black; background:  greenyellow; opacity: 0.5;}#div3{width: 100px;height: 100px; color:black; background:  red; opacity: 0;}</style></head><body><div id="div1">透明度与手势</div><h2>$$$</h2><div id="div2">透明度与手势</div><h2>$$$</h2><div id="div3">透明度与手势</div></body>
</html>

2、rgba

rgba(255,0,0,1)表示红色不透明最后一位数代表透明度

==注：可以让指定的样式透明，而不影响其他的样式

（二）、手势

1、cursor

default：默认箭头

也可以自定义鼠标样式
方法：准备图片（格式要求 .cur 、.ico）
cursor: url(图片相对位置)，auto;

十三、最大和最小宽高

min-width、max-width
min-height、max-height
注：强化对百分比单位的理解
%单位：换算己父容器的大小进行换算的
一个容器怎么适应屏幕的高：容器加height:100%; body:100%; html:100%;
html，body{height:100%;}
.contrainer{ height:100%;}

十四、CSS默认样式

有些标签有默认样式，有些标签没有默认样式。

没有默认样式：
div、span···

有默认样式：
body、h1···h6、p、ul···

body ----- marign:8px
h1 ------ marign:上下 21.440px (font-weight: bold)
p ------ marign:上下 16px
ul ------marign:上下 16px padding:左 40px （默认点：list-style：disc）
a ------ text-decoration: underline;

十五、CSS重置样式（reset）

简单的CSS reset

*{ marign:0; padding:0; }
不用考虑哪些标签有默认的marign和padding
但会稍微的影响性能

ul{ list-style:none; }
去掉ul的默认点

a{ text-decoration:none; color:#666; }
去掉下划线，改变颜色

img{ display:block; }
问题的现象：图片跟容器底部有一些空隙
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-align：baseline；基线对齐方式，默认值
img{ vertical-align:bottom;} 解决方式是推荐的

写具体页面的时候或一个布局效果的时候：
1、写结构
2、css重置样式
3、写具体样式

十五、float浮动

1、浮动解释和演示

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

float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动元素，会挨着浮动的元素进行排列。
float取值
left
right
none（默认）

<!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;}#div1{width: 100px;height: 100px;  background:  gold; }#div2{width: 200px;height: 200px;  background: blue; }</style>
</head>
<body><div id="div1"></div><div id="div2"></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>body{border:1px black solid;}#div1{width: 100px;height: 100px;  background:  gold; float: left;}#div2{width: 200px;height: 200px;  background: blue; }</style>
</head>
<body><div id="div1"></div><div id="div2"></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>body{border:1px black solid;}#div1{width: 100px;height: 100px;  background:  gold; float: right;}#div2{width: 200px;height: 200px;  background: blue; }</style>
</head>
<body><div id="div1"></div><div id="div2"></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>body{border:1px black solid;}#div1{width: 100px;height: 100px;  background:  gold; float: right;}#div2{width: 200px;height: 200px;  background: blue;float: right; }</style>
</head>
<body><div id="div1"></div><div id="div2"></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>body{border:1px black solid;}#div1{width: 100px;height: 100px;  background:  gold; float: right;}#div2{width: 200px;height: 200px;  background: blue;float: left; }</style>
</head>
<body><div id="div1"></div><div id="div2"></div>
</body>
</html>

2、float注意点

只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给块元素添加，但也可以给内联元素添加

3、清除float

嵌套排列：

上下排列：clear属性，表示清除浮动的，选值：left right both

2022-11-04 18：50
Author：夏天