Web前端学习课程笔记之HTML+CSS（第三周第46集~71集，第78~83集）-CSDN博客

本文链接：https://blog.csdn.net/Ghlys/article/details/127615701

以下选择器是CSS部分的

（三）标签选择器（TAG选择器）

会对HTML中所有标签进行更改样式

HTML:<div>
CSS:div{}
使用场景：
1、去掉某些标签的默认样式时
2、复杂的选择器中

（四）群组选择器

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

（五）通配选择器

注：避免使用

*{}
包含所有标签，对所有标签添加样式
使用场景：
1、去掉所有有默认样式的标签的默认样式时

（六）层次选择器

后代:最外层容器标签内层标签{}，后代所有（用空格隔开）
父子：最外层标签>内层标签{}，后代近一层
兄弟：标签~另一标签{}，当前标签下的所有兄弟另一标签
相邻：标签+另一标签{}，当前标签下面相邻的另一标签

（七）属性选择器

标签【属性】{}或标签【属性=xxx】
1、=：完全匹配
2、*=：部分匹配
3、^=：起始匹配
4、￥=：结束匹配
还可以标签【】【】【】进行组合匹配

（八）伪类选择器

格式：选择器：伪类{}

1、常见：

①link 访问前的样式（只能加给a标签）
②visited 访问后的样式（只能加给a标签）
③hover鼠标移入时的样式（适用于所有标签）
④active鼠标按下时的样式（适用于所有标签）

注：
①当四个伪类都生效，要按照一定顺序：LVHA
②一般网站只设置a{}和a:hover{}，（就是统一前，访问后，鼠标按下时的样式）

2、选择器：before/after{content:“xxx”}

通过伪类的方式给元素后面或前面添加一个文本内容，使用content属性
作用:可以对文本进行部分的样式更改

3、:checked/:disabled/:focus{}

都是针对表单元素的。（此三类前面不用加选择器）
①：:checked{}所有被选中的单选按钮(radio)或复选框(checkbox)（如果一开始就在HTML的标签内加上checked就可以一开始就拥有checked选择的样式）
②：:disabled{}作用于不可用的表单元素
③：:forcus{}作用于获得光标的表单元素

4、结构伪类选择器

①:nth-of-type/:nth-child(){}（第几项的阿拉伯数字）{}括号内填n代表所有项，2n代表偶数项，2n+1代表奇数项
②:first-of-type{}/:first-child{}第一项
③:last-of-type{}/:last-child{}最后一项
④:only-of-type{}/:only-child{}只有一个项时（有两个时是不会有反应的）

问1:如何清除chrome网站缓存数据？
答：按下shift+ctrl+delete
问2为什么控台伪类前显示两个冒号？
答：两个冒号表示伪元素
问3结构选择器当中type和child有什么区别？
答：当一个标签内有不同类型的属性，type是以同一类型数，而child是所有属性一起数

三十一、CSS继承

写css时与文字相关的样式可以作用到其子标签上，但默认情况下布局相关的样式不能，但可以设置继承属性inherit值
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width:px;height:300px;border:1px red solid;color:red;font-size:30px;}
        /* p{border:inherit;} */
    </style>
</head>
<body>
    <div>
        <p>这是CSS继承</p>
    </div>
</body>
</html>

三十二：CSS优先级

(一）相同样式优先级

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

（二）内部样式与外部样式

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

（三）单一样式优先级

style行间>id>class>tag>*>继承
另外，权重代表着等级：

type行间：1000
ID：100
class：10
tag：1
…

（四）!important

提升样式优先级，非规范类方式，不建议使用，并且不能对继承的属性进行优先级的提升

（五）标签+类>单类优先级

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{color:red;}
        div.box{color:blue;}/* 这是标签加类 */
    </style>
</head>
<body>
    <div class="box">标签加类优先级</div>
</body>
</html>

（六）群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高。（只与单一选择器相比，和其他class等选择器不在一等级，没法比）

（七）层次优先级

权重比较：比较两层次的权重的和
约分比较：上下两层标签进行同类选择器的约分，最后结果再比较。
注：层次选择器尽量写三层以内

三十三：CSS盒子模型

（一）盒子结构

组成：content（物品）->padding（填充物）->border（盒子）->margin（盒子之间的间距）->

content：内容区域 width和height组成的
padding:调节内边距，也可以对单边进行填充,padding-left/right/top/bottom
当我们只写一个值，是上下左右边都赋值一样的值
两个值，是上下，左右边分别赋值
四个值，上右下左边按顺序分别赋值
margin：调节外边距,也可以对单边进行填充,margin-left/right/top/bottom
当我们只写一个值，是上下左右边都赋值一样的值
两个值，是上下，左右边分别赋值
四个值，上右下左边按顺序分别赋值
注：1、背景颜色回填充到margin以内的所有区域，包括边框，不过边框颜色会覆盖住
2、文字只能在content 添加
3、padding不能为负数，但margin可以
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{width:200px;height:200px;background:red;
        border:1px blue solid;
        padding-left:30px;
        margin:20px;}
        #box2{width:200px; height:200px;background:green;}
    </style>
</head>
<body>
    <div id="box">这是盒子</div>
    <div id="box2">这是盒子2</div>
</body>
</html>

（二）盒子尺寸box-sizing

可以改变盒子模型的展示形态

默认值：
1、content-box:width、height->content
2、border-box:width、height->content、padding、border
使用场景：（原本content自己所占的宽高变为content、padding、border总共的宽高）
1、有限定区域时，不用计算各部分所占的值
2、解决一些%与数值的计算问题
例：

    <style>
        #box{width:200px;height:200px;background:red;
        border:1px blue solid;
        padding:30px;
        box-sizing:border-box;}
    </style>

