盒模型&定位

作者: 废废_siri | 来源:发表于2018-12-24 21:32 被阅读0次

盒模型

盒模型包括四个部分：
content：内容区。盒子中的内容(如图中的手机)。
padding：内边距。盒子与内容之间的距离。
border：边框。盒子的边缘(盒子本身)。
margin：外边距。盒子与盒子之间的距离。
注：块元素、内联块元素可以设置宽高。内联元素设置宽高无效，浏览器不支持。

image.png

 width
            默认值为auto
                块级元素:   盒模型的宽度(m + b + p + w) = 包含块内容区的100%
                内联元素,行内块:  靠内容撑开

                绝对定位元素:  靠内容撑开
                相对定位元素:  元素特性不变  盒模型的宽度(m + b + p + w) = 包含块内容区的100%
                固定定位: 靠内容撑开

                浮动元素:靠内容撑开

            是否是继承属性 否
            百分比参照于谁  包含块的width
        height
             默认值为auto
                都是代表靠内容撑开
             是否是继承属性    否
             百分比参照于谁  包含块的height
        padding
        margin
             默认值为0
             是否是继承属性    否
             百分比参照于谁  包含块的width
        border
            border-width  (一般直接指定px值  不写百分比)

        left right top bottom
            默认值:auto
            是否是继承属性 否
            百分比参照于谁  包含块的width

计算盒模型

image.png

盒子的总宽度：width+padding-left+padding-right+border-left+border-right=122px
盒子的总宽度：width+padding-left+padding-right+border-left+border-right+margin-left+margin-right=142px（盒子在浏览器中占用的空间大小）

<!DOCTYPE html>
<html lang="zh-cn">
<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>mi demo</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 1px dotted #4ff86e;
            margin: 10px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="box">mi 8</div>
</body>
</html>

盒模型的宽高

盒模式中 width 和 height 默认定义的是内容区的尺寸，不包括 padding，border 和 margin。
可以使用 px 和 %（占父元素的百分比）定义内容区的大小。

image.png

<!DOCTYPE html>
<html lang="zh-cn">
<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>
        html,body{
            /* html是body的父元素，所以body的宽度会受父元素html的影响 */
            /* body默认的高度是内容的高度，将html和body的高度设置为100%后，body会占满整个浏览器 */
            height:  100%;
        }
        .box{
            /* 用像素px来定义宽高 */
            width: 100px;
            height: 100px;
            background-color: brown;
        }
        .child{
            /* 用百分比%来定义宽高，百分比是相对于父元素--.box的宽高来定义的 */
            width: 50%;
            height: 50%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="child">child</div>
    </div>
</body>
</html>

padding--内边距

公式：四面相等，只设一个，对面相等，后者省略。

<!DOCTYPE html>
<html lang="zh-cn">
<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>padding demo</title>
    <style>
        div{
            background-color: brown;
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .simple1{
            /* 四边相等只设一个 */
            padding:5px;
        }
        .simple2{
            /* 顺时针--上右下左 */
            /* padding-top: 5px;
            padding-right: 10px;
            padding-bottom: 6px;
            padding-left: 7px; */
            padding:5px 10px 6px 7px;
        }
        .simple3{
            /* 上下，左右 */
            padding: 10px 11px;
        }
        .simple4{
            /* padding: 10px 11px 5px 11px; */
            /* 对面相等，后者省略 */
            padding: 10px 11px 5px;    
        }
    </style>
</head>
<body>
    <div class="simple1">lorem.</div>
    <div class="simple2">lorem.</div>
    <div class="simple3">lorem.</div>
    <div class="simple4">lorem.</div>
</body>
</html>

border--边框

注：如果不设置边框的颜色border-color，则边框采用字体的颜色color.

<!DOCTYPE html>
<html lang="zh-cn">
<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 demo</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 10px;
        }
        .simple1{
            /* 如果不设置边框的颜色，则边框采用字体的颜色 */
            color: #d535eb;
            /* border-width: 1px;
            border-color: #86e72b; */
            /* 简写方式 */
            border:1px solid #62ce9c;
        }
        .simple2{
            
            color: brown;
            border-top: 1px dotted #62ce9c;
            border-right: 2px solid #fabdec;
            border-bottom: 1px double #d535eb;
            border-left: 3px solid #4338e4;
        }
        input{
            /* 清除文本框的默认样式 */
            border: none;
            /* 清楚文本框在获得焦点时出现的蓝色轮廓 */
            outline: none;
        }
    </style>
</head>
<body>
    <div class="simple1">lorem</div>
    <div class="simple2">lorem</div>
    <label>用户名：</label><input type="text">
</body>
</html>

border和padding可以设置给块元素、行内元素。

label{
            padding: 10px;
            border: 8px solid red;;
            background: #4338e4;
        }

margin--外边距

注意：margin 可以设置给块元素，对于行内元素只可以设置左右margin，不可以设置上下margin。

<!DOCTYPE html>
<html lang="zh-cn">
<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-01 demo</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            padding: 5px;
        }
        .simple1{
            /* 四面相等，只设一个 */
            margin: 10px;
        }
        .simple2{
            margin-top: 5px;
            margin-right: 10px;
            margin-bottom: 15px;
            margin-left: 5px;
        }
        .simple3{
            /* 上下，左右 */
            margin:20px 10px;
        }

        .simple4{
            /* 等价于margin:10px 5px 6px 5px; */
            margin: 10px 5px 6px;
        }
    </style>
