第三次学习Web的总结_web选择器不包括怎么写-CSDN博客

本文链接：https://blog.csdn.net/weixin_74155781/article/details/127660596

第三次学习Web的总结

一、CSS选择器
二、CSS优先级
三、CSS盒子模型
四、标签分类
五、其他规范
六、 CSS样式的设置

一、CSS选择器

1.1 class选择器

css：.elem{ }
html：class=“elem”

注：
1、class选择器是可以复用的。
2、可以添加多个class样式。
3、多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序
4、标签+类的写法

例子：div，p标签中都有class样式时，在.elem前加个p变成p.elem即可只让p标签显示相应样式。

1.2 ID选择器

css: #elem{ }
html :id=“elem”

注意事项

在一个界面，ID值是唯一的。
命名规范：字母_-数字（命名的第一位不能是数字）
命名方式
- 驼峰式：searchButtom（小驼峰：第二个单词首字母大写）
  searchButtom（大驼峰：两个单词首字母都大写）
- 下划线式：search_small_buttom
- 短线式：search_small_buttom

1.3 标签选择器

css: div{ }
html: < div >

使用场景：

去掉某些标签的默认样式时
复杂的选择器中，如层次选择器

1.4 群组选择器

css: div,p,span{ }

可以通过逗号给多个不同的选择器添加统一的CSS

1.5 通配选择器

*{ }→div,ul,li,p…

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

1.6 层次选择器

后代：M N{ }

在M的N标签添加CSS样式

父子：M>N{ }

仅对M下一层N标签添加CSS样式

兄弟: M~N{ }

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

相邻: M+N{ }

当前M下相邻的N标签（仅找下相邻的）

1.7 属性选择器

M[attr]{ }

*=：表示部分匹配即可使之改变样式
=：表示完全匹配才能使之改变样式
^=：起始匹配(前面的字符属性符合)才能使之改变样式
$=：结束匹配(后面的字符属性符合)才能使之改变样式
[][][]：组合匹配都满足才能使之改变样式

1.8 伪类选择器

伪类是 W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态

M:伪类{ }

:link 访问前的样式（只能添加给a标签）
:visited 访问后的样式（只能添加给a标签）
:hover 鼠标移入时的样式（可以添加给任意标签）
:active 鼠标按下后的样式（可以添加给任意标签）

注：

如果四个伪类都生效顺序为：L V H A
一般网站都只设置a{ } a：hover{ }

:after、:before 通过伪类方式给元素添加内容

content属性在after，before中输入内容

：checked、：disable、：focus都是针对表单元素的，当某个表单有上述属性该伪类对含有上述属性的表单生效

1.9 结构伪类选择器

:nth-of-type(n){ }

n为单一数字时指某一项
2n代表2的倍数项
n代表全部

;first-of-type { } 选中第一个
;last-of-type { } 选中最后一个
;only-of-type { } 仅有一个标签才生效

[]：nth-child(n) { }
值的是[]类标签中第n个而非第n个标签

二、CSS优先级

2.1相同、内部、外部、单一样式优先级

相同样式优先级

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

内部样式与外部样式

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

单一样式优先级

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

注：

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

2.2 !important

! important(加在标签后面)

提升样式优先级，非规范方式，不建议使用，无法提升继承的优先级

2.3 标签+类与单类

标签+类 > 单类

例：div,box{ color:blue} > .box { color:red}
两者都出现时会表达第一个样式

2.4 群组优先级

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

2.5 层次优先级

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

三、CSS盒子模型

3.1 盒子模型的组成

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

content：内容区域由width和height组成
padding：内边距（内填充）
- 例：number：30px 直接添加数字
  盒子模型图：
  
  padding的分类

只写一个值：30px（赋值顺序：上下左右）
只写两个值：30px 40px（赋值顺序：上下，左右）
写了四个值：30px 40px 50px 60px（赋值顺序：上，右，下，左）
单一样式只能写一个值

margin的分类
在这里插入图片描述

只写一个值：30px（赋值顺序：上下左右）
只写两个值：30px 40px（赋值顺序：上下，左右）
写了四个值：30px 40px 50px 60px（赋值顺序：上，右，下，左）

注：

背景颜色会填充到margin以内的区域（不包括margin）；
文字会在content区域；
padding不能出现负值，margin可以出现负值。

3.2 box-sizing

定义：CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

content-box（默认值）：width，height→content
border-box：width，height→content，padding，border
使用场景：

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

3.3 盒子模型的一些问题

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

解决方案：
1. BFC规范
2. 想办法只给一个元素添加间距（只留一个margin值）

margin传递问题：出现在嵌套结构中，只是针对margin-top的问题

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

3.4 扩展

margin自适应居中

margin-right:auto 右适应
margin-left:auto 左适应
margin:auto auto 居中适应

margin左右可以自适应，上下不行（后面会学）

不设置content的现象（width，height不设置的时候，对盒子的影响）

当不设置时会自动计算容器大小并且自动填充

