web前端开发从学会了到学废了日记3

zkd1094692863

于 2022-11-04 20:02:20 发布

阅读量112

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/zkd1094692863/article/details/127693248

版权

十四、标签群组通配等选择器

1、标签选择器(TAG选择器)

css：div{}
html：< div >
使用场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中，如：层次选择器

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

css：div,p,span{}（用逗号隔开）
注：可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用，让css写起来更加简单灵活。

3、通配选择器

*{ }：div，ul，li，p，h1，h2······{}
注: 尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用
使用场景: 去掉所有标签的默认样式时

<style>
        /* div{ background: red;}
        #text{ background: red;}
        .title{ background: red;} */
        /* div , #text ,.title{ background: red;} */
        *{ border: red solid;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2>
</body>

十五、层次选择器

后代：M N
父子：M>N
兄弟：M～N（当前M下面的所有兄弟N标签）
相邻：M+N（当前M下面相邻的N标签）

 <head>  
    <style>
   /* ul li{border: 1px red solid;}后代选择 在ul中寻找li */
   /* ul>li{border: 1px red solid;} 父子选择*/
   /* div~h2{background:red;)兄弟选择器*/
    /* div+h2{background:red;} 相邻选择器*/
    </style>
</head>
<body>
    <ul>
        <li>
            <li></li>
            <li></li>
            <li></li>
        </li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <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元素选择满足多个属性的集合
注：= : 完全匹配
*= : 部分匹配
^= : 起始匹配
$= : 结束匹配
[ ][ ][ ] : 多个中括号组合匹配

<head>
   <style>
     /* div[class]{background: red;} */
     /* div[class=box]{background: red;}  */
     /* div[class*=search]{background: red;} */
     /* div[class^=search]{background: red;} */
     /* div[class$=search]{background: red;} */
     /* div[class][id]{background: red;} */
    </style>
</head>
<body>
    <div>aaaaa</div>
    <div class="box" id="elem">aaaaa</div>
    <div class="search">aaaaa</div>
    <div class="search-button">dddd</div>
    <div class="button-search">ffff</div>
</body>

十七、hover等伪类选择器

伪类选择器（M:伪类{}）
css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

:link【访问前的样式】只能添加给a标签
:visited 【访问后的样式】只能添加给a标签
:hover【鼠标移入时的样式】可以添加给所有的标签
active 【鼠标按下时的样式】可以添加给所有的标签
注:
1.link visited 只能给a标签加，hover和active可以给所有标签加。
2.如果四个伪类都失效，一定要注意顺序 : L V H A。
3.一般网站只这样去设置 : a{ } a:hover{ }。

 <head>
    <style>
        div{width:200px;height: 200px;background-color: red;}
        /* div:hover{background-color: blue;}
        div:active{background-color: green;} */
        a:link{color: red;}
        a:visited{color: blue;}
        a:hover{color: yellow;}
        a:active{color: green;}
    </style>
</head>
<body>
    <div>11 </div>
    <a href="这是一段链接"></a>
</body>

十八、after等伪类选择器

:after、:before 【通过伪类的方式给元素添加一些文本内容，使用content属性】
:checked、:disabled、:focus（输入框鼠标进入时改变）【都是针对表单元素的】

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

十九、结构伪类选择器

: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( )
隔行换色
设置角标为2n：偶数行
设置角标为2n+1:奇数行
nth-of-type()和nth-child()之间的区别
type：类型（在相同标签下作用）
child：孩子（在同一级下按顺序作用于标签）

二十、css样式的继承

文字相关的样式可以被继承（可以作用到副元素上，子元素是可以继承的）
布局（比如表格）相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性 inherit 值）

<style>
        div{ width:300px; height: 300px; border: 1px red solid;
             color: red; font-size: 30px;}
        p{ border:inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>

二十一、单一样式的优先级

1、相同样式优先级

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

2、内部样式与外部样式

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

3、单一样式优先级

style行间 > id > class > tag（标签） > * > 继承
注 :

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

二十二、important群组等优先级

！important
提升样式优先级，非规范方式，不建议使用。（无法提升继承的优先级）
标签+类与单类
标签+类 > 单类
群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高。

<head>
     <style>
  #elem{color:red !important}
    </style>
</head>
<body>
    <div id="elem" style="color:blue;">这是一个块</div>
</body>

二十三、层次的优先级

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{ }
注：ul和span优先级相同，.hello与.box的优先级相同，约去
则上方li p input{}，下方#elem{}，上方的权重大于下方的权重，所以第二个优先级大
尽量写三层以内，优化代码

二十四、css盒子模型

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

1.content

内容区域
width和heigt组成的

2.padding

内边距（内填充）
number：30px
单一样式只能写一个值
padding-left
padding-right
padding-top
padding-bottom
可单独设置，复合写法有先后顺序
只写一个值 30px（上下左右）
写两个值 30px 40px（上下，左右）
写四个值30px 40px 50px 60px（上右下左）

3.margin：外边距（外填充）

只写一个值 30px（上下左右）
写两个值 30px 40px（上下，左右）
写四个值30px 40px 50px 60px（上右下左）
单一样式只能写一个值
margin-left
margin-right
margin-top
margin-bottom

拓展

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

<style>
        #box{ width:200px; height:200px; background: red; border:10px transparent solid;
        padding : 30px 50px; margin: -10px;}
        #box2{ width: 200px; height: 200px; background: black; color:white;}
    </style>
</head>
<body>
    <div id="box">这是一个盒子</div>
    <div id="box2">又是一个盒子</div>
</body>

二十五、box-sizing改变盒模型

box-sizing 盒尺寸，可以改变盒子模型的展现形态
默认值: content-box : width、height -> content
border-box : width、height -> content padding border
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
取值为content-box(默认值) | border-box

使用场景:

1.不用再去计算一些值
2.解决一些100%的问题

 <head>
    <style>
        #box{ width: 200px;height: 200px;background: red;border:10px  blue solid;
        padding: 30px;margin: 50px;
    box-sizing:border-box;}
        
    </style>