</head>
<body>
    <div class="simple1">lorem.</div>
    <div class="simple2">lorem</div>
    <div class="simple3">lorem</div>
    <div class="simple4">lorem</div>
</body>
</html>

外边距特性：

相邻元素的垂直margin合并--取下面元素的上边距和上面元素的下边距中较大的一个值。

捕获.JPG

<!DOCTYPE html>
<html lang="zh-cn">
<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 demo</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            padding: 5px;
        }
        .simple1{
            margin: 20px;
        }
        .simple2{
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="simple1">margin</div>
    <div class="simple2">合并</div>
</body>
</html>

相邻元素的水平margin相加

QQ截图20181203213101.png

QQ截图20181203213116.png

<!DOCTYPE html>
<html lang="zh-cn">
<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 demo</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            padding: 5px;
        }
        .simple{
            display: inline-block;
        }
        .simple1{
            margin: 20px;
        }
        .simple2{
            margin: 30px;
        }
    </style>
</head>
<body>
    <div class="simple simple1">margin</div>
    <div class="simple simple2">合并</div>
</body>
</html>

外边距塌陷问题

子元素的上下外边距没有正常显示。

<!DOCTYPE html>
<html lang="zh-cn">
<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>外边距塌陷 demo</title>
    <style>
        .parent{
            background-color: pink;
            margin: 20px;
            width: 300px;

        }
        .child{
            margin: 20px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="parent">
    <div class="child">lorem</div>
    </div>
</body>
</html>
问题：上面的代码 .child 的外边距和 .parent 重叠，看起来 .child 的外边距消失。

解决外边距塌陷的方法

1.用边框border来解决，设置自父元素的border-top,border-bottom的值。

.parent {
    ......
    border-top: 1px solid pink;/*解决上边距塌陷问题*/
    border-bottom: 1px solid pink;/*解决下边距塌陷问题*/
}

2.用内边距padding来解决，设置父元素的padding-top,padding-bottom的值。

.parent {
    ......
    padding-top: 1px; /*解决上边距塌陷问题*/
    padding-bottom: 1px; /*解决下边距塌陷问题*/
}

3.用overflow来解决，设置父元素的overflow:hidden.

.parent {
    ......
    overflow: hidden;
}

标准盒模型&怪异盒模型

border-box怪异模式
盒子本身的宽度=width(width中已经包含了border和padding的值)。
content-box标准模式
盒子本身的宽度=width+padding(左右)+border(左右)。

绝对定位

包含块

离他最近且开启了定位(非static)的祖先元素,若没有开启了定位的祖先元素，那么包含块为初始包含块
初始包含块
一个视窗大小的矩形，默认情况下位置与视窗重合

image.png

绝对定位的使用场景

垂直水平居中布局
绝对定位的元素的 margin + border + padding + width = 包含块的width + padding

//实现垂直水平居中布局
<style>
        *{
            margin: 0;
            padding: 0;
        }
        #father{
            width: 200px;
            height: 200px;
            position: relative;
            background-color: brown;
            padding: 0 50px;
        }
        #son{
            width: 100px;
            height: 100px;
            /*垂直水平居中*/

              /* 已知高宽
            绝对定位元素的特性:
                m + b + p + w + left + right = 包含块的(w+p)
                   auto + 0  + 0 + 100 + 0 + 0 = 视口的宽度
                   auto + 0 + 0 + 100 + 0 + 0  = 200 + 50*2
                m + b + p + h + top + bottom  = 包含块的(h+p)
            */
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
        <div id="father">
            <div id="son"></div>
        </div>
