web大前端之旅Ⅲ

Sodapease

已于 2022-11-03 22:33:36 修改

阅读量150

点赞数

文章标签：前端 css html

于 2022-11-03 16:00:54 首次发布

本文链接：https://blog.csdn.net/Sodapease/article/details/127585731

版权

标签选择器(TAG选择器)

css：div{} html:< div >

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

群组选择器(分组选择器)

css：div,p,span{}

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

通配选择器

*{}–>div,ul,li,p,h1,h2…{}

尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景：
去掉所有标签的默认样式时

层次选择器

后代： M N {}

 <style>
         ul li {border: grey solid;}
    </style>

效果展示

父子：M>N

 <style>
         #list>li {border: grey solid;}
    </style>

效果展示

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

<style>
       div ~ h2{background-color: lightskyblue;}
    </style>

效果展示

相邻：M+N

 <style>
       div + h2{background-color: lightskyblue;}
    </style>
<div>我是一个块</div>
    <h2>我是一个二级标题</h2>
    <p>我是一个段落</p>

效果展示

属性选择器

选择器	说明
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元素选择满足多个属性的集合

 <style>
       div[class]{background-color: lightgreen;}
    </style>

<div>我是一个块</div>
    <div class="fri">我是另一个块</div>
    <div class="sec">我还是一个块</div>

效果展示

伪类选择器

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

:nth-of-type() :nth-child()
角标从1开始，n值表示从0到无穷大
可以利用n实现统一指定修饰

 <style>
        li:nth-of-type(3){background-color: blue;}
    </style>

效果展示

:first-of-type :first-child()
改变第一个的属性

:last-of-type :last-child()
改变第二个的属性

:only-of-type :only-child()
仅有一个才改变属性

代码实现

<style>
        a:link{color: brown;}
        a:visited{color: blue;}
        a:hover{color: black;}
        a:active{color: grey;}
    </style>
</head>
<body>
    <a href="">我是一个小链接</a>
</body>

注:
1.link visited 只能给a标签加，hover和active可以给所有的标签加。
2.如果四个伪类都生效，一定要注意顺序:LVHA。
3.一般网站只这样去设置:a{} a:hover{}。

CSS样式继承

文字相关的样式可以被继承

作用在< div >标签内的内容可以被继承

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

<style>
        div{width: 100px;height: 100px;border: 1px grey solid;color: blue;font-size: 15px;}
        p{border: inherit;}
    </style>
</head>
<body>
    <div>
        <p>我是一个段落</p>
    </div>
</body>

效果展示

CSS优先级

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

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

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

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

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

标签+类与单类
标签+类 > 单类的优先级

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

层次优先级

权重比较
同级，不可累加比较

约分比较

样式尽量控制在三层以内

CSS盒子模型

在这里插入图片描述

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

content：内容区域

由width和height组成

padding：内边距（内填充）

number：value（表示上下左右）
number：value1 value2（上下、左右）
number：value1 value2 value3 value4（上、下、左、右）
单一样式只能写一个值
padding-top
padding-bottom
padding-left
padding-right

margin：外边距（外填充）

number：value（表示上下左右）
number：value1 value2（上下、左右）
number：value1 value2 value3 value4（上、下、左、右）
单一样式只能写一个值
margin-top
margin-bottom
margin-left
margin-right

 <style>
        #box{width: 100px;height: 100px;background-color: grey;
        padding: 50px 50px;
         margin: 50px;}
            #box2{width: 100px;height: 100px;background-color: black;}
    </style>
</head>
<body>
    <div id="box"></div>
    <div id="box2"></div>

效果展示

box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
取值为content-box(默认值)|border-box：
width、height–>content
border-box：width、height–>content padding border
使用的场景：

不用再去计算一些值
解决一些百分比的问题

margin叠加

当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。
解决方案:
1.BFC规范
2.想办法只给一个元素添加间距。

margin传递

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。
解决方案:
1.BFC规范
2.给父容器加边框。
3. margin换成padding。

margin自适应居中

margin自适应只适用于左右，不适用于上下。
width、height不设置的时候，盒子模型会自动去计算容器的大小，节省代码。

    margin-right: auto;
    margin-left: auto;||margin:0 auto;||margin:auto auto;

盒子模型嵌套练习

<!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>boxe</title>
    <style>
        #box1{width: 350px;height: 350px;border: 1px black dashed;padding: 27px;}
        #box2{border: 5px #d7effe solid;padding: 20px;}
        #box3{background: #ffa0df;padding: 41px;}
        #box4{border: 1px white dashed;padding: 3px;}
        #box5{border: 1px white dashed;padding: 49px;}
        #box6{width: 100px;height: 100px;background: #96ff38;border: #fcff00 5px solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6">

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

效果展示

标签分类

按类型

block–块

div、p、ul、li、h1…

特性：独占一行
支持所有样式
不写宽的时候和父元素的宽相同
所占区域是一个矩形

inline–内联、

span、a、em、strong、img…

挨在一起
有些样式不支持，例如：width、height、margin、padding…
宽度由内容决定
所占的宽度不一定是矩形
内联标签之间会有空隙，原因：换行产生的
解决方案
给内联标签所在的父容器加font-size=0

inline-block–内联块

input、select…

挨在一起，但是支持宽高
注：布局一般用块标签，修饰文本一般用内联标签

按内容

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

按显示

替换元素
浏览器根据元素的标签和属性，来决定元素的具体显示内容。
img、input…
非替换元素
将内容直接告诉浏览器，将其显示出来。
div、h1、p…

显示框类型

display

block、inline、inline-block、none…
display:none 不占空间的隐藏
visibility:hidden 占空间的隐藏

标签嵌套规范

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

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

溢出隐藏

overflow
visible：默认
hidden
scroll
auto
x轴、y轴
overflow-x、overflow-y针对两个轴分别设置

透明度与手势

opacity：0（透明）~1（不透明）

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

rgba：0（透明）~1（不透明）

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

cursor
default：默认箭头
自定义鼠标样式
准备图片：.cur、.ico

最大、最小宽高

min-width、max-width
min-height、max-height
注：强化对百分比单位的理解
%单位以父容器的大小进行换算

CSS默认样式

无默认样式标签

div、span…

有默认样式标签

CSS reset

简单的CSS reset :

*{ margin:0; padding:0; }

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

ul{ list-style:none; }

a{ text-decoration:none; color:#666; } img{ display:block; }

img{display:block}

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

vertical-align:baseline;

基线对齐方式：默认值

img{vertical-align:bottom;} 解决方式推荐

写具体页面的时候或一个布局效果的时候：

写结构
CSS重置样式
写具体样式

float浮动

文档流

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

float特性

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

float取值

left
right
none（默认）

 <style>
        body{border: 1px black solid;}
        #box1{width: 100px;height: 100px;background-color: green;float: left;} 
        #box2{width: 200px;height: 200px;background-color:blue;}       
    </style>
</head>
<body>
   <div id="box1"></div>
   <div id="box2"></div>
</body>

效果展示

若body内都采用浮动
则对body的属性值会发生相应变化

float注意点

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

消除浮动

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