三. CSS layout（布局）

作者: 小海怪的互联网 | 来源:发表于2020-09-20 20:42 被阅读0次

1.文档流（normal flow）

网页是一个多层的结构，一层摞着一层，通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层，这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列，

对于我们来元素主要有两个状态：

在文档流中
不在文档流中（脱离文档流）

元素在文档流中有什么特点：

块元素
- 块元素会在页面中独占一行(自上向下垂直排列)
- 默认宽度是父元素的全部（会把父元素撑满）
- 默认高度是被内容撑开（子元素）
行内元素
- 行内元素不会独占页面的一行，只占自身的大小
- 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列（书写习惯一致）
- 行内元素的默认宽度和高度都是被内容撑开

<!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>Document</title>
    <style>
        .box1{
            width: 100px;
            background-color: yellow;
        }

        .box2{
            width: 100px;
            background-color: red;
        }

        span{
            background-color: #bfa;
        }
    </style>
</head>
<body>
      <div class="box1">我是div1</div>
     <div class="box2">我是div2</div>

     <span>我是span1</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
     <span>我是span2</span>
</body>
</html>

2.盒模型（box model）

盒模型、盒子模型、框模型（box model）

CSS将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置，每一个盒子都由一下几个部分组成：

内容区（content）

内容区（content），元素中的所有的子元素和文本内容都在内容区中排列

内容区的大小由width 和 height两个属性来设置:
- width 设置内容区的宽度
- height 设置内容区的高度
边框（border）

边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部，边框的大小会影响到整个盒子的大小。

要设置边框，需要至少设置三个样式：
- 边框的宽度 border-width
- 边框的颜色 border-color
- 边框的样式 border-style

<!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>Document</title>

    <style>
        .box1{ 
            /* 内容区（content），元素中的所有的子元素和文本内容都在内容区中排列  内容区的大小由width 和 height两个属性来设置
                        width 设置内容区的宽度
                        height 设置内容区的高度          
             */
            width: 200px;
            height: 200px;
            background-color: #bfa;

            /* 边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部,边框的大小会影响到整个盒子的大小
                要设置边框，需要至少设置三个样式：
                    边框的宽度 border-width
                    边框的颜色 border-color
                    边框的样式 border-style
             */
             border-width: 10px;
             border-color: red;
             border-style: solid;
        }
    </style>
</head>
<body>
     <div class="box1"></div>   
</body>
</html>

内边距（padding）
外边距（margin）

2.1 盒子模型边框

边框

边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style

<!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>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
             /* 
             border-width: 10px; 
                默认值，一般都是 3个像素
                border-width可以用来指定四个方向的边框的宽度
                    值的情况
                        四个值：上 右 下 左
                        三个值：上 左右 下
                        两个值：上下 左右
                        一个值：上下左右
                    
                除了border-width还有一组 border-xxx-width
                    xxx可以是 top right bottom left
                    用来单独指定某一个边的宽度

                    
             */
             /* border-width: 10px; */
             /* border-top-width: 10px;
             border-left-width: 30px; */

            color: red;


             /* 
                border-color用来指定边框的颜色，同样可以分别指定四个边的边框
                    规则和border-width一样

                border-color也可以省略不写，如果省略了则自动使用color的颜色值
              */
             /* border-color: orange red yellow green;
             border-color: orange; */


            /* 
                border-style 指定边框的样式
                    solid 表示实线
                    dotted 点状虚线
                    dashed 虚线
                    double 双线

                    border-style的默认值是none 表示没有边框

             */
             /* border-style: solid dotted dashed double;
             border-style: solid; */

             /* border-width: 10px;
             border-color: orange;
             border-style: solid; */

             /* 
                border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求

                除了border以外还有四个 border-xxx
                    border-top
                    border-right
                    border-bottom
                    border-left
              */
              /* border: solid 10px orange; */
              /* border-top: 10px solid red;
              border-left: 10px solid red;
              border-bottom: 10px solid red; */

              border: 10px red solid;
              border-right: none;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

2.2 盒子模型内边距（padding）

[图片上传失败...(image-b9d374-1600438374210)]

内边距（padding）

内容区和边框之间的距离是内边距
一共有四个方向的内边距：

padding-top
padding-right
padding-bottom
padding-left

