html+css第三节

最新推荐文章于 2024-07-23 16:18:27 发布

m0_74110356

最新推荐文章于 2024-07-23 16:18:27 发布

阅读量123

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_74110356/article/details/127603576

版权

html+css第三节

一、 css选择器
- 1.ID选择器（第二节）
- 2.class选择器（第二节）
- 3.标签选择器（TAG选择器）
- 4.群组选择器（分组选择器）
- 5.通配选择器
- 6.层次选择器
- 7.属性选择器
- 8.伪类选择器
二、CSS样式继承
- 1.文字相关的样式可以被继承
- 2.布局样式是不能被继承的
三、CSS优先级
- 1.相同样式优先级
- 2.内部样式与外部样式
- 3.单一样式优先级
- 4.！important
- 5.标签+类与单类
- 6.群组优先级
- 7.层次优先级
四、css 盒子模型
- 1.content : 内容区域
- 2.padding : 内边距（内填充）
- 3.margin：外边距（外填充）
- 4.box-sizing
- 5.盒子模型的问题
- 6.margin自适居中
- 7、不设置content的现象
五、标签分类
- 1.按类型
- 2.按内容
- 3.按显示
六、显示框类型
- 1.display
七、标签嵌套规范
- 1.块可以嵌套内联
- 2.块标签不一定可以嵌套块标签
- 3.内联是不能嵌套块的
八、溢出隐藏
- 1.overflow
九、透明度与手势
- 1.透明度
- 2.rgba
- 3.cursor
十、最大最小宽高
- 1.min-width、min-height
- 2.max-width、max-height
十一、css默认样式
- 1.类型
十二、css reset
- 1.css reset：
十三、float浮动
- 1.文档流
- 2.float特性
- 3.float取值
- 4.float注意点
- 5.消除float浮动
- 6.示例

一、 css选择器

1.ID选择器（第二节）

2.class选择器（第二节）

3.标签选择器（TAG选择器）

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

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

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

    <style>
    /* #div{background:red;} 
    #div{background:blue;}   */
   /*  .box{background: red;} */
   /* p.box{background: red;} */
  /*  .content{font-size: 30px;background: blue;} */
  div,#text,.title{background: red;}
    </style>
</head>
<body>
    <!-- <div id="div1">块</div>
    <div id="div2">块</div>
    <div id="div3">块</div> -->
   <!--  <div class="box">块</div>
    <div class="box">块</div> -->

   <!--  <div class="box content">块</div>
    <div class="box content">块</div>
    <p class="box">段</p>
 -->
 <div>块</div>
 <P id="text">段</P>
 <h2 class="title">标题</h2>

网页显示

5.通配选择器

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

 *{border:1px red solid;}

网页显示

6.层次选择器

1.后代：M N { }

<!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>
    </style>
</head>
<body>
 <ul>
    <li></li>
    <li></li>
    <li></li>
 </ul>
 <ol>
    <li></li>
    <li></li>
    <li></li>
 </ol>
</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    ul li{ border: 1px red solid;}
    </style>
</head>
<body>
 <ul>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
    <li></li>
 </ul>
 <ol>
    <li></li>
    <li></li>
    <li></li>
 </ol>
</body>
</html>

网页显示

2.父代：M>N { }

  <style>
    #list > li{ border: 1px red solid;}
    </style>
</head>
<body>
 <ul id="list">
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li></li>
    <li></li>
 </ul>
 <ol>
    <li></li>
    <li></li>
    <li></li>
 </ol>

网页显示

3.兄弟：M~N{ }
注：当前M下面的所有兄弟N标签

<!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~h2{background: red;}
    </style>
</head>
<body>
    <div>块</div>
    <p>段</p>
    <h2>标题</h2>
</body>
</html>

网页显示

4.相邻：M+N{ }
当前M相邻的N标签

<!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+h2{background: red;}
    </style>
</head>
<body>
    <div>块</div>
    <h2>标题</h2>
    <p>段</p>
</body>
</html>

网页显示

7.属性选择器

M[ attr ] { }
1.*= ：部分匹配

<!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[class*=search]{background: red;}
    </style>
</head>
<body>
    <div>abcd</div>
    <div class="box">bcd</div>
    <div class="search">cd</div>
    <div class="search-button">d</div>
</body>
</html>

网页显示

2.起始匹配

<!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[class^=search]{background: red;}
    </style>
</head>
<body>
    <div>aaaa</div>
    <div class="box">bbbb</div>
    <div class="search">cccc</div>
    <div class="search-button">dddd</div>
    <div class="button-search">eeee</div>