</head>
<body>
   <div id="box">这是一个盒子</div>

二十六、盒模型之margin叠加问题

margin叠加
当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。（会取上下中值较大的作为叠加的值）
解决方案：
1、BFC规范
2、想办法只给一个元素添加间距。

  <head>
     <style>
        #box{ width: 200px;height: 200px;background: red;margin-bottom: 30px;}
        #box{ width: 200px;height: 200px;background: blue;margin-top: 20px;}
        
    </style>
</head>
<body>
   <div id="box1">这是一个盒子</div>
   <div id="box2">这是一个盒子</div>

二十七、盒模型之margin传递问题

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

解决方案：
1.BFC规范
2.给父容器加边框
3.margin换成padding（加给副元素，不是主元素）

  <head>
    <style>
        #box1{ width: 200px;height: 100px;background: red;padding-top: 100px}
        #box2{ width: 100px;height: 100px;background: blue;}
        
    </style>
</head>
<body>
   <div id="box">
       <div id="box2"></div>
   </div>

二十八、css盒子模型之扩展

1、margin自适应居中

margin左右自适应是可以的，但是上下自适应不行（会给其他样式产生冲突，若想实现上下自适应的话，需要在第二大部分进行学习）

<head>    
    <style>
        #box{ width: 400px;height: 100px;background: red;margin:0 auto;}/*居中*/
        
    </style>
</head>
<body>
   <div id="box"></div>
</body>

2、不设置content的现象

可以帮助我们节省很多代码资源
width,height不设置对盒子模型的影响
会自动去计算容器的大小，节省代码。

盒子模型的嵌套练习

<!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>

二十九、按类型划分标签

1、block：块（div、p、ul、li、h1…）

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

2、inline：内联（span、a、em、strong、img…）