内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上

一个盒子的可见框的大小，由内容区内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算

padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width 一样

<!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>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px orange solid;

            /* 
                内边距（padding）
                    - 内容区和边框之间的距离是内边距
                    - 一共有四个方向的内边距：
                        padding-top
                        padding-right
                        padding-bottom
                        padding-left

                    - 内边距的设置会影响到盒子的大小
                    - 背景颜色会延伸到内边距上

                一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定，
                    所以在计算盒子大小时，需要将这三个区域加到一起计算
             */

             /* padding-top: 100px;
             padding-left: 100px;
             padding-right: 100px;
             padding-bottom: 100px; */

             /* 
                padding 内边距的简写属性，可以同时指定四个方向的内边距
                    规则和border-width 一样
              */
              padding: 10px 20px 30px 40px;
              padding: 10px 20px 30px ;
              padding: 10px 20px ;
              padding: 10px ;
        }

        .inner{
            width: 100%;
            height: 100%;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="inner"></div>
    </div>
</body>
</html>

2.3盒子模型外边距（marging）

外边距（margin）

外边距不会影响盒子可见框的大小
但是外边距会影响盒子的位置

一共有四个方向的外边距：

margin-top 上外边距，设置一个正值，元素会向下移动
- 默认情况下设置margin-right不会产生任何效果
- 下外边距，设置一个正值，其下边的元素会向下移动
- 左外边距，设置一个正值，元素会向右移动

margin也可以设置负值，如果是负值则元素会向相反的方向移动

元素在页面中是按照自左向右的顺序排列的，
所以默认情况下如果我们设置的左和上外边距则会移动元素自身
而设置下和右外边距会移动其他元素
margin的简写属性:
margin 可以同时设置四个方向的外边距，用法和padding一样
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>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px red solid;

            /* 
                外边距（margin）
                    - 外边距不会影响盒子可见框的大小
                    - 但是外边距会影响盒子的位置
                    - 一共有四个方向的外边距：
                        margin-top
                            - 上外边距，设置一个正值，元素会向下移动
                        margin-right
                            - 默认情况下设置margin-right不会产生任何效果
                        margin-bottom
                            - 下外边距，设置一个正值，其下边的元素会向下移动
                        margin-left
                            - 左外边距，设置一个正值，元素会向右移动

                        - margin也可以设置负值，如果是负值则元素会向相反的方向移动

                    - 元素在页面中是按照自左向右的顺序排列的，
                        所以默认情况下如果我们设置的左和上外边距则会移动元素自身
                        而设置下和右外边距会移动其他元素

                    - margin的简写属性
                        margin 可以同时设置四个方向的外边距 ，用法和padding一样

                    - margin会影响到盒子实际占用空间
             */

             /* margin-top: 100px;
             margin-left: 100px;
             margin-bottom: 100px; */

             /* margin-bottom: 100px; */
             /* margin-top: -100px; */
             /* margin-left: -100px; */
             /* margin-bottom: -100px; */

             /* margin-right: 0px; */

             margin: 100px;
        }

        .box2{
            width: 220px;
            height: 220px;
            background-color: yellow
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

2.4 盒子模型的水平方向布局

<!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>Document</title>
    <style>
        .outer{
            width: 800px;
            height: 200px;
            border: 10px red solid;
        }

        .inner{
            /* width: auto;  width的值默认就是auto*/
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin-right: auto;
            margin-left: auto;
            /* margin-left: 100px;
            margin-right: 400px */
            /* 
                元素的水平方向的布局：
                    元素在其父元素中水平方向的位置由以下几个属性共同决定“
                        margin-left
                        border-left
                        padding-left
                        width
                        padding-right
                        border-right
                        margin-right

                    一个元素在其父元素中，水平布局必须要满足以下的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）

                0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
                0 + 0 + 0 + 200 + 0 + 0 + 600 = 800


                100 + 0 + 0 + 200 + 0 + 0 + 400 = 800
                100 + 0 + 0 + 200 + 0 + 0 + 500 = 800
                    - 以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
                        - 调整的情况：
                            - 如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足
                    - 这七个值中有三个值和设置为auto
                        width
                        margin-left
                        maring-right
                        - 如果某个值为auto，则会自动调整为auto的那个值以使等式成立
                            0 + 0 + 0 + auto + 0 + 0 + 0 = 800  auto = 800
                            0 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 600
                            200 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 400

                            auto + 0 + 0 + 200 + 0 + 0 + 200 = 800  auto = 400


                            auto + 0 + 0 + 200 + 0 + 0 + auto = 800  auto = 300

                        - 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
                        - 如果将三个值都设置为auto，则外边距都是0，宽度最大
                        - 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
                            所以我们经常利用这个特点来使一个元素在其父元素中水平居中
                            示例：
                                width:xxxpx;
                                margin:0 auto;



             */
        }
    </style>
</head>
<body>

    <div class="outer">

        <div class="inner"></div>

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

2.5 盒子模型的垂直方向布局

<!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>Document</title>

    <style>
        
        .outer{
            background-color: #bfa;
            height: 600px;
            /* 
                默认情况下父元素的高度被内容撑开
             */
        }

        .inner{
            width: 100px;
            background-color: yellow;
            height: 100px;
            margin-bottom: 100px;
            
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 
                子元素是在父元素的内容区中排列的，
                    如果子元素的大小超过了父元素，则子元素会从父元素中溢出
                    使用 overflow 属性来设置父元素如何处理溢出的子元素

                    可选值：
                        visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
                        hidden 溢出内容将会被裁剪不会显示
                        scroll 生成两个滚动条，通过滚动条来查看完整的内容
                        auto: 根据需要生成滚动条，水平和垂直

                overflow-x: 单独处理水平方向
                overflow-y: 单独处理垂直方向
             */
            overflow: auto;

            
        }

        .box2{
            width: 100px;
            height: 400px;
            background-color: orange;
        }
    
    </style>
</head>
<body>
    <!-- <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
    </div> -->

    <div class="box1">
            在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。 这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地䀹着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花草上。 我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，蝴蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。 枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。夜半，没有别的人，我即刻听出这声音就在我嘴里，我也即刻被这笑声所驱逐，回进自己的房。灯火的带子也即刻被我旋高了。 后窗的玻璃上丁丁地响，还有许多小飞虫乱撞。不多久，几个进来了，许是从窗纸的破孔进来的。他们一进来，又在玻璃的灯罩上撞得丁丁地响。一个从上面撞进去了，他于是遇到火，而且我以为这火是真的。两三个却休息在灯的纸罩上喘气。那罩是昨晚新换的罩，雪白的纸，折出波浪纹的叠痕，一角还画出一枝猩红色的栀子。 猩红的栀子开花时，枣树又要做小粉红花的梦，青葱地弯成弧形了……我又听到夜半的笑声；我赶紧砍断我的心绪，看那老在白纸罩上的小青虫，头大尾小，向日葵子似的，只有半粒小麦那么大，遍身的颜色苍翠得可爱，可怜。 我打一个呵欠，点起一支纸烟，喷出烟来，对着灯默默地敬奠这些苍翠精致的英雄们。 一九二四年九月十五日。

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

2.6 盒子模型外边距的折叠

垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象

兄弟元素
- 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
  
  特殊情况：
  如果相邻的外边距一正一负，则取两者的和
  如果相邻的外边距都是负值，则取两者中绝对值较大的
- 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
父子元素
- 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
- 父子外边距的折叠会影响到页面的布局，必须要进行处理（可以使用内边距的方法来处理，出现多余的高度，改变其高度或将其不相邻）

<!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>Document</title>
    <style>
        .box1 , .box2{
            width: 200px;
            height: 200px;
            font-size: 100px;
        }

        /* 
            垂直外边距的重叠（折叠）
                - 相邻的垂直方向外边距会发生重叠现象
                - 兄弟元素
                    - 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
                    - 特殊情况：
                        如果相邻的外边距一正一负，则取两者的和
                        如果相邻的外边距都是负值，则取两者中绝对值较大的

                    - 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理


                - 父子元素
                    - 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
                    - 父子外边距的折叠会影响到页面的布局，必须要进行处理
        
         */

        .box1{
            background-color: #bfa;

            /* 设置一个下外边距 */
            margin-bottom: 100px;
        }

        .box2{
            background-color: orange;

            /* 设置一个上外边距 */
            margin-top: 100px;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* padding-top: 100px; */
            /* border-top: 1px #bfa solid; */
        }

        .box4{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }
    </style>
</head>
<body>

    <div class="box3">
        <div class="box4"></div>
    </div>

    <!-- <div class="box1"></div>
    <div class="box2"></div> -->
    
</body>
</html>

2.7 盒子模型行内元素的盒模型

行内元素的盒模型：

行内元素不支持设置宽度和高度(宽度高度由内容决定)
行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
行内元素可以设置border，垂直方向的border不会影响页面的布局
行内元素可以设置margin，垂直方向的margin不会影响布局

display 用来设置元素显示的类型

可选值：
- 1. inline 将元素设置为行内元素
  2. block 将元素设置为块元素
  3. inline-block 将元素设置为行内块元素
    
    行内块，既可以设置宽度和高度又不会独占一行如果有换行会出现空白格
  4. table 将元素设置为一个表格
1. none 元素不在页面中显示

visibility 用来设置元素的显示状态

可选值：

visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏不显示，但是依然占据页面的位置

<!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>Document</title>
    <style>
        .s1{
            background-color: yellow;

            /* 
                行内元素的盒模型
                    - 行内元素不支持设置宽度和高度
                    - 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
                    - 行内元素可以设置border，垂直方向的border不会影响页面的布局
                    - 行内元素可以设置margin，垂直方向的margin不会影响布局
             */
             /* width: 100px;
             height: 100px; */

             /* padding: 100px; */

             /* border: 100px solid red; */

             margin: 100px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        a{
            /* 
                display 用来设置元素显示的类型
                    可选值：
                        inline 将元素设置为行内元素
                        block 将元素设置为块元素
                        inline-block 将元素设置为行内块元素 
                                行内块，既可以设置宽度和高度又不会独占一行
                        table 将元素设置为一个表格
                        none 元素不在页面中显示

                visibility 用来设置元素的显示状态
                    可选值：
                        visible 默认值，元素在页面中正常显示
                        hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置
             */
            display: block;

            visibility: hidden;

            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>

    <a href="javascript:;">超链接</a>
    <a href="javascript:;">超链接</a>


    <span class="s1">我是span</span>
    <span class="s1">我是span</span>
    
    <div class="box1"></div>
</body>
</html>

2.8 默认样式

默认样式：
通常情况，浏览器都会为元素设置一些默认样式，默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面），选择一个

重置样式表：专门用来对浏览器的样式进行重置的
reset.css 直接去除了浏览器的默认样式
normalize.css 对默认样式进行了统一

<!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>Document</title>
    <!-- <link rel="stylesheet" href="./css/reset.css"> -->
    <link rel="stylesheet" href="./css/normalize.css">

    <!-- 
        重置样式表：专门用来对浏览器的样式进行重置的
            reset.css 直接去除了浏览器的默认样式
            normalize.css 对默认样式进行了统一

     -->
    <style>
        /* 
            默认样式：
                - 通常情况，浏览器都会为元素设置一些默认样式
                - 默认样式的存在会影响到页面的布局，
                    通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）
         */

        /* body{
            margin: 0;
        }

        p{
            margin: 0;
        }

        ul{
            margin: 0;
            padding: 0;
            /* 去除项目符号 * /
            list-style:none; 
        } */

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


        .box1{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    
<div class="box1"></div>

<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

</body>
</html>

reset.css

/* v2.0 | 20110126
  http://meyerweb.com/eric/tools/css/reset/ 
  License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

normalize.css

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

2.9 盒子的尺寸

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
   可选值：
    - content-box 默认值，宽度和高度用来设置内容区的大小
    - border-box 宽度和高度用来设置整个盒子可见框的大小
       width 和 height 指的是内容区 和 内边距 和 边框的总大小

<!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>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            padding: 10px;
            border: 10px red solid;
            /* 
                默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

                    box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
                        可选值：
                            content-box 默认值，宽度和高度用来设置内容区的大小
                            border-box 宽度和高度用来设置整个盒子可见框的大小
                                width 和 height 指的是内容区 和 内边距 和 边框的总大小
             */
            
            box-sizing: border-box;
        }
    
    </style>
</head>
<body>

    <div class="box1"></div>
    
</body>
</html>

2.10 轮廓和圆角

2.10.1 轮廓

outline: 10px red solid;

outline 用来设置元素的轮廓线，用法和border一模一样
轮廓和边框不同的点，就是轮廓不会影响到可见框的大小

2.10.2 阴影

box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局

默认情况下在元素的正下方和元素的大小一致

box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ;

第一个值水平偏移量设置阴影的水平位置正值向右移动负值向左移动
第二个值垂直偏移量设置阴影的垂直位置正值向下移动负值向上移动
第三个值阴影的模糊半径
第四个值阴影的颜色

2.10.3 圆角

border-radius: 用来设置圆角圆角设置的圆的半径大小

border-top-left-radius:

border-radius: 20px / 40px;

border-top-right-radius */
border-bottom-left-radius:
border-bottom-right-radius:
border-top-left-radius:50px 100px;

border-radius 可以分别指定四个角的圆角

四个值：左上右上右下左下
三个值：左上右上/左下右下
两个值：左上/右下右上/左下

将元素设置为一个圆形
border-radius: 50%;

<!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>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;

            /* box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局 
                第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
                第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
                第三个值 阴影的模糊半径
                第四个值 阴影的颜色
            */

            box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ; 

/* 

            outline 用来设置元素的轮廓线，用法和border一模一样
                轮廓和边框不同的点，就是轮廓不会影响到可见框的大小    
 */
            
        }

        /* .box1:hover{
            outline: 10px red solid;
        } */

        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;

            /* border-radius: 用来设置圆角 圆角设置的圆的半径大小*/

            /* border-top-left-radius:  */
            /* border-top-right-radius */
            /* border-bottom-left-radius:  */
            /* border-bottom-right-radius:  */
            /* border-top-left-radius:50px 100px; */

            /* 
                border-radius 可以分别指定四个角的圆角
                    四个值 左上 右上 右下 左下
                    三个值 左上 右上/左下 右下 
                    两个个值 左上/右下 右上/左下  
              */
            /* border-radius: 20px / 40px; */

            /* 将元素设置为一个圆形 */
            border-radius: 50%;
        }
    </style>
</head>
<body>

    <!-- <div class="box1"></div> -->

    <div class="box2"></div>
</body>
</html>

三. CSS layout（布局）

1.文档流（normal flow）

元素在文档流中有什么特点：

2.盒模型（box model）

2.1 盒子模型边框

2.2 盒子模型内边距（padding）

内边距（padding）

2.3盒子模型外边距（marging）

外边距（margin）

2.4 盒子模型的水平方向布局

2.5 盒子模型的垂直方向布局

2.6 盒子模型外边距的折叠

2.7 盒子模型行内元素的盒模型

行内元素的盒模型：

display 用来设置元素显示的类型

visibility 用来设置元素的显示状态

2.8 默认样式

reset.css

normalize.css

2.9 盒子的尺寸

2.10 轮廓和圆角

2.10.1 轮廓

outline: 10px red solid;

2.10.2 阴影

2.10.3 圆角

border-radius: 用来设置圆角圆角设置的圆的半径大小

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

三. CSS layout（布局）

1.文档流（normal flow）

元素在文档流中有什么特点：

2.盒模型（box model）

2.1 盒子模型边框

2.2 盒子模型 内边距（padding）

内边距（padding）

2.3盒子模型 外边距（marging）

外边距（margin）

2.4 盒子模型的水平方向布局

2.5 盒子模型的垂直方向布局

2.6 盒子模型 外边距的折叠

2.7 盒子模型 行内元素的盒模型

行内元素的盒模型：

display 用来设置元素显示的类型

visibility 用来设置元素的显示状态

2.8 默认样式

reset.css

normalize.css

2.9 盒子的尺寸

2.10 轮廓和圆角

2.10.1 轮廓

outline: 10px red solid;

2.10.2 阴影

2.10.3 圆角

border-radius: 用来设置圆角 圆角设置的圆的半径大小

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

2.2 盒子模型内边距（padding）

2.3盒子模型外边距（marging）

2.6 盒子模型外边距的折叠

2.7 盒子模型行内元素的盒模型

border-radius: 用来设置圆角圆角设置的圆的半径大小