盒子模型

盒子大小的初始计算

盒子宽度 = 左边框 + 内容的宽度 + 右边框
盒子高度 = 上边框 + 内容的宽度 + 下边框

出现的问题
设置border之后,盒子尺寸会被撑大
解决
计算多余的大小,手动在内容中减去(手动内减)

<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: 190px;/* 这里设置的宽度其实是设置盒子内容区域的宽度 */
            height: 190px;
            background: pink;
            /* 添加边框  之后盒子的尺寸发生了变化
                盒子实际尺寸(宽度) = 左边框 + 内容的宽度 + 右边框
                                  = 5+190+5 
                                  = 200
                结论:设置border会把盒子撑大
                解决:使用手动内减的方式,也就是后面再把盒子内容区域 改为190px
            */
            border: 5px solid green;
        }
    </style>
</head>
<body>
    <div></div>
</body>

内边距padding

作用
设置边框与内容区域之间的距离
记忆规则
从上开始赋值,然后顺时针赋值,如果没有赋值的话,看对面的
只给某一方向设置
padding-方位词:像素值

<style>
        div{
            width: 100px;
            height: 100px;
            background: pink;
            /* 内边距 */
            /* padding: 10px; *//* 设置的是上右下左的内边距 */
            /* padding: 10px 20px; *//* 上下10  左右20 */
            /* padding: 10px 20px 30px; *//* 上10 右20 下30 左没有设置看对面20 */
            /* padding: 10px 20px 30px 40px; *//* 上10 右20 下30 左40  顺时针方向 */
            /* 记忆的规律:从上开始赋值,然后顺时针赋值,如果没有赋值的话,看对面的 */
            /* 只给左边设置内边距 */
            padding-left: 10px;
        }
    </style>

盒子大小的最终计算方式

盒子宽度 = 左边框 + 左内边距 + 内容的宽度 + 右内边距 + 右边框
盒子高度 = 上边框 + 上内边距 + 内容的宽度 + 下内边距 +下边框

出现的问题
设置padding之后,盒子尺寸也会被撑大
解决
计算多余的大小,手动在内容中减去(手动内减)

<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: 240px;/* 其实设置是内容区域的宽度 */
            height: 240px;/* 其实设置是内容区域的高度 */
            background: pink;
            /* 设置边框会撑大盒子 */
            border: 10px solid black;
            /* 设置内边距也会撑大盒子 */
            padding: 20px;
            /* 盒子的尺寸的终极计算公式
                    宽度= 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框
                        =  10 + 20 + 300 + 20 + 10 
                        =  360
                方式一:手动内减 将盒子的内容区域的宽高-60
            */
        }
    </style>
</head>
<body>
    <!-- 盒子的尺寸是300*300,背景是粉红色,边框是10黑实线,上下左右的内边距是20,怎么做 -->
    <div></div>
</body>

盒子尺寸自动内减

做法
给盒子设置属性 box-sizing: border-box;

好处
浏览器会自动计算多余大小,自动在内容区域中减去,比手动内减方便

 <style>
        div{
            width: 300px;/* 其实设置是内容区域的宽度 */
            height: 300px;/* 其实设置是内容区域的高度 */
            background: pink;
            /* 设置边框会撑大盒子 */
            border: 10px solid black;
            /* 设置内边距也会撑大盒子 */
            padding: 20px;
            /* 盒子的尺寸的终极计算公式
                    宽度= 左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框
                        =  10 + 20 + 300 + 20 + 10 
                        =  360
                方式二:自动内减
            */
            box-sizing: border-box;/* 浏览器会自动计算多余大小,自动在内容区域中减去 */
        }
    </style>
</head>
<body>
    <!-- 盒子的尺寸是300*300,背景是粉红色,边框是10黑实线,上下左右的内边距是20,怎么做 -->
    <div></div>
</body>

盒子不会被撑大的特殊情况

<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>
        .father{
            width: 200px;
            height: 200px;
            background: pink;
        }
        .son{
            /* 1,块级元素宽度不设置,默认占满父元素一行 */
            height: 100px;/* 高度是父元素的一半 */
            background: skyblue;
            /* 设置boder和pading看会不会被撑大 */
            border-left: 10px solid green;
            border-right: 10px solid green;
            padding: 0 20px;
            /* 原因:主要是我们没有设置子元素的宽度,他的内容宽度可以根据情况自动调节*/
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

外边距margin

作用
设置边框以为的,盒子与盒子之间的距离
记忆规则
从上开始赋值,然后顺时针赋值,如果没有赋值的话,看对面的
只给某一方向设置
margin-方位词:像素值

 <style>
        body{
            margin: 0;/* 去掉body默认外边距的影响 */
        }
        div{
            width: 100px;
            height: 100px;
            background: pink;
            /* 设置div的外边距 */
            /* margin: 10px; *//* 上右下左10 */
            /* margin: 10px 20px; *//* 上下10 左右20 */
            /* margin: 10px 20px 30px; *//* 上10 右20 下30  左20*/
            /* margin: 10px 20px 30px 40px; *//* 上10 右20 下30  左40*/
            /* 设置单一方向上的margin */
            margin-left: 20px;/* 盒子会往右边移动 */
        }
    </style>

清除默认的内边距

应用场景:浏览器会默认给部分标签设置默认的margin和padding
但是我们其实不是不需要的,一般在项目开始前就需要先清除这些标签的默认样式

例如:
body标签默认有margin : 8
p标签默认有上下margin
ul标签默认有上下的margin 和 padding-left

常见的两种设置方式
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
margin: 0;
padding: 0;
}
——————————
* {
margin: 0;
padding: 0;
}

