web前端笔记（2）

优降宁

已于 2023-06-26 09:36:24 修改

阅读量206

点赞数

分类专栏： html 文章标签：前端 css html

于 2022-11-03 19:43:47 首次发布

本文链接：https://blog.csdn.net/yjnlovepy/article/details/127583334

版权

html 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

继续上章的内容（本文记录46集至71集）

CSS选择器

ID选择器

CSS：#elem{}
Html：id=“elem”
多余的知识，div#“命名值”+tab键，额能够快速生成< div id=“命名值”>< /div>

注：1、在一个页面中，ID值是唯一的，不能够重复出现，出现多次是不符合规范的。
2、命名规范，“字母”“ _ ”“- ”“数字”(命名的第一位不能是数字)。
3命名方式，驼峰式、下划线、短线式。

驼峰写法：searchButton(小驼峰) SearchBotton(大驼峰)searchSmallButton（小驼峰）
短线写法：search-small-button
下划线写法：search_small_button

CLASS选择器

CSS：.elem{}
Html: class=“elem”

注：
1、calss选择器是可以复用的
2、可以添加多个class样式。
3、多个样式的时候，样式的优先级根据CSS决定（在style中定义时的顺序），而不是class属性中的顺序
4、标签+类的写法（例如p.贝勒贝莱，这样的话只有p标签可以使用“贝勒贝莱”样式）

标签选择器（TAG选择器、元素选择器）

CSS： div{}
Html： < div>

使用场景：
1、去掉某些标签的默认样式时
2、复杂的选择器中，如，层次选择器

群组选择器

CSS：div，p，span{}

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

<!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,#text,.title{background-color: aqua;}
	</style>
</head>
<body>
	<div>这是一个快</div>
	<p id="text">这是一个段落</p>
	<h2 class="title"> 这是一个标签</h2>

</body>
</html>

效果如下：

通配选择器

*{ }——>div，ul，li，p，h1，h2…{}（即所有标签）

层次选择器

后代 M N { }
父子 M > N
兄弟 M ~ N 当前M下面的所有兄弟N标签
相邻 M + N 当前M相邻的N标签

属性选择器

M[attr]—————M元素选择指定为attr属性的集合
M[attr=value]————M元素选择指定为attr属性和value值的集合
M[attr*=value]————M元素选择指定为attr属性并且包含值为value的集合
M[attr^=value]————M元素选择指定为attr属性并且起始值为value的集合
M[attr$=value]————M元素选择指定为attr属性并且结束值为value的集合
M[attr1][attr2]————M元素选择满足多个属性的集合

注：
= ：完全匹配
*=：部分匹配
^= : 起始匹配
$=：结束匹配

伪类选择器

内容性伪类选择器

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

：link————访问签的样式（只能添加给a标签）
：visited———访问后的样式（只能添加给a标签）
：hover————鼠标移入时的样式（可以添加给所有的标签）
：active————鼠标按下时的样式（可以添加给所有的标签）

注：
1、link、visted只能给啊、标签添加，hover和active可以给所有的标签加
2、如果四个伪类都生效，一定要注意顺序：L V H A。
3、一般网站只这样去设置：a{} a：hover{}。

：after、：before

通过伪类的方式给元素添加一段文本内容，使用content属性。

：check、：diasbled、：focus

都是针对表单元素的。

结构性伪类选择器

：nth-of-type()、：nth-child()

角标是从1开始的，1表示第一项，2表示第二项 | n值表示从0到无穷大

：first-of-type()、：first-child
：last-of-type()、：last-child
：only-of-type()、：only-child

大于等于二的类型不会有反应

nth-of-type()和nth-child（）之间的区别
type：类型
child：孩子

CSS样式继承

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

CSS优先级

相同样式优先级

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

<!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{background-color: red;}
		div{background-color: aqua;}
	</style>
</head>
<body>
	<div>这是一个块</div>
</body>
</html>

实际样式

内部样式与外部样式

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

单一样式优先级

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

注：
style行间 ——— 权重1000
id —————— 权重100
class —————权重10
tag ——————权重1

！important

提升样式优先级，非规范方式，不建议使用
群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高

CSS优先级的比较

两种方法：
层次优先级
1.权重比较
2.约分比较

1.权重比较
ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100

2.约分比较
ul li .box p input{} ———— li p input{}
.hello span #elem{} ———#elem{}

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（上，右，下，左）

单一样式只能写一个值：
margin-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
border-box：width、height---->content padding border

使用场景：
1、不用再去计算一些值
2、解决一些百分比的问题

CSS盒子模型的问题

margin叠加

当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只有上下有，左右是没有这个叠加问题的。

