CSS从入门到精通

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--关系：样式表   引入css文件-->
    <link rel="stylesheet" href="my.css">
</head>
<body>
<!--css-->
<p>这是p标签</p>

<!--行内式 -->
<div style="color: aqua; font-size: 30px">这是div标签</div>
</body>
</html>

my.css文件：

p{
    color: crimson;
}

2. 选择器

2.1 标签选择器

结构：标签名{ css属性名：属性值; }

作用：通过标签名，找到页面中所有这类标签，设置样式

注意点：

1.标签选择器选择的是一类标签，而不是单独某一个

2.标签选择器无论嵌套关系有多深，都能找到对应的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--关系：样式表   引入css文件-->
    <style>
        /*  选择器{}   */
        /*  标签选择器 就是以标签命名的选择器  */
        p{
            color: aquamarine;
        }
        /*  标签选择器 选中所有的这个标签都生效css   */
    </style>
</head>
<body>
<!--css-->
<p>这是p标签</p>
<p>这是ppp标签</p>
</body>
</html>

网页显示：

2.2 类选择器

结构：.类名{ css属性名：属性值；}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意点：

1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

2.类名可以由数字，字母，下划线，中划线组成，但不能以数字或者中划线开头

3.一个标签可以同时有多个类名，类名之间以空格隔开

4.类名可以重复，一个类选择器可以同时选中多个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .name{
      color: brown;
    }
    .size{
      font-size: 66px;
    }
  </style>
</head>
<body>
  <!--  类： 定义和使用才能生效-->
  <div class="name size">这是一个普通标签</div>
</body>
</html>

网页显示：

2.3 id选择器

结构：#id属性值{ css属性名：属性值； }

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意点：

1.所有标签上都有id属性值

2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

3.一个标签上只能有一个id属性值

4.一个id选择器只能选中一个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /* 定义id选择器 */
    #blue{
      color: blue;
    }
  </style>
</head>


<body>
  <div id="blue">这是一个标签</div>
</body>
</html>

网页显示：

2.4 通配符选择器

结构：*{ css属性名：属性值； }

作用：找到页面中所有的标签，设置样式

注意点：

1.开发中使用极少，只会在极特殊情况下才会用到

2.可以去除标签默认的margin 的 padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*  通配符选择器 */
    *{
      color: firebrick;
    }
  </style>
</head>
<body>
    <div>hhhhhhh</div>
    <p>dddddddddddd</p>
    <span>qqqqqqqqqqq</span>
</body>
</html>

网页显示：

2.5 后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

语法：选择器1 选择器2 {css }

结果：在选择器1所找到标签的后代（儿子、孙子、重孙子 )中，找到满足选择器2 的标签，设置样式

注意点：

1.后代包括：儿子、孙子、重孙子

2.后代选择器中，选择器与选择器之前通过空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
        /* 找到div的儿子p设置文字颜色*/
        /*  父选择器  后代选择器{}  */
      div p{
          color: brown;
      }
  </style>
</head>
<body>
      <p>这是一个p标签</p>
        <div>
            <p>这是儿子</p>
        </div>
</body>
</html>

网页样式：

2.6 子代选择器：>

作用：根据HTNL标签的嵌套关系，选择父元素子代中满足条件的元素

选择器语法： 选择器1 > 选择器2 {css}

结果：

在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

注意点：

1. 子代只包括：儿子

2. 子代选择器中，选择器与选择器之前通过> 隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
        /* 找到div的儿子p设置文字颜色*/
        /*  父选择器 >后代选择器{}  */
      div>a{
          color: brown;
      }
  </style>
</head>
<body>
      <div>
          <a href="">这是div里面的a</a>
          <p>
              <a href="">这是div里面的p里面的a</a>
          </p>
      </div>
</body>
</html>

网页展示：

2.7 并集选择器：，

作用：同时选择多组标签，设置相同的样式

选择器语法： 选择器1，选择器2 {css }

结果：

找到选择器1 和选择器2 选中的标签，设置样式

注意点：

1.并集选择器中每组选择器之间通过，分割

2.并集选择器中每组选择器可以是基础选择器或者复合选择器

3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
        /*  p div h1 文字变红*/
        /*  选择器1,选择器2{}  */
      p,div,h1{
          color: brown;
      }
  </style>
</head>
<body>
      <div> divdivdiv</div>
<p>ppppppp</p>
<h1>qqqqqqqqqq</h1>
<span>eeeeeeeeeee</span>
</body>
</html>

网页显示：

2.8 交集选择器：.

作用：选中页面中同时满足多个选择器的标签

选择器语法：选择器1.选择器2{ css }

