Web前端第三周

Ruuuuvh

已于 2022-11-15 16:50:32 修改

阅读量190

点赞数

文章标签：前端 css html

于 2022-11-05 13:18:52 首次发布

本文链接：https://blog.csdn.net/Ruuuuvh/article/details/127654820

版权

Web前端第三周

- 二、CSS基础语法

二、CSS基础语法

9.CSS选择器

标签选择器（TAG选择器）

CSS：div{} <div></div>

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

html：<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=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{ background:red;}
        #text{ background: red;}
        .title{ background: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2>
</body>
</html>

群组选择器（分组选择器）

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

CSS：div，p，span{}

通配选择器

注：尽量避免使用通配选择器，因为这样会给所有的标签添加样式。

使用场景：去掉所有标签的默认样式时

层次选择器

后代: M N { }

 <style>
       ul li{ border: 1px red solid;}
    </style>

父子: M>N { }

 <style>
        #list > li{ border: 1px red solid;}
    </style>

兄弟：M~N

当M下面的所有兄弟N标签

    <style>
        div~h2 {background: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
</body>

相邻：M+N { }

当前M相邻的N标签

    <style>
        div+h2 {background: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
</body>

属性选择器
在这里插入图片描述

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

伪类选择器
M：伪类{ }

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

注：如果四个伪类都生效，一定要注意顺序：L V H A
一般网站都只能这样去设置：a{ } （link visited active）
a：hover{ }；

：after、：before 通过一些伪类的方式给文本添加一段文本内容

<style>
     div:after{ content: "world";}
    </style>

<style>
     div:before{ content: "world";}
    </style>

：checked、：disable、：focus 针对表单元素

结构性伪类选择器

nth-of-type()
nth-child()

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

   <style>
        li:nth-of-type(2){background: black;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

在这里插入图片描述

 <style>
        li:nth-of-type(n){background: black;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

在这里插入图片描述

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

<style>
    li:first-of-type{background: black;}
    li:last-of-type{background: blue;}
</style>

在这里插入图片描述

   <style>
        li:only-of-type{background: black;}
    </style>

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

    <style>
        li:nth-child(3){background: black;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <div>AAA</a></div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

在这里插入图片描述

10.CSS样式继承

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

11.CSS优先级

相等样式优先级

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

内部样式与外部样式

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

单一样式优先级

style行间 > id > class > tag > * > 继承
注：
style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1

！important

提升样式优先级，非规范方式，不建议使用。

标签+类与蛋类
群组优先级

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

层次优先级
（1）权重比较
ul li .box p input{ }
（2）约分比较
.hello span #elem{ }

12.CSS盒子模型

在这里插入图片描述

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

content：内容区域 width和height组成的
padding：内边距（内填充）

只写一个值：30px（上下左右）
写两个值：30px 40px（上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）

margin：外边距（外填充）

单一样式只能写一个值
注：（1）背景颜色会填充到margin以内的区域。
（2）文字会在content区域。
（3）padding不能出现负值，margin是可以出现负值。

box-sizing：盒尺寸，可以改变盒子模型的展示形态

默认值：content-box：width、height→content
border-box：width、height→content padding border

使用场景：（1）不用再去计算一些值；（2）解决一些100%的问题

盒子模型的一些问题：

1、margin叠加问题：出现在上下margin同时存在的时候，会取上下中值较大的作为叠加的值。

解决方案：①BFC规范；②想办法只给一个元素添加间距。

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

在这里插入图片描述
2、margin传递问题：出现在嵌套的结构中，只是针对margin-top的问题。

解决方案：①BFC规范；②给父容器加边框；③margin换成padding。

扩展：
1、margin左右自适应是可以的，但上下自适应不行。
2、height、width不设置的时候，对盒子模型的影响，会主动去计算容器的大小，节省代码。

13.标签分类

按类型：

block：块

（1）独占一行
（2）支持所有样式
（3）不写宽的时候，跟父元素的宽相同
（4）所占区域是一个矩阵

inline：内联

（1）挨在一起
（2）有些样式不支持
（3）不写宽的时候，宽度由内容决定
（4）所占的区域不一定是矩形
（5）内联标签之间会有空隙原因：换行产生的

inline-block：内联块

挨在一起，但是支持宽高

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

按内容：

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

按显示：

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
非替换元素：将内容直接告诉浏览器，将其显示出来

14.显示框类型

display

block
inline
inline-block
none

注：display：none与visibility：hidden 区别
display：none 不占空间的隐藏
visibility：hidden 占空间的隐藏

15.标签嵌套规范

ul、li
dl、dt、dd
table、tr、td
块标签可以嵌套内联标签

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

块标签不一定能嵌套块标签

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

特殊：（错误写法）

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

内联不能嵌套块

错误写法：

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

特殊：（正确）

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

16.溢出隐藏

overflow：

visible：默认
hidden
scroll
auto
x轴、y轴

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

<!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{ width: 300px;height: 200px;border: 1px black solid;overflow: hidden;}
    </style>
</head>
<body>
    <div>
        阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆
        阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆
        阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆
        阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆
        阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆
        阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆
        阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆
        阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆
        阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆
        阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆阿拆

    </div>
</body>
</html>

在这里插入图片描述

<style>
    div{ width: 300px;height: 200px;border: 1px black solid;overflow: scroll;}
</style>

在这里插入图片描述

17.透明度与手势

opacity：0（透明，占空间）~1 （不透明） 0.5（半透明）

注：占空间，所有的子内容也会透明

rgba：0~1

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

cursor：手势
default：默认箭头

要实现自定义手势：

准备图片：.cur、.ico

18.最大、最小宽高

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

%单位：换算→已父容器的大小进行换算的

注：强化对百分比单位的理解

一个容器怎么适应屏幕的宽高：容器加height：100%； body：100% html：100%
html，body{ height：100%}
.contrainer{ height：100%}

19.CSS默认样式

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

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

body→margin：8px
h1→margin：上下 21.440px
p→margin：上下 16px
ul→margin：上下 16px padding：左 40px

默认点：list-style：disc

a→text-decoration：underline

20.CSS reset

简单的CSS reset：

{ margin :0; padding :0;}

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

ul { list - style : none ;}
a { text - decoration : none ; color :#999;}
img { display : block ;}

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

vertical - align : baseline ;基线对齐方式，默认值
ing { vertical - align : bottom ;｝解决方式是推荐的

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

21.float浮动

脱离文档流，延迟父容器靠左或靠右进行排列。

取值：left、right、none

没加float之前：

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

在这里插入图片描述

加了float之后：

<style>
        body{border: 1px black solid;}
        #box1{width: 100px;height: 100px;background: yellow;float: left;}
        #box2{width: 200px;height: 200px;background: red;}
    </style>

在这里插入图片描述
float特性：如果之前已经有浮动元素，会挨着浮动的元素进行排列。

float注意点：

只会影响后面的元素

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

内容默认提升半层

<style>
        body{border: 1px black solid;}
        #box1{width: 100px;height: 100px;background: yellow;}
        #box2{width: 200px;height: 200px;background: red;float: left;}
        #box3{width: 300px;height: 300px;background: blue;}
    </style>

在这里插入图片描述

默认宽根据内容决定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{border: 1px black solid;}
        #box1{width: 100px;height: 100px;background: yellow;}
        #box2{width: 200px;height: 200px;background: red;float: left;}
        #box3{width: 300px;height: 300px;background: blue;}
        #box4{background: green;float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队许队</div>
    <div id="box4">这是一段没有宽度的文字</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=, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body{border: 1px black solid;} */
        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 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>
</html>

在这里插入图片描述

主要给块元素添加，但也可以给内联元素添加（后者使用较少）

22.清除float

上下排列：clear属性表示清除浮动的：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: blue;float: left;}
        #box2{width: 200px;height: 200px;background: burlywood;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

在这里插入图片描述
后：

<style>
        #box1{width: 100px;height: 100px;background: blue;float: left;}
        #box2{width: 200px;height: 200px;background: burlywood;clear: left;}
    </style>

在这里插入图片描述

嵌套浮动

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

<!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:brown;float: left;}
        .clear:after{content: '';clear: both;display: block;}
    </style>
</head>
<body>
    <div id="box1" class="clear">
        <div id="box2"></div>
    </div>
    123456
</body>
</html>