</body>
</html>

网页显示

3.$=：结束匹配

<!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[class$=search]{background: red;}
    </style>
</head>
<body>
    <div>aaaa</div>
    <div class="box">bbbb</div>
    <div class="search">cccc</div>
    <div class="search-button">dddd</div>
    <div class="button-search">eeee</div>

</body>
</html>

网页显示
4.[ ] [ ] [ ]组合匹配

<!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[class][id]{background: red;}
    </style>
</head>
<body>
    <div>aaaa</div>
    <div class="box"id="elem">bbbb</div>
    <div class="search">cccc</div>
    <div class="search-button">dddd</div>
    <div class="button-search">eeee</div>

</body>
</html>

网页显示

属性选择器

8.伪类选择器

CSS伪类用于向某些元素增加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
1.
:link 访问前的样式（只能添加给a标签）
:vosited 访问后的样式（只能添加给a标签）
:hover 鼠标移入时的样式（可以添加给所有标签）
:active 鼠标按下时的样式（可以添加给所有标签）

<!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: 200px;height: 200px;background: red;}
    div:hover{background: blue;}
    div:active{background: green;}
    </style>
</head>
<body>
    <div></div>

</body>
</html>

注：
1.如果四个伪类都生效，一定要注意顺序：L V H A
2.一般网站只这样去设置： a{} a：hover{}

<!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>
    a:link{color: red;}
    a:visited{color: blue;}   
    a:hover{color: cyan;}
    a:active{color: yellow;}
    </style>
</head>
<body>
    <a href="#">链接</a>
</body>
</html>

注：一般的网站都只设置
a{ } ( link visited active) a：hover{ }

      <!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>
    a{color: red;}
    a:hover{color: cyan;}
    </style>
</head>
<body>
    <a href="#">链接</a>
</body>
</html>

：after、：before 通过伪类的方式给元素添加一个文本内容

<!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:after{content: "world";}
    </style>
</head>
<body>
    <div>hello</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   div:before{content: "world";}
    </style>
</head>
<body>
    <div>hello</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   div::after{content: "world";color: red;}
    </style>
</head>
<body>
    <div>hello</div>
</body>
</html>

网页显示
3.：checked、：disabled ：focus 都是针对表单元素的

<!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>
   :disabled{width: 100px;height: 100px;}
   :focus{background: red;}
    </style>
</head>
<body>
    <input type="checkbox">
    <input type="checkbox"checked>
    <input type="checkbox"disabled>
    <input type="text">
</body>
</html>

网页显示
4.：nth-of-type（）、：nth-child（）