挨在一起的
有些样式不支持，例如：width、height、margin（左右不支持，上下不支持）、padding
不写宽的时候，宽度由内容决定
所占的区域不一定是矩形
当两个内联标签写完后中间会有个空隙：换行产生空隙，可以通过修改样式解决

3、inline-block：内联（input、select…）

挨在一起，但是支持宽高
既有块的特性，又有内联的特性（存在空隙）
注：布局一般用块标签，修饰文本一般用内联标签

三十、按内容划分标签

Flow：流内容（包含了以下所有内容）
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的
https://www.w3.org/TR/html5/dom.html

三十一、按显示划分标签

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容，如：image、input…
非替换元素：将内容直接告诉浏览器，将其显示出来（只写标签就可以，不需要通过属性来操作）如：div、h1、p…

三十二、display显示框类型

display

block
inline
inline-block
none(隐藏)
display：none不占空间，visibility:hidden占空间的隐藏

div{width:100px；height:100px;background:red;display;inline;}

三十三、标签嵌套规范

1、块标签可以嵌套内联标签

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

2、块标签不一定能嵌套块标签，比如

<p>只能嵌套内联

3、内联是不能嵌套块的，除了

<a href="#">
<div></div>
</a>
------------
a不能嵌套

4、按照规范的标签

ul.li
dl,dt,dd
table,tr,td

三十四、overflow溢出隐藏

visible：默认
hidden（会对字进行剪切）
scoll（会出现滚动条x轴与y轴）
auto（只有y轴有滚动条，当内容多的时候出现，内容少不出现）
注：overflow-x，overflow-y针对两个轴分别设置

三十五、透明度与手势

1、opacity（占空间）

0（透明）～1（不透明）
0.5（半透明）
注：所有的字内容也会透明

  <head>  
    <style>
div{width: 100px;height: 100px;background: red;opacity: 0.5;}
    </style>
</head>
<body>
 <div>这是一个块</div>
 <p>这是一个段落</p>

2、rgba（）：0～1

注：可以只针对背景操作，不针对文字，不影响其他样式

 <head> 
    <style>
#div1{width: 100px;height: 100px;background: red;opacity: 0.5;}
#div2{width: 100px;height: 100px;background: rgba(255,0,0,0.5);;}
    </style>
</head>
<body>
 <div id="div1">这是一个块</div>
 <p>这是一个段落</p>
 <div id="div2">这又是一个块</div>
</body>

3、cursor:手势

4、default：默认箭头

5、自定义(cur,ico)

cursor:url(./img...ico)

三十六、最大最小宽高

min-width、max-width
min-height、max-height
注：强化对百分比单位的理解
%单位：换算->以父容器的大小进行换算的
注：一个容器怎么适应屏幕的高：容器加height：100%；body：100%；html：100%
写法：html,body{height:100%;}
. container{height:100%;}

三十七、css默认样式

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

没有默认样式：
div、span、…
没有默认样式：
body->margin:8px
h1…h6:->margin:上下 21.440px
p->margin:上下 16px
ul->margin:上下 16px padding:左 40px
默认点：list-style：disc
a->text-decoration:underline
注：有些默认样式对网页开发有利，有些不利

三十八、css重置样式（css reset）

简单的CSS reset

 *{ margin: 0; padding: 0;}
 优点:
 缺点:稍微的影响性能
 ul{ list-style: none;}
 a{ text-decoration: none; color: #666;}
 img{ display: block;}
 问题的现象: 图片跟容器底部有一些空隙。
 内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
 vertical-align: baseline; 基线对齐方式，默认值
 vertical-align: bottom; 解决方式是推荐的

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

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

三十九、float浮动概念及原理

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

四十、float注意点整理

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

四十一、清除float浮动（上下合集）

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

<head>
    <style>
       #box1{width: 100px;height: 100px;background: red;float:left}
       #box2{width: 200px;height: 200px;background: blue;clear: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>