（三）CSS盒子问题

margin叠加问题：当给两个盒子同时添加上下外边距的时候，就会出现叠加问题（左右不会出现此问题）会取上下值中较大的值作为间距。
解决办法：
1、bfc规范：以后学
2、想办法只给一个元素添加间距
margin 传递问题：只出现在两个人=盒子嵌套结构中，且只有margin-top会有传递的问题，其他三个方向没有此问题
解决办法：
1、bcf规范
2、给父容器加边框（不加边框的情境实现不了）
3、子元素的margin换成父容器的padding
盒子margin自适应问题：只有左右自适应可以，上下不可以
解决方法在第二大部分
不设置content的现象（不设置width ,weight 对盒子的影响）
跟父元素保持一致，即使添加了内边距与边框也不影响。

例：问题一二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<!--     <style>
        #box1{width:100px;height:100px;background:red;margin-bottom:30px}
        #box2{width:100px;height:100px;background:blue;margin-top:30px}
    </style> -->

<!--     <style>
       #box1{width:200px;height:200px;background:red;}
       #box2{width:100px;height:100px;background:blue;margin-top:100px}
    </style> -->
<!-- 盒子嵌套问题解决3 -->
<style>
    #box1{width:200px;height:100px;background:red;padding-top:100px;}
    #box2{width:100px;height:100px;background:blue;}
 </style>
</head>
<body>
<!--     <div id="box1">盒子问题1</div>
    <div id="box2">盒子问题2</div> -->

    <div id="box1"><div id="box2"></div></div>
    
</body>
</html>

例：不设置content现象

<!-- 不设置content的现象 -->
 <style>
     #box1{width:300px;height:300px;background:red;}
/*      #box2{width:300px;height:100px;background:blue;padding-left:30px;border-left:10px black solid;} */
/* 解决方法width */
#box2{height:100px;background:blue;padding-left:30px;border-left:10px black solid;}
</style>
</head>
<body>
    <div id="box1">
        <div id="box2">文字</div>
    </div>
    
</body>
</html>

三十四、HTML标签

（一）分类

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

按类型划分

块block

如：div、p、ul、li、h…
特性：
1、独占一行
2、支持CSS的所有样式
3、不写宽的时候，跟父元素的宽相同
4、所占区域是矩形

行内/内联inline

如:span、a、em、strong、img…
特性：
1、并排挨在也一起
2、有些样式不支持.如：width,height,某些方向上的margin与padding
3、不写宽的时候，宽由内容决定
4、所占区域不一定是矩形
5、内联标签之间会有空隙。
解决方法（但一般不解决）：①把标签写在同一行就可以消除空隙
②在CSS找到他们的父标签加上font-size:0;,再在内联标签上加上font-size:16px;

内联块inline—block

input、select…
特性：
1、挨在一起
1、支持宽高
3、有空隙

按内容划分

会有一部分叠加

流内容flow

元数据metadata

分区sectioning

标题heading

措辞phrasing

嵌入的embedded

互动的interactive

学习网址：https://html.spec.whatwg.org/multipage/dom.html

按显示划分

替换元素：

浏览器根据元素的标签和属性决定元素的具体显示内容
如：img、input…

非替换元素：

将内容直接告诉浏览器将其显示出来
如：div、h、p…

问1：如何改变显示框类型？（不推荐）
答：改变显示框类型在css用display
可设置的值：

block
inline
inline-block
none（啥也不显示）

问2：怎么查询标签类型？
答：浏览器开发者工具—elements—input—styles

问3：diaplay:none与visibility:hidden隐藏的区别？
答：显示框类型display:none是不占空间的隐藏
而visibility:Hidden占空间

例: 问1与问2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/*     div{width:100px;height:100px;background:red;display:inline-block;}
    span{width:100px;height:100px;background:red;display:block;} */
    /* input{display:none;} */



        #box1,#box2{width:100px;height:100px;background:red;display:block;}
       /*  #box1{display:none;} */
        #box1{visibility:hidden;}
    </style>
</head>
<body>
<!--     <div>问题一</div>
    <div>问题一</div>
    <span>问题一</span>
    <span>问题一</span>
    <input type="text">
 -->

     <div id="box1">问题3.1</div>
     <div  id="box2">问题3.2</div>

（二）标签嵌套规范

块标签能嵌套内联标签
块标签不一定能嵌套块标签（部分）
内联标签不能嵌套块标签（a除外，a标签是透明的会被忽略的，为了给块加链接）
a不能嵌套a