结果：

找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

注意点：

1.交集选择器中的选择器之间是紧挨着的，没有东西分割

2.交集选择器中如果有标签选择器，标签选择器必须写在最前面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
        /* p 标签，而且添加了box类 */
        /*  选择器1.选择器2{}  */
        p.box{
            color: brown;
        }
  </style>
</head>
<body>
        <div class="box"> divdivdiv</div>
        <p class="box">ppppppp</p>
        <p>dhfivdknkodn </p>
        <h1>qqqqqqqqqq</h1>
        <span>eeeeeeeeeee</span>
</body>
</html>

网页显示：

2.9 伪类选择器：hover

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器：hover{css}

注意点：

1.伪类选择器选中的元素的某种状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
        /* 悬停的时候 文字颜色变红*/
        /*  选择器：hover{}  */
        p:hover{
            color: brown;
        }
  </style>
</head>
<body>
        <div class="box"> divdivdiv</div>
        <p class="box">ppppppp</p>
        <p>dhfivdknkodn </p>
        <h1>qqqqqqqqqq</h1>
</body>
</html>

网页展示：

3. 字体和文本样式

3.1 字体大小

属性名：font-size

取值：数字 + px

3.2 字体粗细

属性名：font-weight

取值：

关键字：

正常	normal
加粗	bold

纯数字：100~900的整百数

正常	400
加粗	700

注意点：

1.不是所有的字体都提供了九种粗细，因此部分取值页面中无变化

2. 实际开发中：正常、加粗两种取值使用最多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p{
      font-weight: normal;
    }
    div{
      font-weight: 700;
    }
  </style>
</head>
<body>
    <p>这是啥</p>
<div>你好呀，好的</div>
</body>
</html>

网页展示：

3.3 字体样式（是否倾斜）

属性名：font-style

取值：

正常：normal 默认值

倾斜：italic

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    p{
      font-weight: normal;
    }
    div{
      font-style: italic;
    }
  </style>
</head>
<body>
    <p>这是啥</p>
<div>你好呀，好的</div>
</body>
</html>

网页显示：

3.4 字体系列 font-family

属性名：font-family

常见字体： 具体字体1、具体字体2、具体字体3........字体系列

具体字体：微软雅黑、黑体、宋体

字体系列：sans-serif、serif 等

渲染规则：

1.从左到右按顺序查找，如果电脑中未安装该字体，则显示下一个字体

2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

1.如果字体名称中存在多个单词，推荐使用引号包裹

2.最后一项字体系列不需要引号包裹

3.网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

    div{
      font-family:宋体;
    }
    /* 如果用户没有安装微软雅黑字体 就按黑体显示，
    如果还没有黑体 就按照任意一种非衬线字体（sans-serif）显示 */
    p{
      font-family: 微软雅黑,黑体 sans-serif;
    }
  </style>
</head>
<body>
      <div>这是一个div标签</div>
      <p>这是一个p标签</p>
</body>
</html>

网页展示：

4.背景相关属性

4.1 背景颜色：background-color (bgc)

属性名：background-color (bgc)

属性值：颜色取值，关键字，rgb表示法，十六进制

注意点：

1.背景颜色默认值是透明：rgba(0,0,0,0)、transparent

2.背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般会在布局中先给盒子设置背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
        div{
            width: 400px;
            height: 400px;
            background-color: firebrick;
        }
  </style>
</head>
<body>
      <div>dic</div>
</body>
</html>

4.2 背景图片 background-image (bgi)

属性名：background-image (bgi)

属性值：background-image：url( " 图片路径" );

注意点：

背景图片中url中可以省略引号

背景图片默认是在水平和垂直方向平铺的

背景图片仅仅是指给盒子起到装饰效果，类似背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
        div{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            background-image: url("QQ图片.jpg");
        }
  </style>
</head>
<body>
      <div>dic</div>
</body>
</html>

4.3 背景平铺：background-repeat(bgr)

属性名：background-repeat(bgr)

属性值：