<!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>
    li:nth-of-type(3){background: red;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

网页显示
角标是从1开始的，1表示第一项，2表示第二项 | n值----从0到无穷大（适用于隔行换色）

<!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>
    li:nth-of-type(2n+1){background: red;}
    li:nth-of-type(2n){background: blue;}
</style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

网页显示

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

<!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>
    li:first-of-type{background: red;}
    li:last-of-type{background:blue;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

网页显示

：only-of-type、：only-child

<!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>
    li:only-of-type{background: red;}
    </style>
</head>
<body>
    <ul>
        <li></li>
    </ul>
</body>
</html>

网页显示

二、CSS样式继承

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

<!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: 300px;border: 1px red solid;color: red;font-size: 30px;}
    </style>
</head>
<body>
    <div>
        <p>段落</p>
    </div>
</body>
</html>

网页显示

2.布局样式是不能被继承的

默认是不能被继承的，但是可以设置继承属性 inherit 值

<!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: 300px; border: 1px red solid; color: red; font-size: 30px;}
    p{border: inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

网页显示

三、CSS优先级

1.相同样式优先级

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

<!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{color: red;}
    div{color:blue ;}
    </style>
</head>
<body>
    <div>块</div>
</body>
</html>

网页显示

2.内部样式与外部样式

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

<!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>
    <link rel="stylesheet" href="./bass.css">
    <style>
    div{color: red;}
    </style>
</head>
<body>
    <div>块</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div{color: red;}
    </style>
    <link rel="stylesheet" href="./bass.css">
</head>
<body>
    <div>块</div>
</body>
</html>

网页显示

3.单一样式优先级

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

<!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>
    #elem{color: blue;}
    </style>
</head>
<body>
    <div id="elem" style="color: red;">块</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
    div{color: red;}
    </style>
    <link rel="stylesheet" href="./bass.css"> -->
    <style>
    #elem{color: blue;}
    .box{color: red;}
    </style>
</head>
<body>
   <!--  <div id="elem" style="color: ;">块</div> -->
   <div id="elem" class="box">块</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
    div{color: red;}
    </style>
    <link rel="stylesheet" href="./bass.css"> -->
    <style>
   /*  #elem{color: blue;} */
    .box{color: red;}
    div{color: green;}
    </style>
</head>
<body>
   <!--  <div id="elem" style="color: ;">块</div> -->
   <div id="elem" class="box">块</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
    div{color: red;}
    </style>
    <link rel="stylesheet" href="./bass.css"> -->
    <style>
   /*  #elem{color: blue;} */
    /* .box{color: red;} */
    div{color: green;}
    *{color: red;}
    </style>
</head>
<body>
   <!--  <div id="elem" style="color: ;">块</div> -->
   <div id="elem" class="box">块</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=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
    div{color: red;}
    </style>
    <link rel="stylesheet" href="./bass.css"> -->
    <style>
   /*  #elem{color: blue;} */
    /* .box{color: red;} */
    *{color:red ;}
    body{color: blue;}
    </style>
</head>
<body>
   <!--  <div id="elem" style="color: ;">块</div> -->
   <div id="elem" class="box">块</div>
</body>
</html>

网页显示
注：style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1

4.！important

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

<!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{color: red;}
    </style>
    <link rel="stylesheet" href="./bass.css"> -->
    <style>
   /*  #elem{color: blue;} */
    /* .box{color: red;} */
    #elem{color: red ;}
    *{color: green !important;}
    </style>
</head>
<body>
    <div id="elem" style="color:blue ;">块</div>
</body>
</html>

网页显示

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=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
    div{color: red;}
    </style>
    <link rel="stylesheet" href="./bass.css"> -->
    <style>
   /*  #elem{color: blue;} */
    /* .box{color: red;} */
    div.box{color: red;}
    .box{color: aqua;}
    </style>
</head>
<body>
    <div class= "box">块</div>
</body>
</html>

网页显示

6.群组优先级

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

<!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{color: red;}
    </style>
    <link rel="stylesheet" href="./bass.css"> -->
    <style>
   /*  #elem{color: blue;} */
    /* .box{color: red;} */
    div{color: blue;}
    div,p{color:red;}
    </style>
</head>
<body>
    <div class="box">块</div>
    <p>段落</p>
</body>
</html>

网页显示

7.层次优先级

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

四、css 盒子模型

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

1.content : 内容区域

width和height 组成的

2.padding : 内边距（内填充）

网页显示

网页显示
只写一个值：30px （上下左右）
写两个值： 30px 40px （上下、左右）
写四个值：30px 40px 50px 60px（上、右、下、左）
单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom

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

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

<!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>
     #box{width: 200px;height: 200px;background: red;border: 10px blue 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>
</html>

网页显示
注：
1.背景颜色会填充到margin以内的区域。（不包括margin区域）
border: 10px transparent solid
2.文字会在content区域。
3.padding不能出现负值，margin是可以出现负值。

网页显示

4.box-sizing

box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）| border-box
盒尺寸，可以改变盒子模型的展示形态。
默认值： content-box：width、height → content
border-box：width、height → content padding border
场景：
1.不需要再去计算一些值
2.解决一些100%的问题

<!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>
    #box{
        width: 200px ;height: 200px; background: red;border: 10px blue solid;
        padding: 30px 50px;
        box-sizing: content-box;
    }   
    input{width:100% ;padding:30px;box-sizing: border-box;} 
    </style>
</head>
<body>

    <div id="box">这是一个盒子</div>
    <input type="text">
</body>
</html>

网页显示

5.盒子模型的问题

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

<!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;height: 200px;background: red;margin-bottom: 30px;}
    #box2{width: 200px;height: 200px;background: blue;margin-top: 30px;}
    </style>
</head>
<body>
    <div id="box1" ></div>
    <div id="box2"></div>
    
</body>
</html>

网页显示
解决方案：
1.BFC规范
2.想办法只给一个元素添加间距。

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

<!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;height: 200px;background: red;}
    #box2{width: 100px;height: 100px;background: blue;margin-top: 100px;}
    </style>
</head>
<body>
    <div id="box1" >
         <div id="box2"></div>
    </div>     
</body>
</html>

网页显示
解决方案：
1.BFC规范
2.给父容器加边框。

#box1{width: 200px;height: 200px;background: red;border: 1px black solid;}
    #box2{width: 100px;height: 100px;background: blue;margin-top: 100px;}

