CSS基础必备知识点03

最新推荐文章于 2022-07-29 23:59:40 发布

Milly_Liu

最新推荐文章于 2022-07-29 23:59:40 发布

阅读量166

点赞数

分类专栏：前端初级H5+C3

本文链接：https://blog.csdn.net/qq_38148024/article/details/102296808

版权

前端初级H5+C3 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

1、标准文档流

什么是标准文档流？
制作HTML网页和PS画图软件画图有本质上的区别：HTML网页在制作的时候都遵循一个“流”的规则：从左到右、从上到下；使用PS软件画图时，我们想在哪里画就可以在哪里画
标准文档流需要注意的事项：
- 空白折叠现象
  - 换行会造成空白，如何实现没有空白的现象：需要让这些元素放在同一行，让他们紧密相连。
- 高矮不齐，底部对齐

2、浮动

需求：
- 能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度！
  - 让多个元素排在同一行：行内元素的特性
  - 给这些元素设置宽度与高度：块级元素的特性
- 在标准文档流中的元素只有两种: 块级元素和行内元素。如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流（简称：脱标）。浮动可以让元素脱离标准文档流，就可以实现让多个元素排在同一行，并且可以设置宽高！浮动通过一个浮动属性来实现。

浮动属性float

float属性有两个值：left、right

浮动元素的特性：

浮动元素脱离了标准文档流，不再占用空间
可以把浮动元素理解为“漂”
浮动元素的层级要比标准文档流里面的元素层级高，它会将标准文档流中的元素压盖住
浮动元素会向左或者向右浮动（移动）
浮动元素遇到了父元素的边框线就停止浮动
浮动元素遇到上一个浮动元素就会停止浮动
浮动元素浮动以后，其父元素不会再包裹着浮动元素
将行内元素进行浮动，则这个行内元素会变成块级元素
以下案例实现将div中的3个div排成一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动</title>
    <style type="text/css">
        .box{
            width: 600px;
            border: 1px solid #000;
            margin-left: auto;
            margin-right: auto;
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /*增加浮动属性*/
            float: left;
        }
        .div2{
            width: 120px;
            height: 100px;
            background-color: #0f0;
            float: left;
        }
        .div3{
            width: 100px;
            height: 100px;
            background-color: #00f;
            float: right;
        }
    </style>

</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
</html>