取值	效果
repeat	(默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
        div{
            width: 800px;
            height: 800px;
            background-color: aquamarine;
            background-image: url("QQ图片.jpg");
            background-repeat: no-repeat;
        }
  </style>
</head>
<body>
      <div>dic</div>
</body>
</html>

4.4 背景位置： background-position(bgp)

属性名： background-position(bgp)

属性值： background-position: 水平方向位置垂直方向位置；

注意点：

方向名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
        div{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            background-image: url("1.png");
            background-repeat: no-repeat;
            /*background-position: center center;*/
            background-position: 50px 50px;
        }
  </style>
</head>
<body>
      <div>dic</div>
</body>
</html>

网页显示：

4.5 背景相关属性连写形式

属性名：background

属性值：单个属性的合写，取值之间以空格隔开

书写顺序：推荐、 background: color image repeat position

省略问题：

可以按照需求省略

特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background:url()

注意点：

1.如果需要设置单独的样式和连写

要么把单独的样式写在连写下面

要么把单独的样式写在连写的里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
       /*不分先后顺序  背景色 背景图 背景图平铺 背景图位置 */
        div{
            width: 400px;
            height: 400px;
            background: aqua url("1.png") no-repeat center center;
        }
  </style>
</head>
<body>
      <div>dic</div>
</body>
</html>

4.6 img标签和背景图片的区别

img标签是一个标签，不设置宽高默认会以原尺寸显示

div标签+背景图片，需要设置div宽高因为背景图片只是装饰的CSS样式，不能撑开div标签

5. 元素显示模式

5.1 块级元素

显示特点：

1.独占一行

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

代表标签：

div、p、h系列、ul、li、dl、dt、dd、form

5.2 行内元素

显示特点：

1.一行可以显示多个

2.宽度，高度默认是由内容撑开

3.不可以设置宽高

代表标签：

a、span、b、u、i、s、strong、ins、em....

5.3 行内块元素

显示特点：

1.一行可以显示多个

2.可以设置宽高

代表标签：

input、textarea、button、select

5.4 元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

属性	效果	使用频率
display:block	转换为块级元素	较多
display:inline-block	转换为行内块元素	较多
display:inline	转换为行内元素	较少

6. CSS特性

6.1 继承性

特性：子元素有默认继承父元素样式的特点（子承父业）

可以继承的常见属性（文字控制属性都可以继承）

1. color

2.font-style、font-weight、font-size、font-family

3. text-indent、text-align

4. line-heignt

5. ..........

注意： 可以通过调试工具判断样式是否可以继承

a标签的color会继承失败

h 系列的 font-size 会继承失效

6.2 层叠性

特性：

1.给同一个标签设置不同的样式——>此时样式会层叠叠加——>会共同作用在标签上

2.给同一个标签设置相同的样式——>此时样式会层叠覆盖——>最终写在最后的样式会生效

注意点：

1.当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

6.3 优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式：

继承<通配符选择器< 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意点：

1.！importat写在属性值的后面，分号的前面！

2.！important不能提升继承的优先级，只要是继承优先级最低

3.实际开发中不建议使用important

7. 盒子模型

1.盒子概念

1.页面中的每一个标签，都可以看做是一个盒子，通过盒子的视角更方便的进行布局

2.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们称之为盒子

2.盒子模型

CSS中规定每个盒子分别由：内容区域( content )、内边距区域( padding )、边框区域( border )、外边距区域( margin )构成，这就是盒子模型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      div{
          width: 300px;
          height: 300px;
          background-color: brown;
          /*边框线*/
          border: 1px solid #000 ;
          /*内边距*/
          padding: 20px;
          /*外边距*/
          margin: 50px;
      }
  </style>
</head>
<body>
     <div>内容</div>
     <div>内容</div>
</body>
</html>

7.1 内容的宽与高

作用：利用width 和 height 属性默认设置是盒子内容区域的大小

属性：width / height

常见取值：数字+px

7.2 边框（border) -连写形式

属性：border

属性值：单个取值的连写，取值之间以空格隔开如： border:10px solid red;

solid ：实线、 dashed:虚线、 dotted:点线

7.3 边框（border)-单方向设置

场景：只给盒子的某个方向单独设置边框

属性名：border-方向名词 left 、 right 、bottom

属性值：连写的取值

7.4 边框（border)- 单个属性

作用：给设置边框粗细、边框样式、边框颜色效果

单个属性：

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	solid ：实线、 dashed:虚线、 dotted:点线
边框颜色	border-color	颜色取值

7.5 内边距（padding)

属性名：padding

属性值：数字+px

其后最多跟四个值:上右下左

三个值：上左右下

两个值：上下左右

顺时针转圈不够就看对面

7.6 内减模式

给盒子设置border与padding时，盒子会被撑大，如果不想可以手动计算或者使用内减模式。

属性名：box-sizing

属性值：border-box

box-sizing：border-box；

7.7 外边距 (margin)

用法与内边距（padding)一样

7.8 清除默认的内外边距

浏览器会默认给部分标签设置默认的内外边框，但一般项目开始前需要先清楚这些标签默认的内外边框，后续自己设置

body标签默认有 margin:8px

p标签默认有上下的margin

ul标签有默认的上下的margin和padding-left

解决方法： *{ margin:0

padding:0 }