网页显示

3.margin换成padding

#box1{width: 200px;height: 100px;background: red;padding-top: 100px;}
    #box2{width: 100px;height: 100px;background: blue;}

6.margin自适居中

<!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>
     #box{width: 400px;height: 100px;background: red;margin:0 auto ;}   
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

网页显示
扩展：
margin左右自适应是可以的，但是上下自适应是不行的。

7、不设置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>Document</title>
    <style>
    /*  #box{width: 400px;height: 100px;background: red;margin:0 auto ;}  */  
    #box1{width: 300px;height: 300px;background: red;}
    #box2{height: 100px;background: blue;color:white;padding-left: 30px; border-left: 10px black solid;}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">内容</div>
</body>
</html>

网页显示

五、标签分类

1.按类型

block：块 div、p、ul、li、h1…
特性：
1.独占一行
2.支持所有样式
3.不写width时与父元素的width相同
4.所占区域是一个矩形网页显示

inline：内联 span、a、em、strong、img…
特性：
1.挨在一起
2.有些样式不支持，例如 width、height、margin、padding
3.不写宽的时候，宽度由内容决定
4.所占区域不一定执行
5.内联标签之间会有空隙，原因:换行产生的
inline-block：内联块 input、select…
1.挨在一起，但是支持度高
注：布局一般用块标签，修饰文本一般用内联标签

2.按内容

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

3.按显示

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

 <img src="./img/散兵.png" alt="">
  <img src="./img/散兵.png" alt="">

非替换元素：将内容直接告诉浏览器，将其显示出来。
div、h1、p…

六、显示框类型

1.display

block

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

网页显示

inline

网页显示

inline-block
网页显示
none

<!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: 100px;height: 100px;background: red;display: inline-block;}  
    span{width: 100px;height: 100px;background: red;display:inline-block;}  
    input{display: none;}
    </style>
</head>
<body>
    <div>块一</div>
    <div>块二</div>
    <span>内联一</span>
    <span>内联二</span>
    <input type="text">
</body>
</html>

网页显示
注：display：none与 visibility：hidden区别
display:none 不占空间的隐藏
visibility:hidden 占空间的隐藏

#box1,#box2{width: 100px;height: 100px;background: red}
    #box1{display: none;}

网页显示

#box1,#box2{width: 100px;height: 100px;background: red}
    #box1{visibility: hidden;}

网页显示

七、标签嵌套规范

ul li
dl dt dd
table tr td

1.块可以嵌套内联

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

特殊：
错误的写法

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

2.块标签不一定可以嵌套块标签

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

特殊：
错误的写法

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

3.内联是不能嵌套块的

错误的写法：

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

特殊：
正确的写法

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

八、溢出隐藏

1.overflow

visible:默认
hidden

div{width: 300px;height: 200px;border: 1px black solid;overflow: hidden;}

网页显示

scroll
网页显示

auto
网页显示

网页显示
x轴，y轴
overflow-x、overflow-y针对两个轴分别设置
div{width: 300px;height: 200px;border: 1px black solid;overflow-y: auto;overflow-x: scroll;}

网页设置

九、透明度与手势

1.透明度

opacity : 0(透明)~1（不透明）
0.5（半透明）
网页显示

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

2.rgba

rgba（）：0~1

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

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

3.cursor

default：默认箭头
网页显示
实现自定义手势：
准备图片：.cur .ico

十、最大最小宽高

1.min-width、min-height

网页显示

2.max-width、max-height

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

body{height: 500px;}     
   #box1{width: 200px;height: 200px;background: red;}  
        #box2{width: 100%;height: 80%;background:blue ;}

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

十一、css默认样式

1.类型

有些标签右默认样式，有些标签没有默认样式。
没有默认样式:
div、span、…
有默认样式：
body→marign：8px
h1→margin：上下21.440px
p→margin：上下 16px
ul→margin：上下 16px padding：左 40px
默认值：list-style：disc
a→ text-decoration underline；

十二、css reset

1.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：#666；}
网页显示

网页显示