3.5 盒子练习

<!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: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;}
        .bos6{ width:100px;height: 100px;background: #96ff38;border: #fcff00 5px solid;}
     </style>
</head>
<body>
    <div class="box1">
         <div class="box2">
            <div class="box3">
                <div class="box4">
                    <div class="box5">
                        <div class="box6"></div>
                    </div>
                </div>
            </div>
         </div>
    </div>
</body>
</html>

在这里插入图片描述

四、标签分类

4.1 按类型分类

block：块（div , p , ul , li , h1 , … ）
- 独占一行
- 支持所有格式
- 不写完的时候，跟父元素的宽相同
- 所占区域是一个矩形
inline：内联（span , a , em , strong , img …）
- 各个内联紧挨在一起
- 有些样式不支持
  - 例如：width , heught , margin , padding 其中 “margin ， padding ”属于分支样式不支持
- 不写宽的时候，宽度有内容决定
- 所占区域不一定为矩形（img是矩形）
- 内联标签有空隙原因：换行产生的
  - 解决方法：先在style 标签中加body{fant-size:0;}再在ID选择器里加上fant-sizd-6px
inline-block：内联块（input , select …）
- 连在一起，支持宽高
- 标签之间也有空隙
  - 解决方法：先在style 标签中加body{fant-size:0;}再在ID选择器里加上fant-sizd-6px

4.2 按内容分类

Flow：流内容
Metadata：元数据
Sectioning：分区(article , aside , nav , section)
Heading：标题(h1 , h2 , h3 , h4 , h5 , h6 )
Phrasing：措辞(strong , em …)
Embedded：嵌入的(img , audio …)
Interactive：互动的(输入框，菜单 …)

4.3 按显示分类

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
- 注：替换元素就是需要属性才能显示的内容
非替换元素：将内容直接告诉浏览器，将其显示出来。

五、其他规范

5.1 显示框类型

display

属性：

字符	含义
block	块状
none	不占空间隐藏
visibility:hidden	占空间隐藏
inline	内联状
inline-block	内联块状

5.1.1 二级菜单

实现原理：

使一级菜单的display改变为none
再将其添加:hover { display:block}的属性

例：

<!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{
                        width: 300px;
                        height: 300px;
                }
                .item ul {
                        display: none;
                }
                .item:hover ul{
                        display: block;
                }
        </style>
</head>
<body>
        <ul class="nav-1">
                <li class="item">一级标签
                        <ul class="nav-2">
                                <li>二级标签—1</li>
                                <li>二级标签—2</li>
                                <li>二级标签—3</li>
                        </ul>
                </li>
        </ul>
</body>
</html>

5.2 标签嵌套规范

块可以嵌套内联

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

块可以嵌套块

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

特殊错误案例

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

内联不能嵌套块

错误案例

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

特殊案例（正确的）

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

5.3 溢出隐藏

overflow

属性：

字符	含义
visible(默认值)	溢出格式完全显示
hidden	将溢出格式的隐藏起来
scroll	出现滚动条，但文字少的时候滚动条仍然不隐藏
auto	出现滚动条，文字少的时候滚动条隐藏起来

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

5.4 透明度与手势

opacity : 0 (透明)~1 (不透明) 0.5 （半透明）

注：

即便透明也是占空间的
所有的子内容跟着透明块而透明

子内容透明解决方案：
引入rgba（a,b,c,d）<用于背景色>
a ,b ,c代表着颜色表示方法，代表透明度
例：background-color：rgba（255，0，0，0）

cursor : 鼠标样式

default（默认）等等
实现自定义的样式：准备图片(格式为.cur , .ico)
例：cursor:url(./img/xxx.ico),auto;

5.5 最大，最小宽高

min-width(相当于大于等于的范围) | max-width(相当于小于等于的范围)
min -height | max-height

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

六、 CSS样式的设置

6.1 CSS默认样式(例)

没有默认样式的： div、span
有默认样式的:
body -> marign ：8px
h1 -> margin ：上下 21.440px font-weight :bold
p -> margin ：上下 16px
u l-> margin ：上下 16px padding ：左 40px 默认点：list-style:disc
a -> text-decoration: underline;

6.2 CSS reset

简单的css reset

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

可以单独提出来重置：例子：body,p,h1,ul{ margin:0;padding:0;}

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

问题的现象：图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-align:baseline；基线对齐方式，默认值
img{ vertical-align:bottom;}解决方式是推荐的
写具体页面的时候或一个布局效果的时候：

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

6.3 float 流动

文档流
文档流是文档中可显示对象在排列时所占用的位置。
float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经
有浮动的元素，会挨着浮动的元素进行排列。
float取值：left right none(默认)
float注意点：

只会影响后面的元素
内容默认提升半层 float 提升一层
默认款根据内容决定
换行排列（当父容器排列不下去时会折行）
主要给块元素添加，但也可以给内联元素添加

6.4 清除float浮动

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