盒子

文档流

<!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>
</head>
<body>
    
    <!-- 
        文档流(normal flow)
            -网页是一个多层结构,一层摞着一层
            -通过css可以分别为每一层来设置样式
            -作为用户来讲只能看到最顶上一层
            -这些层中,最底下的一层称为文档流,文档流是网页的基础
                我们所创建的元素默认都是在文档流中进行排列
            -对于我们来说元素主要有两个状态
                在文档流中
                不在文档流中(脱离文档流)
            -元素在文档流中有什么特点
                -块元素
                    块元素会在页面中独占一行
                    默认宽度是父元素的全部(会把父元素撑满)
                    默认高度是被内容撑开(子元素)

                -行内元素
                    行内元素不会独占页面一行,只占自身大小
                    行内元素在页面中自左向右水平排列,如果一行中不能容纳所有的行内元素
                        则元素会换到第二行继续自左向右排列(书写习惯一致)
     -->

     <div>我是div1</div>
     <div>我是div2</div>

     <span>我是span1</span>
     <span>我是span2</span>
</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>
        .box1{
            /* 
                内容区(content),元素中所有的子元素和文本内容都在内容区中排列
                    内容区大小由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>
    <!-- 
        盒模型 盒子模型 框模型(box mode)
            -css将我们页面中所有元素都设置为一个矩形的盒子
            -将元素设置为举矩形的盒子后,对页面的布局就变成了将不同的盒子摆放到不同的位置
            -每一个盒子都由以下几个部分组成
                内容区(content)
                内边距(padding)
                边框(border)
                外边距(margin)
     -->

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

盒子模型

(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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;

            /* 
            边框
                边框的宽度 border-width
                边框的颜色 border-color
                边框的样式 border-style
                
            */
            border-width: 10px;
            border-color: orange;
            border-style: solid;
            /* 
            border-width可以不写,默认值是三个像素
            border-width可以用来指定四个方向的边框宽度
                值的情况
                    四个值;上 右 下 左
                    三个值;上 左右 下
                    两个值;上下 左右
                    一个值;上下左右

            除了border-width还有一组border-xxx-width
                xxx可以是 top right bottom left
                用来单独指定某一条边的宽度

            (颜色和样式同理)
            border-color省略不写,默认是color值
            border-style指定边框样式
                solid 表示实线
                dotted 表示点状虚线
                dashed 虚线
                double 双线
            border-style省略不写就没有边框,默认值是none

            border简写属性,通过该属性可以同时设置边框所有的相关样式,并且没有顺序要求
            border:solid 10px orange(用空格隔开)

            除了border以外,还有四个border-xxx
                border-top
                border-right
                border-bottom
                border-left

             border-top:solid 10px orange
             border-right:solid 10px orange
             border-bottom:solid 10px orange
             border-left:solid 10px orange

             或者border:solid 10px orange
                border-top:none
            
            
            */
        }
    </style>
</head>
<body>
     <div class="box1"></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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border:10px orange solid;

            /* 
                内边距(padding)
                    -内容区和边框之间的距离是内边距
                    -一共有四个方向
                        padding-top
                        padding-right
                        padding-bottom
                        padding-left
                    -内边距的设置会影响到盒子的大小
                    -背景颜色会延伸到内边距上

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

             */

             /* 
             padding内边距简写属性,可以同时指定四个方向内边距
                规则和border-width一样 */
        }
    </style>