<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{
            margin: 0;
        }
        p{
            margin: 0;
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
            margin: 0;
            padding: 0;
        }
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
     <p>我是段落</p>
     <p>我是段落</p>
     <p>我是段落</p>
     <p>我是段落</p>
     <p>我是段落</p>
     <ul>
         <li>无序列表</li>
         <li>无序列表</li>
         <li>无序列表</li>
         <li>无序列表</li>
         <li>无序列表</li>
         <li>无序列表</li>
         <li>无序列表</li>
         <li>无序列表</li>
         <li>无序列表</li>
         <li>无序列表</li>
     </ul>
</body>

外边距正常的情况

场景
水平布局的盒子,左右的margin正常,互不影响
结果
最终两者间距为左右margin的和

<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;
        }
        div{
            display: inline-block;
            width:300px;
            height: 300px;
        }
        .c1{
            background: red;
            margin-right: 100px;
        }
        .c2{
            background: blue;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div class="c1"></div><div class="c2"></div>
</body>

外边距合并的情况

场景
垂直布局的块级元素,上下的margin会合并
结果
最终两者的距离为margin的最大值
解决方法
避免就好
只给其中一个盒子设置margin就行

<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;
        }
        div{
            width:300px;
            height: 300px;
        }
        .c1{
            background: red;
            margin-bottom: 200px;
        }
        .c2{
            background: blue;
            /* margin-top: 100px; */
        }
    </style>
</head>
<body>
    <div class="c1"></div><div class="c2"></div>
</body>

外边距塌陷的情况

场景
互相嵌套的块级元素,子元素的margin-top作用在父元素上
结果
导致父元素一起往下移动
解决方法
1,给父元素设置border-top或者padding-top(分隔父子元素的margin-top)
2,给父元素设置 overflow:hidden
3,转成行内块元素
4,设置浮动(推荐)

<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>
        .father{
            width: 400px;
            height: 400px;
            background: pink;
           /*  border-top: 1px solid black; */
           /* padding-top: 1px; */
           /* overflow: hidden; */
           /* display: inline-block; */
           float: left;
        }
        .son{
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

行内元素margin和padding无效情况

场景:
给行内元素设置margin和padding
结果:
水平方向的 margin和padding布局有效
垂直方向的 margin和padding布局无效

<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:500px;
            height: 50px;
            background: pink;
        }
        span{
            /* 水平方向的 margin和padding布局有效 */
            margin-left: 100px;
            padding-left: 200px;
            /* 垂直方向的 margin和padding布局无效 */
            margin-top: 100px;
            padding-top: 200px;
        }
    </style>
</head>
<body>
    <div></div>
    <span>中国移动</span><span>中国联通</span><span>中国电信</span>
    <div></div>
</body>

伪元素

作用
一般页面中的非主体内容可以使用伪元素
区别
元素:HTML设置的标签
伪元素:由css模拟出来的标签效果
种类
::before 在父元素位置的最前面添加一个伪元素
::after 在父元素位置的最后面添加一个伪元素
注意点
1,必须设置content属性才能生效
2,伪元素默认是行内元素

<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>
        .father{
            width: 300px;
            height: 300px;
            background: pink;
        }
        .father::after{
            content: "我是一个伪元素";
            display: block;
            width: 100px;
            height: 100px;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        我是父元素
    </div>
</body>

标准流

概念
又称文档流,是浏览器在渲染显示页面的时候默认采用的一个排版规则,规定了应该以何种方式排列元素
常见规则
块级元素:
从上到下,垂直布局,独占一行
行级元素(行内块元素)
从左到右,水平布局,空间不够才会自动换行

<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: pink;
        }
        span{
            background: red;
        }
    </style>
</head>
<body>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span>
</body>

浮动

作用

早期的作用 图文混排<br />    现在的作用 网页的布局(让垂直布局的盒子变成水平布局)

图文混排:

<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>
        img{
            float: left;
        }
    </style>