7.9 版心居中

网页的有效内容位于中间

margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      div{
          width: 300px;
          height: 300px;
          background-color: brown;
          margin: 0 auto;
      }
  </style>
</head>
<body>
     <div>内容</div>
</body>
</html>

7.10 外边距折叠现象- 合并现象

垂直布局的块级元素，上下的margin会合并

结果：最终两者距离为margin的最大值

解决方法：只给其中一个盒子设置margin即可

7.11 外边距折叠现象- 塌陷现象

互相嵌套的块级元素，子元素的 margin-top会作用在父元素上

结果：导致父元素一起往下移动

解决方法：

1.给父元素设置 border-top 或者 padding-top （分隔父子元素的margin-top)

2.给父元素设置overflow:hidden

3.准换为行内块元素

4.设置浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      .father{
          width: 500px;
          height: 500px;
          background-color: black;
          overflow: hidden;
      }
      .son{
          width: 300px;
          height: 300px;
          background-color: aqua;
          margin-top: 50px;
      }

  </style>
</head>
<body>
     <div class="father">
         <div class="son"> son</div>
     </div>
</body>
</html>

7.12 行内元素的内外边距的问题

如果想通过 margin、padding 改变行内标签的垂直位置，无法生效

行内标签的 margin-top、margin-bottom、padding-top、padding-bottom无法生效

解决方法： 使用 line-height: 数字+px;

8. 结构伪类选择器

1.作用与优势：

1.作用：根据元素在HTML中结构关系查找元素

2.优势：减少对于HTML中类的依赖，有利于保持代码整洁

3.场景：常用于查找某父级选择器中的子元素

2.选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      /*第一个*/
      li:first-child{
        background-color: blue;
      }
      /*最后一个*/
      li:last-child{
        background-color: brown;
      }
      /*第二个*/
      li:nth-child(2){
        background-color: blueviolet;
      }
      /*倒数第二个*/
      li:nth-last-child(2){
          background-color: darkgoldenrod;
      }
  </style>
</head>

<body>
      <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
      </ul>
</body>
</html>

网页展示：

8.1 结构伪类-公式

8.2 伪元素

伪元素：一般页面中的非主体内容可以使用伪元素

区别：

1.元素：HTML设置的标签

2.伪元素：由CSS模拟出的标签结果

种类：

伪元素	作用
::before	在父元素内容的最前面添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点：

1.必须设置content属性才能生效

2.伪元素默认是行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .father{
      width: 300px;
      height: 300px;
      background-color: blueviolet;
    }
    .father::before{
        /*内容*/
        content: "小明，";
        color: brown;
        width: 30px;
        height: 30px;
        display: block;
    }
    .father::after{
        /*内容*/
        content: "在吗";
    }
  </style>

</head>
<body>
        <!--在这个父级里面创建子级标签-->
      <div class="father">你好</div>
</body>
</html>

网页显示：

9. 浮动

9.1 浮动作用

早期作用：图文环绕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*设置图文环绕*/
    img{
      float:left;
    }
  </style>
</head>
<body>
      <!--      图文环绕-->
      <img src="1.png" alt="">
      你好祭祀等级OKdojio得记错时间车内数据上年
      纪建瓯市单击单机局so机动车哦哦
      私家车叫你你才爽呢层输出数据从的简欧就是创
      建内四科就
      是侧搜丁上课超VN都快成浓稠是我的课上呢差可拟
      弄完成的水泥厂
      纪建瓯市单击单机局so机动车哦哦
      私家车叫你你才爽呢层输出数据从的简欧就是创
      建内四科就
      是侧搜丁上课超VN都快成浓稠是我的课上呢差可拟
      弄完成的水泥厂
</body>
</html>

网页显示：

现在的作用：网页布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*设置浮动*/
    div{
      width: 200px;
      height: 200px;
    }
    .one{
      background-color: brown;
      float: left;
    }
    .two{
      background-color: blue;
      float: left;
    }
  </style>
</head>
<body>
     <div class="one">one</div>
     <div class="two">two</div>
</body>
</html>

网页显示：

9.2 浮动的特点

1.浮动的标签会脱离标准流，在标准流中不占位置

2.浮动比标准流高半个级别，可以覆盖标准流中的元素

3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素有特殊的显示效果

1.一行可以显示多个

2.可以设置宽高

注意：浮动的元素不能通过text-align:center或者 margin:0 auto 居中

9.3 清除浮动

含义：清除浮动带来的影响，如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

原因：子元素浮动后脱标——>不占位置

目的：需要父元素有高度，从而不影响其他网页元素的布局

解决方法：

1.直接设置父元素的高度