解决方案
1、BFC规范
2、想办法只给一个元素添加间距

margin传递

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

解决方案：
1、BFC规范
2、给父容器加边框
3、margin换成padding

扩展：
1.margin左右自适应是可以的，但是上下自适应是不行的。（如果想实现上下自适应的话，需要在第二部分来进行学习）
2.width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

标签分类

按类型

block：块

block：div、p、ul、li、h1…
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个区域

inline：内联

inline：span、a、em、strong、img…
1.挨在一起
2.有些样式不支持，例如：width、height、margin、padding
3.不写宽的时候，宽度由内容决定
4.所占的区域不一定是矩形
5.内联的标签之间会有间隙，原因：换行产生的

inline-block：内联块

inline-block：input、select…
1.挨在一起，但是支持宽高

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

按内容

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

W3C
详情请点击“W3C”了解更多

按显示

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

img，input…

非替换元素：将内容直接告诉浏览器，将其显示出来

div，h1，p…

显示框类型

block
inline
inline-block
none
display：none不占空间的隐藏
visibility：hidden占空间的隐藏

标签嵌套规范

规范：
1、块标签可以嵌套内联标签
2、块标签不一定能嵌套块标签
3、内联标签不能嵌套快标签

a标签是个例外，a能够嵌套a，a也能嵌套内联span

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

块能够嵌套内联
< div>
< span>< /span>
< a href=“#”> < /a>
< /div>

块嵌套块
< div>
< div>< /div>
< /div>

特殊
错误的写法
< p>
< div></ div>
< /p>

溢出隐藏

overflow：
visible：默认
hidden
scroll
auto
x轴，y轴

overflow-x，overflow-y分别针对两个轴设置

hidden

scroll

auto

透明度与手势

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

rgba（）：0~1
注：可以让指定的样式透明，而不影响其他样式

cursor：手势
default：默认箭头

要实现自定义手势
准备图片，图片类型必须是：“.cur"或”.ico"
写法：cursor:url(相对位置或者绝对位置),auto;

最大、最小宽高

min-width、min-height
max-width、max-height

%单位：换算—>已父容器的大小进行换算（body不是）

一个容器怎么适应屏幕的高：
容器加height：100%；
body：100%；
html：100%

html，body{height：100%}
.contrainer{height:100%}

CSS默认样式

没有默认样式的：div、span

有默认样式的：
body—>margin：8px
h1——>margin：上下 21.440px
————font-weight：bold
p———>margin：上下 16px
ul———>margin：上下 16px—padding：左 40px

默认点：list-style：disc

a————>text-decoration：underline

CSS reset

*{margin：0；padding：0}

优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能（无伤大雅）

ul{list-style：none}
a{text-decoration：none；color：#666；}
img{display：block；}

问题的现象：图片跟容器的底部有一些空隙。
原因：内联的元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。

vertical-align：baseline；基线对齐方式，默认值
img{vertical-align：bottom；}解决方案推荐

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

float浮动

float浮动产生的原因及自身特性

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

float特性：
家父佛那个的元素，会脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值：
left
right
none（默认）——没有

float使用时的注意点

float注意点：
1、只会影响后面的元素。
2、内容默认提升半层（覆盖层级小的）。
3、默认宽根据内容决定。
4、换行排列。
5、主要给块元素添加，但也可以给内联元素添加。

这是不给< div>块标签添加float时的样子

当给第一个div块标签添加“float：left”时

当给第一个div块标签添加“float：right；”时

换行排列

默认宽由内容决定

换行排列：lel—2（参考代码如下）

<!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-color: red;border: 1px yellow 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>b
</html>

奇怪的换行排列——暂时不做了解

也可以给内联元素添加float

利用claer属性清除float浮动

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

只介绍部分

利用clear属性清除float浮动,需要添加与float作用方向相同（left，right相同），或者用both

<!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: 100px;height: 100px;background-color: red;float: left;}
		#box2{width: 200px;height: 200px;background-color: blue;clear:both}
	</style>
</head>
<body>
	<div id="box1"></div>
	<div id="box2"></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: 200px;border: 1px black solid;}
		#box2{width: 100px;height: 200px;background-color: red;float: left;}

		.clear{clear:both;}
	</style>
</head>
<body>
	<div id="box1">
		<div id="box2"></div>
		<div class="clear"></div>
	</div>
	aaaaaa
</body>
</html>

after伪类

<!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;border: 1px black solid;}
		#box2{width: 100px;height: 200px;background-color: red;float: left;}

		.clear:after{content: '';clear: both;display: block;}
	</style>
</head>
<body>
	<div id="box1" class="clear">
		<div id="box2"></div>
	</div>
	aaaaaa
</body>
</html>