</head>
<body>
    <img src="./img/1.jpg" alt="">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus id voluptate sapiente, exercitationem fugiat sunt esse tempore laboriosam animi obcaecati dolore quia voluptas officiis soluta eveniet quasi ipsa nulla possimus mollitia magni maiores asperiores temporibus cumque. Eligendi molestias harum velit consequuntur dolore facilis officiis hic, assumenda, delectus pariatur deserunt obcaecati beatae, itaque sed numquam fugit tempora illo autem earum perferendis eos vitae libero corporis? Assumenda quod deleniti magni nulla, dolorum delectus dignissimos exercitationem! Amet hic voluptate et quos error explicabo officiis ullam quisquam! Rerum a ratione officiis. Aliquid quia incidunt velit ducimus quasi temporibus optio maxime, itaque explicabo quod, earum fuga delectus qui cum! Eveniet quibusdam delectus esse. Hic quibusdam a quo consectetur, iure deserunt. Facere beatae tenetur in blanditiis sit temporibus ducimus aliquam animi reprehenderit eum cumque harum, sint tempora. Velit eius dolorum reprehenderit aspernatur quibusdam asperiores optio excepturi adipisci. Nostrum officia, aperiam assumenda vero nemo et similique ipsa praesentium alias recusandae magnam explicabo neque quas incidunt debitis nesciunt autem. Sunt amet aliquid soluta! Earum porro quod eligendi eum pariatur voluptatem suscipit ipsum incidunt, odio excepturi expedita praesentium tempora fugit odit molestiae ratione deleniti quis cumque! Accusamus nam ducimus iure excepturi labore repellendus alias nihil? Alias consequatur ullam explicabo.
</body>

页面布局:

<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>
        .c1{
            width: 150px;
            height: 150px;
            background: pink;
            float: left;
        }
        .c2{
            width: 200px;
            height: 200px;
            background: skyblue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>

使用

float:left 向左浮动<br />    float:right 向右浮动

特点

1,浮动元素会脱离标准流(简称:脱标),在标准流中不占位置,相当于从地面飘向空中<br />    2,浮动元素比标准流高半个级别,可以覆盖标准流中的元素<br />    3,下一个浮动的元素,会在上一个浮动的元素后面,进行左右浮动<br />    4,浮动元素会受到上面元素边界的影响<br />    5,浮动元素有特殊的显示效果(一行可以显示多个,可以设置宽高)

<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>
        .c1{
            /* 浮动元素会受到上面元素边界的影响 下面的元素飘不到同一行 */
            /* 设置 display: inline-block; 下面的元素就能飘到同一行  */
            width: 150px;
            height: 150px;
            background: pink;
        }
        .c2{
            width: 200px;
            height: 200px;
            background: skyblue;
            float:right
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2"></div>
</body>

<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>
        .d1{
            width:100px;
            height: 100px;
            background:pink;
            float: left;
        }
        .c1{
            width:100px;
            height: 100px;
            background:skyblue;
            float: left;
        } 
    </style>
</head>
<body>
    <div class="father">
        <!-- 如果是块级元素浮动之后,就不会是独占一行了,一行可以显示多个 -->
        <div class="d1"></div>
        <!-- 如果是行级元素,浮动之后,设置宽高就有效果了 -->
        <span class="c1">我是一个span</span>
        <span class="c1">我是一个span</span>
    </div>
</body>

案例应用:

<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;
        }
        .header{
            height:40px;
            background: #333;
        }
        .nav{
            width: 1226px;
            height: 100px;
            background: #ffc0cb;
            margin:0 auto;
        }
        .banner{
            width: 1226px;
            height: 460px;
            background: blue;
            margin:0 auto;
        }
        .banner .left{
            width: 234px;
            height: 460px;
            background: #ffa500;
            float: left;
        }
        .banner .right{
            width: 992px;
            height: 460px;
            background: #87ceeb;
            float: left;
        }
    </style>
</head>
<body>
    <!-- 布局流程:从上往下,从外往里 -->
    <!-- 网页头部 -->
    <div class="header"></div>
    <!-- 网页导航 -->
    <div class="nav"></div>
    <!-- 网页轮播图 -->
    <div class="banner">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

tips:一般网页布局顺序

布局顺序
从外向内,从上往下
设置每一个盒子样式的时候
1,宽高
2,辅助的背景颜色
3,盒子模型部分:border padding margin…
4,其他样式:color font text…

Web前端

CSS 盒子模型浮动

盒子模型

盒子大小的初始计算

内边距padding

盒子大小的最终计算方式

盒子尺寸自动内减

盒子不会被撑大的特殊情况

外边距margin

清除默认的内边距

外边距正常的情况

外边距合并的情况

外边距塌陷的情况

行内元素margin和padding无效情况

伪元素

标准流

浮动

作用

使用

特点

tips:一般网页布局顺序

CSS 盒子模型 浮动

盒子模型

盒子大小的初始计算

内边距padding

盒子大小的最终计算方式

盒子尺寸自动内减

盒子不会被撑大的特殊情况

外边距margin

清除默认的内边距

外边距正常的情况

外边距合并的情况

外边距塌陷的情况

行内元素margin和padding无效情况

伪元素

标准流

浮动

作用

使用

特点

tips:一般网页布局顺序

CSS 盒子模型浮动