img{display：block；}
问题的现象：图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字成线对齐的。
vertical-align:baseline; 基线对齐方式，默认值
img{vertical-align: bottom;} 解决方式是推荐的

 <!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{list-style: none;}
    a{text-decoration: none;color: #999;} 
    a:hover{text-decoration: underline;color: red;}   */ 
    div{border: 1px black solid;}
    img{vertical-align: bottom;}
    </style>
</head>
<body>
  <!--   <div>块</div>
    <span></span>
    <h1></h1>
    <p></p>
    <ul>
        <li></li>
    </ul>
    <a href="#">链接</a> -->
    <div>
        <img src="./img/散兵.png" alt="">
    </div>
</body>
</html>

写具体页面的时候或一个布局效果的时候：
1.写结构
2.css重置样式
3.写具体样式
css reset初始化设置

十三、float浮动

1.文档流

文档流是文档中可显示对象在排列中所占用的位置。
脱离文档流，延迟父容器靠左或靠右进行排列。
left、right、none

<!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>
        body{border: 1px black solid;}
    #box1{width: 100px;height: 100px;background: blue;float: left;}
    #box2{width: 200px;height: 200px;background: red;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

网页显示

2.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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{border: 1px black solid;}
    #box1{width: 100px;height: 100px;background: blue;float: left;}
    #box2{width: 200px;height: 200px;background: red;float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

网页显示

3.float取值

left
right
none（默认）

4.float注意点

1.只会影响后面的元素
2.内容默认提升半层
网页显示

3.默认宽根据内容决定
网页显示

4.换行排列

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;}
    li:nth-of-type(1){height: 120px;}
    li:nth-of-type(2){height: 140px;}

网页显示

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=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    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;}
    li:nth-of-type(1){height: 120px;}
    li:nth-of-type(2){height: 140px;}
    span:last-of-type{float: left;}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <span>aaaa</span><span>bbbb</span>
</body>
</html>

网页显示

5.消除float浮动

1.利用clear属性清楚float浮动
left、right、both
2.固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果

#box1{width: 200px;height: 200px;border:1px
        black  solid;}
    #box2{width: 100px;height: 200px;background: red;float: left;}

3.父元素浮动：不推荐，因为父容器浮动也会影响后面的元素
4.overflow:hidden(BFC规范)，如果有子元素想溢出，那么会受到影响
5.display：inline-block(BFC规范)，不推荐，父容器会影响后面的元素
网页显示

6.设置空标签：不推荐，会多添加一个标签

<!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>
       /*  body{border: 1px black solid;} */
    #box1{width: 200px;;border:1px black solid;}
    #box2{width: 100px;height: 200px;background: red;float: left;}
    .clear{clear:both}
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
        <div class="clear">空</div>
    </div>
    aaaaaa    
</body>
</html>

网页显示

7.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>
       /*  body{border: 1px black solid;} */
    #box1{width: 200px;;border:1px black solid;}
    #box2{width: 100px;height: 200px;background: red;float: left;}
    .clear::after{content: '';clear: both;display: block;}
    </style>
</head>
<body>
    <div id="box1"class="clear">
        <div id="box2"></div>
    </div>
    aaaaaa    
</body>
</html>

6.示例

<!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>
    *{margin: 0;padding: 0;}
    ul{list-style: none;}
    a{text-decoration: none;color:#666 ;}
    h1,h2,h3{font-size: 20px;}

    .l{float: left;}
    .r{float: right;}
    .clear::after{content: "";display: block;clear: both;}

    #main{width: 500px;margin: 40px auto;}
    #main.title{height: 30px;line-height: 30px;font-size: 18px;font-weight: bold;padding-left: 35px;}
    #main ul{overflow: hidden;margin-top: 10px;}
    #main li{margin-bottom: 20px;}
    #main .pic{width: 150px;}
    #main .pic img{margin: 6px;border: 1px black solid;}
    #main .content{ width: 300px;font-size: 18px;line-height: 25px;margin-left: 10px;}
    #main.content h2{font: size 20px; ; line-height: 30px;}
    #main.content p{font-size: 20px line-height 25px; }
    </style>
</head>
<body>
    <div id="main">
         <h2 class="title">原神</h2>
         <ul>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img/散兵.png"      width="120px"height="120px"  alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>散兵</h2>
                    <p>
                        我的愤怒，绝不平息。
                        <a href="#"></a> 
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img/钟离4.jpg" width="120px"height="120px" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>钟离</h2>
                    <p>
                        此世群魔诸神并起，我虽无意逐鹿，却知苍生苦楚，只愿荡涤四方，护得浮世一隅。   
                        <a href="#"></a> 
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="./img/公子2.jpg" width="120px"height="120px"  alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>公子</h2>
                    <p>
                        这个世界上有太多我们无能为力的事情，回不去的过去，无法预料的将来，以及那些那些再也不可能见到的人。      
                        <a href="#"></a> 
                    </p>
                </div>
            </li>
         </ul>
    </div>
</body>
</html>