行内元素进行浮动的案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内元素进行浮动</title>
    <style type="text/css">
        .box{
            width: 600px;
            border: 1px solid #000;
            margin-left: auto;
            margin-right: auto;
        }
        .s1{
            width: 100px;  /*设置浮动之前，设置宽高的命令是不起作用的*/
            height: 100px;
            background-color: #f00;
            float: left;
        }
        .s2{
            width: 100px; /*设置浮动之前，设置宽高的命令是不起作用的*/
            height: 100px;
            background-color: #0f0;
            float: left;
        }
        .s3{
            width: 100px; /*设置浮动之前，设置宽高的命令是不起作用的*/
            height: 100px;
            background-color: #00f;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="s1">文本1</span>
        <span class="s2">文本2</span>
        <span class="s3">文本3</span>
    </div>
</body>
</html>

浮动案例

网页中的导航栏: 可以使用ul>li和浮动来实现
补充知识点：body标签有一个默认的margin值（外边距），ul标签有一个默认的padding值（内填充），为不影响在页面中的排版布局，可以使用通用选择器来去除HTML中的所有标签的默认内填充与外边距。

*{
    margin:0px;
    padding:0px;
}

完整案例：

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>浮动案例</title>
      <style type="text/css">
          /*写CSS代码的第一步：都是清除HTML标签的默认的内填充与外边距*/
          *{
              margin: 0px;
              padding: 0px;
          }

          body{
              background-image: url(./img/haishui.gif);
          }
          .nav{
              width: 960px;
              height: 40px;
              margin-left: auto;
              margin-right: auto;
          }
          .nav ul{
              /*将列表前面的项目符号去除*/
              list-style: none;
          }

          .nav ul li{
              /*把每一个li标签进行向左浮动
              li本来是块级元素，将其浮动就可以让每一个li排列成一行
              */
              float: left;
              /*给每一个li标签设置一个宽度*/
              width: 120px;
              /*设置文本居中显示*/
              text-align: center;
              /*添加背景图片*/
              background-image: url(./images/title_bg.jpg);
              height: 40px;
              line-height: 40px;
          }

          /*美化超级链接*/
          a:link,a:visited{
              text-decoration: none;
              color:rgb(77, 211, 36);
          }
          a:hover{
              color: #f00;
          }

      </style>
  </head>
  <body>
      <div class="nav">
          <ul>
              <li><a href="#">网站栏目1</a></li>
              <li><a href="#">网站栏目2</a></li>
              <li><a href="#">网站栏目3</a></li>
              <li><a href="#">网站栏目4</a></li>
              <li><a href="#">网站栏目5</a></li>
              <li><a href="#">网站栏目6</a></li>
              <li><a href="#">网站栏目7</a></li>
              <li><a href="#">网站栏目8</a></li>
          </ul>
      </div>
  </body>
  </html>

清除浮动

注意：只要有浮动，那么久必须有清除浮动。
为什么要清除浮动？
- 因为经过浮动了元素，它会影响到它下面的元素的排版布局，还有浮动元素的父元素没有将浮动元素包裹着。

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>清除浮动</title>
      <style type="text/css">
          .box{
              width: 600px;
              border: 1px solid #000;  /*父元素的边框线，应该将以下三个元素包裹着，但是并没有*/
              margin-left: auto;
              margin-right: auto;
          }
          .box div{
              width: 100px;
              height: 100px;
          }
          .div1{
              background-color: #f00;
              float: left;
          }
          .div2{
              background-color: #0f0;
              float: left;
          }
          .div3{
              background-color: #00f;
              float: right;
          }
      </style>

  </head>
  <body>
      <div class="box">
          <div class="div1"></div>
          <div class="div2"></div>
          <div class="div3"></div>
      </div>
      <h2>浮动与清除浮动</h2>
  </body>
  </html>

只要浮动清除了，就不会影响到浮动元素的下面进行排版布局，浮动元素的父元素会将浮动元素从视觉上包裹着。

清除浮动的三种方法：

给浮动元素的父元素设置一个固定高度,但是这个方法一般不建议使用，因为一个元素的高度一般情况下不是手动设置的，它应该由其内容自动撑高。

使用清除浮动的样式属性clear，这个属性是专用于清除浮动的，有3个属性值：clear:left;清除左浮动，clear:right;清除右浮动，clear:both;两者都清除（常用）。

clear 属性的使用方法：一般用在最后一个浮动元素的下面，在最后一个浮动元素的下面新建一个空白的div，注意这个div里面什么内容都不要放，它只用于清除浮动。

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>清除浮动</title>
     <style type="text/css">
         .box{
             width: 600px;
             border: 1px solid #000;
             margin-left: auto;
             margin-right: auto;
         }
         .div1{
             width: 100px;
             height: 100px;
             background-color: #f00;
             float: left;
         }
         .div2{
             width: 100px;
             height: 100px;
             background-color: #0f0;
             float: left;
         }
         .div3{
             width: 100px;
             height: 100px;
             background-color: #00f;
             float: right;
         }
         /*使用清除浮动的样式属性*/
         .clear{
             clear: both;
         }
     </style>

 </head>
 <body>
     <div class="box">
         <div class="div1"></div>
         <div class="div2"></div>
         <div class="div3"></div>
     <!--在最后一个浮动元素后面新建一个空白的div用于清除浮动-->
         <div class="clear"></div>
     </div>
     <h2>浮动与清除浮动</h2>
 </body>
 </html>

使用overflow:hidden这个属性来清除浮动。

overflow属性的原意是用来将溢出的部分进行隐藏，但是它还可以用于清除浮动。一般用于将列表的浮动给清除。

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>清除浮动</title>
     <style type="text/css">
         ul{
             list-style: none;
         }
         ul li{
             float: left;
             border: 1px solid #f00;
         }
     </style>
 </head>
 <body>
     <ul style="overflow: hidden;">
         <!--给li标签的父元素设置一个overflow属性-->
         <li>栏目管理1</li>
         <li>栏目管理2</li>
         <li>栏目管理3</li>
         <li>栏目管理4</li>
         <li>栏目管理5</li>
         <!--这里使用新建空白div然后使用clear是错误的，因为ul里面只能有li-->
     </ul>  
 </body>
 </html>

3、盒子模型

什么是盒子？

盒子是用来存储物品的，一个盒子可以理解为一个快递的包裹：有内容+填充物+纸盒子。

如何理解css中的盒子？

在css中盒子的组成部分：内容（content）+内填充（padding）+边框（border）+外边距（margin）

一个盒子的主要属性包括：width、height、padding、border、margin

width：宽度，注意，这个宽度指的是盒子里面内容的宽度而不是盒子的宽度
height：高度，盒子中内容的高度
padding：内填充，指的是盒子里面的内容到盒子边框的距离
border：外边框，指的是盒子的外边框
margin：外边距，指的是盒子与盒子之间的间距

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>盒子模型</title>
     <style type="text/css">
         .box{
             width: 100px;/*盒子中内容的宽度*/
             height: 100px;/*盒子中内容的高度*/
             padding: 20px; /*内填充，内容到边框的距离*/
             border: 1px solid #f00; /*边框*/
             margin: 2px;/*外边距*/

         }
     </style>
 </head>
 <body>
     <div class="box">
         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
     </div>
 </body>
 </html>

如何计算一个盒子的总宽度？
- 一个盒子的总宽度=盒子里面内容的宽度+左右两边的填充+左右两边的边框线
  - 如上例当中，盒子的宽度=100+20×2+1×2=142px
- 盒子的总高度同理。
- 注意：一个盒子的高度一般是不用手动式设置的，因为一个盒子的高度一般是由其内容来决定的。

4、padding

padding为内填充，指的是盒子中内容到盒子边框的距离。padding有4个方向，所以能够分别描述这4个方向的padding，描述方式有2种，第一种叫小属性，第二种叫简写属性。

小属性
- padding-top:上内填充
- padding-right:右内填充
- padding-bottom:下内填充
- paddint-left:左内填充
padding简写属性：这个属性是有方向的，可以同时表示4个方向，这个属性是有顺序的，它的顺序是顺时针方向：上右下左。
- padding:10px; 表示上右下左四个方向的内填充都是10px
- padding:10px 20px;表示上下内填充10px，左右为20px
- padding:10px 20px 30px;表示上10px，左右为20px，下为30px
- padding:10px 20px 30px 40px;上10px ，右20px，下30px，左40px

5、margin

margin是外边距，指的是盒子与盒子之间的距离。margin也有4个方向，描述方法有两种：小属性和简写属性
- 小属性：
  - margin-top:上外边距
  - margin-right:右外边距
  - margin-bottom:下外边距
  - margin-left:左外边距
- margin简写属性：有方向，顺时针方向：上右下左。
  - margin:10px;上右下左都是10px
  - margin:10px 20px;上下10px，左右20px
  - margin:10px 20px 30px;上10px，左右20px，下30px
  - margin:10px 20px 30px 40px;上10px，右20px，下30px，左40px

margin注意事项

margin塌陷现象

什么是margin的塌陷现象：

在标准文档流中，竖直方向的margin值不叠加，它会取较大的值,如下例子中，竖直方向上两个div之间的距离不是60px，而是40px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>竖直方向的margin值不会叠加，它会取较大的值</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: #f00;
            margin-bottom: 20px;
        }
        .div2{
            background-color: #0f0;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

水平方向没有margin塌陷现象,如下例子中两个span之间的距离是60px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平方向的margin值不会有塌陷现象</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
        }
        .s1{
            background-color: #f00;
            margin-right: 20px;
        }
        .s2{
            background-color: #0f0;
            margin-left: 40px;
        }
    </style>