</body>

--
绝对定位模拟固定定位
在移动端，固定定位兼容性并不友好，所以用绝对定位来实现固定定位的效果。
思路：固定定位一般是参照视口来固定位置，一般不使用html或body来充当视口(这两个标签做视口效果时而不灵)，所以我们自己用一个div标签来充当视口。
1.禁用系统滚动条

html,body{
overflow:hidden;
}

2.将滚动条加给一个包裹元素

包裹元素的id/class{
overflow:auto;
}

让包裹元素充当视口

body html 包裹元素的 width和height为百分百

完整代码如下：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        //禁用系统滚动条
        html{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        body{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        //div视口
        #app{
            overflow: auto;
            width: 100%;
            height: 100%;
        }

        #test{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 40px;
            top: 40px;
            background: #c580fd;
        }
    </style>
</head>
<body>
    <div id="app">
        <div style="height:3000px"></div>
        <div id="test"></div>
    </div>
</body>

盒模型浮动定位的使用场景

margin为负值!!!!!
定位版的三列布局
浮动版的三列布局
    圣杯
    双飞翼
伪等高布局

粘连布局

 <style>
        *{
            padding: 0;
            margin: 0;
        }

        html,body{
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        div{
            text-align: center;
        }

        #wrap{
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(235, 108, 247);
        }
        #wrap .main{
            min-height: 100%;
        }

       #wrap .main .main-content{
            padding-bottom: 50px;
        }

        .clearfix{
            *zoom: 1;
        }
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }

        #wrap .footer{
            margin-top: -50px;
            height: 50px;
            line-height: 50px;
            background-color: crimson;
        }

    </style>
</head>
<body>
    <div id="wrap">
        <div class="main">
            <div class="main-content" class="clearfix">
                mian<br/>
                mian<br/>
                mian<br/>
                mian<br/>
                mian<br/>
                mian<br/>
                mian<br/>
                mian<br/>
                mian<br/>
                mian<br/>
            </div>
        </div>
        <div class="footer">footer</div>
    </div>
</body>

盒模型&定位

盒模型

计算盒模型

盒模型的宽高

padding--内边距

border--边框

border和padding可以设置给块元素、行内元素。

margin--外边距

外边距特性：

外边距塌陷问题

解决外边距塌陷的方法

标准盒模型&怪异盒模型

绝对定位

包含块

绝对定位的使用场景

盒模型浮动定位的使用场景

粘连布局

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

盒模型&定位

盒模型

计算盒模型

盒模型的宽高

padding--内边距

border--边框

border和padding可以设置给块元素、行内元素。

margin--外边距

外边距特性：

外边距塌陷问题

解决外边距塌陷的方法

标准盒模型&怪异盒模型

绝对定位

包含块

绝对定位的使用场景

盒模型 浮动 定位的使用场景

粘连布局

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

盒模型浮动定位的使用场景