2.额外标签法：在父元素内容的最后添加一个块元素，会添加的块级元素设置clear:both

3.单伪元素清楚法：用伪元素替代额外标签

4.双伪元素清除法

5.给父元素直接设置 overflow:hidden

10.定位

1.可以让元素自由的摆放在网页的任意位置

2.一般用于盒子之间的层叠情况

定位的常见应用场景：

· 1.可以解决盒子与盒子之间的层叠问题

定位之后的元素层级最高，可以层叠在其他盒子上面

2.可以让盒子始终固定在屏幕中的某个位置

10.1 使用定位的步骤

1.设置定位的方式

属性名：position

常见的属性值:

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

2. 设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

选取的原则一般是就近原则（离哪边近用哪个）

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

10.2 相对定位

介绍：相对于自己之前的位置进行移动

代码：position:reltive;

特点：

1.需要配合方位属性实现移动

2.相对于自己原来位置进行移动

3.在页面位置中占位置——>没有脱标

应用场景：

1.配合绝对定位组CP（子绝父相）

2.用于小范围的移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

      .box{
        position: relative;
        left: 100px;
        top: 200px;
        /*1. 占有原来的位置*/
        /*2.任然具有标签原有的显示模式特点*/
        /*3.改变位置参照以及原有的位置*/
        width: 200px;
        height: 200px;
        background-color: brown;
      }
  </style>

</head>
<body>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <div class="box">box</div>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
        <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
        <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>

</body>
</html>

网页显示：

10.3 绝对定位

介绍：相对于非静态的父元素进行定位移动

代码：position:absolute

特点：

1.需要配合方位属性实现移动

2.默认相对于浏览器可视区域进行移动

3.在页面中不占位置——>已经脱标

应用场景：

1.配合绝对定位组CP（子绝父相）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

      .box{
          /*先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位*/
          /*有父级，但父级没有定位，以浏览器窗口为参照物进行定位*/
        position: absolute;
        left: 100px;
        top: 200px;
          /*脱标*/
        width: 200px;
        height: 200px;
        background-color: brown;
      }
  </style>

</head>
<body>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <div class="box">box</div>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
        <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
        <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>
      <p>测试测试定位测试测试定位测试测试定位测试测试定位测试测试定位</p>

</body>
</html>

网页显示：

10.4 定位居中

使用子绝父相，让子盒子在父盒子中水平居中（父子任意宽度下都能实现）

代码：left:50%; margin-left: - （盒子宽度的一半）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

      .box{
        position: absolute;
        /*left :50% 整个盒子移动在浏览器偏右的位置*/
        left: 50%;
          /*把盒子想左侧移动：自己宽度的一半*/
        margin-left: -100px;
        top:50%;
        margin-top: -100px;

        width: 200px;
        height: 200px;
        background-color: brown;
      }
  </style>

</head>
<body>
      <div class="box">box</div>
</body>
</html>

网页显示：

10.5 固定定位

介绍：相对于浏览器进行定位移动

代码：position:fixed;

特点：

1.需要配合方位属性实现移动

2.相对于浏览器可视区域进行移动

3.在页面中不占位置——>已经脱标

应用场景：

1.让盒子固定在屏幕中的某个位置

<style>

      .box{
        position: fixed;
        top:0;
        left:0;

        width: 200px;
        height: 200px;
        background-color: brown;
      }
  </style>

10.6 元素层级问题

不同布局方式元素的层级关系：

标准流< 浮动 < 定位

不同定位之间的层级关系：

相对、绝对、固定默认层级相同

此时HTML中写在下面的元素层级更高，会覆盖上面的元素

11.装饰

11.1 垂直对齐

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

垂直对齐方式：

属性名：vertical-align

属性名：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

11.2 光标类型

场景：设置鼠标光标在元素上显示的样式

属性名：cursor

常见属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

      .box{
          /*手型*/
        /*cursor: pointer;*/
          /*工字型*/
          /*cursor: text;*/
          /*十字型*/
          cursor: move;
        width: 200px;
        height: 200px;
        background-color: brown;
      }
  </style>

</head>
<body>
      <div class="box">box</div>
</body>
</html>

11.3 边框圆角

让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px、百分比

原理：

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值看对角

常见应用：

画一个正圆：

1.盒子必须是正方形

2.设置边框圆角为盒子宽高的一半——>border-radius:50%

胶囊按钮：

1.盒子要求是长方形

2.设置——>border-radius:盒子高度的一半

11.4 溢出显示效果-overflow

溢出部分：指的是盒子内容部分所超出盒子范围的区域

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条.......

属性名：overflow

常见属性：

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条