</head>
<body>
    <span class="s1">文本1</span><span class="s2">文本2</span>
</body>
</html>

浮动元素没有margin塌陷现象，如下例中，两个浮动元素div1和div2竖直方向的距离是60px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动元素不会有margin塌陷现象</title>
    <style type="text/css">
    .box{
        width: 100px;
        border: 5px solid #000;
        /*清除浮动*/
        overflow: hidden;
    }
    .box div{
        width: 100px;
        height: 100px;
    }
    .div1{
        background-color: #f00;
        float: left;
        margin-bottom: 20px;
    }
    .div2{
        background-color: #0f0;
        float: left;
        margin-top: 40px;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>
</html>

margin居中

margin值可以是auto，当左外边距和右外边距的值都是auto时，这个盒子就会水平居中。

注意：

使用margin来实现水平居中时，一定要有固定的宽度（给这个盒子设置一个宽度），只有块级元素能够实现水平居中，行内元素是不能实现居中的,因为行内元素没有固定的宽度，无法设置width属性，也就是说行内元素实现不了水平居中，要想实现行内元素的水平居中，可以在span外面包裹一个块级元素。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>margin居中</title>
   <style type="text/css">
       .box{
           width: 100px;/*如果该元素没有设置固定的宽度，
                       那么这个元素就会占据其父元素100%的宽度*/
           height: 100px;
           background-color: #f00;
           margin: 100px auto;
       }
   </style>

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

只有标准文档流中的盒子才可以使用margin来实现水平居中。如浮动元素不可以。
margin属性是用来实现盒子的水平居中，而不是文本的水平居中。

text-align属性实现的是文本的对齐方式设置，如果其值为center就表示水平居中，但是它不能实现盒子的水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin居中</title>
    <style type="text/css">
        .box{
            width: 600px;/*如果该元素没有设置固定的宽度，
                        那么这个元素就会占据其父元素100%的宽度*/
            height: 300px;
            border: 1px solid #f00;
            text-align: center;
            margin: 10px auto;
        }
        span{
            background-color: skyblue;
            margin: 100px auto;
        }
    </style>

</head>
<body>
    <div class="box">margin只能实现盒子的水平居中</div>
    <span>看看这个文本会在哪里</span>
</body>
</html>

margin需求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin需求</title>
    <style type="text/css">
    /*盒子嵌套盒子，内部的盒子距离外部的盒子有一定的距离。*/
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 500px;
            background-color: #0f0;
        }
        .content{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /*设置上边距不可行，会使得外边的盒子也会有相同的上边距*/
            margin-top:100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

解决上述问题有两种方法：
- 给其父元素设置边框线，但是这种方法不常用，因为边框一般是用于调试代码的，很少会给盒子设置边框。
- 是要善于使用父元素的padding，而不要使用子元素的margin
- 说明：margin这个属性的本意是用来描述兄弟与兄弟之间的关系，不是用于父子之间的关系，如果是要描述父子之间的关系，最好是给其父元素设置padding属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>margin需求</title>
    <style type="text/css">
    /*盒子嵌套盒子，内部的盒子距离外部的盒子有一定的距离。*/
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 500px;
            background-color: #0f0;
            /*border:1px solid #f00*/
            padding-top:100px;
        }
        .content{
            width: 100px;
            height: 100px;
            background-color: #f00;
            /*margin-top:100px; 设置上边距不可行，会使得外边的盒子也会有相同的上边距*/
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

6、border

边框三要素：粗细、线型、颜色。
语法格式： border:粗细线型颜色;
说明：边框的颜色可以省略不写。如果不写就表示边框的颜色是黑色的。粗细和线型两个属性值必须写，如果不写的话，就不会显示这个边框。
边框的线型：dotted（点状线）、dashed（虚线）、solid（实线）、double（双线）、groove、ridge、inset、outset。
边框的4个方向：
- border-top:上边框
- border-right:右边框
- border-bottom:下边框
- border-left:左边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>border</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            border-top: 10px solid #f00;
            border-right: 10px dotted #0f0;
            border-bottom: 10px dashed #00f;
            border-left: 10px solid #000;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Milly_Liu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础必备知识点03

1、标准文档流什么是标准文档流？制作HTML网页和PS画图软件画图有本质上的区别：HTML网页在制作的时候都遵循一个“流”的规则：从左到右、从上到下；使用PS软件画图时，我们想在哪里画就可以在哪里画标准文档流需要注意的事项：空白折叠现象换行会造成空白，如何实现没有空白的现象：需要让这些元素放在同一行，让他们紧密相连。高矮不齐，底部对齐2、浮动需求：能够实现...
复制链接

扫一扫

专栏目录