</head>
<body>
    <div class="box1"></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>
        .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; */
        
        }
        .box2{
            width: 220px;
            height: 220px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></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>
        .outer{
            width: 800px;
            height: 200px;
            border: 10px red solid;

        }
        .inner{
            /* width值默认是auto */
            width: 200px;
            height: 200px;
            background-color: #bfa;

            /* 
            元素的水平方向的布局
                元素在其父元素中水平方向的位置由以下几个属性共同决定
                 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=其父元素内容区的宽度(必须满足)

                以上等式必须成立,如果相加之后等式不成立,则称为过度约束,则等式会自动调整
                    -调整的情况;
                        -如果这七个值中没有为auto的情况,则浏览器会自动调整margin-right值以使等式满足

                -这七个值中有三个值可以设置为auto
                width
                margin-left
                margin-right
                -如果某个值为auto,则会自动调整为auto的那个值使等式成立

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

            
                */
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </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>
        .outer{
            background-color: #bfa;
            /* 
                默认情况下父元素的高度被内容撑开 */
        }

        .inner{
            height: 200px;
        }

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

            /* 
                子元素是在父元素的内容区中排列的,
                    如果子元素超过父元素,则子元素会从父元素中溢出
                    使用overflow属性来设置父元素如何处理溢出的子元素
                    
                    可选值
                        visible,默认值 子元素会从父元素中溢出,在父元素外部的位置显示
                        hidden 溢出内容会被裁剪不会显示
                        scroll 生成两个滚动条,通过滚动条来查看完整的内容
                        auto 根据需要生成滚动条
                        
                    overflow-x:单独处理水平方向
                    overflow-y:单独处理垂直方向
                    
            */
        }

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

   <div class="box1">
       <div class="box2"></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>

        .box1,.box2{
            width: 200px;
            height: 200px;
            font-size: 100px;

        }
        /* 
            垂直方外边距的重叠(折叠)
                -相邻的垂直方向外边距会发生重叠
                -兄弟元素:
                    -兄弟元素间的相邻垂直外边距会取两者之间的较大值
                    -特殊情况,如果相邻的外边距一正一负则取两者的和

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

        .box1{
            background-color: #bfa;
            /* 设置一个下外边距 */
            margin-bottom: 100px;

        }

        .box2{
            background-color: orange;
            /* 设置一个上外边距 */
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></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>
        .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 元素在页面中隐藏 不显示 但是依旧占据页面中的位置
             */

            visibility: hidden;

            display: inline-block;

            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>

默认样式

<!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="./css/normalize.css">
    <!-- 
        重置样式表,专门用来对浏览器的样式进行重置的
            reset.css直接去除了浏览器的默认样式
     -->
    <style>
        /* 
            默认样式;
                -通常情况下,浏览器都会为元素设置一些默认样式
                -默认样式的存在,会影响到页面的布局,通常情况下,
                    我们在编写网页时必须要去掉浏览器的默认样式(pc端的页面)

         */
         *{
             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>
    <p>我是一个段落</p>

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

    </ul>
</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>
        .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: content-box;
        }
    </style>
</head>
<body>
    <div class="box1"></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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;

            /* 
            box-shadow用来设置元素的阴影效果,阴影不会影响页面布局 
                第一个值 水平偏移量,设置阴影的水平位置 正值向右移动 负值向左移动
                第二个值 垂直偏移量,设置阴影的垂直位置 正值向下移动 负值向上移动
                第三个值 阴影的模糊半径
                第四个值 阴影的颜色
            */
            box-shadow: 0px 0px 20px rgba(0, 0, 0 .3) ;
            /* 
            
            outline 用来设置元素的轮廓线,用法和border一样
                轮廓和边框不同的点,就是轮廓不会影响可见框的大小*/
            
            
        }
        .box1:hover{
            outline:red 10px solid;

        }
    .box2{
        width: 200px;
        height: 200px;
        background-color: orange;
        /* 
        border-radius:用来设置圆角 圆角设置的圆的半径大小
        
        border-top-left-radius 10px ;
        border-top-right-radius: ;
        border-bottom-left-radius: ;
        border-bottom-right-radius: ; */
        /* 
            border-radius 可以分别指定四个角的圆角
                四个值 左上 右上 右下 左下
                三个值 左上 右上/左下 右下
                两个值 左上/右下 右上/左下
                
                
                */
    }
    </style>
</head>
<body>
    <!-- <div class="box1"></div> -->
    <div class="box2"></div>
</body>
</html>

Q.E.D.