三十五、CSS的溢出隐藏overflow

overflow-x,overflow-y:针对x,y轴的设置

visible:默认
hidden:隐藏超出框架的内容
scroll:框内出现滚动条，用于展示多余部分
auto:内容少时不出现滚动条，内容多时出现。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/*         div{width:100px;height:200px;border:2px black solid;overflow:hidden;} */
/*         div{width:100px;height:200px;border:2px black solid;overflow:scroll;} */
/*         div{width:100px;height:200px;border:2px black solid;overflow:auto;} */
        div{width:100px;height:200px;border:2px black solid;overflow-y:auto;overflow-x:scroll;}
    </style>
</head>
<body>
    <div>溢出隐藏 溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏 溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏 溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏 溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏 溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏 溢出隐藏溢出隐藏溢出隐藏溢出隐藏
        溢出隐藏 溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏 溢出隐藏溢出隐藏溢出隐藏溢出隐藏
            

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

三十六、CSS透明度与手势

（一）透明度：opacity

取值：0（透明，占空间）~1（不透明）
注：包括的子内容也会改变

        #div1{width:100px;height:100px;background:red;opacity:0.5;}

问：如何只改变背景的透明度？
答：CSS为背景颜色添加样式时用 rgba（x,x,x,x）其中第四个数值就是透明度的意思

#div2{width:100px;height:100px;background:rgba(255,0,0,0.5);}

（二）手势cursor

default:默认
系统其他鼠标样式
自定义鼠标样式:
1、准备图片，必须是.cur、.ico、格式
2、代码

cursor:url(图片地址),auto;

三十七、最大、最小宽高

mini-width、mini-height：最小宽高，当内容少时是最小值，当内容变多会自适应变大。（即宽高大于等于数值）
max-width、max-height：最大宽高，当内容多时是最大值，当内容变少会自适应变小。（即宽高小于等于数值）
%单位换算：根据父容器进行换算。

问：一个容器怎么适应屏幕的高？
答：容器加height:100%;body:1000%;html:100%;
一般写成：
html,body{height:100%;}
.contrainer{height:100%;}

三十八、CSS默认样式

（一）默认样式

没有默认样式的标签：div、span…
有默认样式：
1、body->margin:8px
2、h1->margin：上下21.440px
font-weight:bold
3、p->margin：上下16Px
4、ul->margin:上下16px
-> padding:左40px
->默认点：list-style：disc

问：怎么通过调试台查看是否有默认样式？
答：调试台—点击调控台中的标签—下方的属性是否会出现数值

（二）重置样式CSS rest

法一
因为大多数有默认样式的都是margin, padding

*(margin:0;padding:0;)

优点：不用考虑哪些标签有margin和padding
缺点：稍微地影响性能（解决：前面再加上他们的标签body,p,h1,ul*(margin:0;padding:0;) ）
法二用none消除然后再添加想要的样式
例：删除列表前面的点

ul{list-style:none;}

例：

a{text-decoraction:none;color:#666;}

法三：针对图片加入后会默认为内联的类型，图片底部与基线对齐，而不是底线，所以图片与边框底部会有空隙。
对此，有两种代码解决

img{display:block;}

img{vertical-align:bottom;}

写具体页面时或一个布局效果时的顺序

1、写结构
2、css重置样式
3、写具体样式

三十九、CSS浮动float

（一）定义

文档流是文档中可显示对象在排列时所占用的位置（如：块是上下，内联是左右）

(二）特性

可以脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动元素进行排列
浮动的元素不会再影响父容器，它已经脱离文档了

（三）取值

right、left、none
例：

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

（四）注意事项

只影响后面的元素
内容默认提升半层，不会被浮动的元素遮盖。（浮动元素提升一层）
浮动元素不加宽的时候，默认宽度由内容决定
父容器装不下并排的浮动元素时，浮动元素会自动换行排列
另外地，当第一排元素高度不统一时，换行排列的元素会在与上一排最后的元素对齐后放置在最凹进去的下方。
浮动式主要为块添加的

（五）如何清除浮动影响

1、上下排列：clear属性

上下排列时，后面的块会因为在一层而出现在第一行，用clear可以使后面的块回到他的位置，而且浮动的元素还是在第二层
可选值：left,right,both（两者均清除）

2、嵌套排列时

父元素不受浮动元素影响，当父元素不设置宽高时，会瘪掉。

固定宽高
这是可以固定宽高，但不推荐，因为固定，没有了自适应的效果
父元素浮动
令两者在同一层次，父元素仍受子元素影响，但不推荐，因为这样父元素后面的元素也会受影响。
overflow：hidden属于BFC规范，不太推荐，因为如果子元素想溢出，那么会受影响
display:inline-block;属于BFC规范，不推荐，会影响后面的子元素
设置空标签：不推荐，会多添加一个标签，利用上下排列时清除浮动影响的方法，撑开父标签而不受影响
after伪类：和空标签同理

.xxx:after{content:"";clear:both;display:block;}

（六）浮动练习

问：背景如何叠加？
答：用逗号隔开，再加一个url即可，先写的在上面
问：如何利用PS测量距离？
答：去B站