盒子模型（重点）

作者: 潘肚饿兵哥哥 | 来源:发表于2019-05-20 15:33 被阅读0次

盒子模型

每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

CSS Box model

盒子边框（border）

语法：

border : border-width | border-style | border-color

边框属性—设置边框样式：border-style 用于定义页面中边框的风格，常用属性值如下：

none: 没有边框即忽略所有边框的高度（默认值）
solid：边框为单实线（最常用）
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

<style>
        div {
            width: 200px;
            height: 200px;
            border-width: 1px;/*边框粗细*/
            border-color: lightpink;
            border-style: solid;/*单实线边框*/
        }
    </style>
</head>
<body>
<div>盒子</div>
</div>

盒子边框总结表：

设置内容	样式属性	常用属性值
上边框	border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度样式颜色;
下边框	border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度样式颜色;
左边框	border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度样式颜色;
右边框	border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度样式颜色;
样式综合设置	border-style:上边 [右边下边左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置	border-width:上边 [右边下边左边];	像素值
颜色综合设置	border-color:上边 [右边下边左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border:四边宽度四边样式四边颜色;

表格的细线边框

table{ border-collapse:collapse; } collapse 单词是合并的意思

border-collapse:collapse; 表示边框合并在一起。

cellpadding: 不要使用这个属性，因为它已经被废弃。 <table>元素应该使用 CSS定制样式。在<table>元素上使用 CSS属性值为 collapse 的border-collapse属性，在 <td>元素上使用属性 padding，以达到类似于 cellpadding 的效果。

cellspacing:小贴士：不要使用这个属性，因为它已经被废弃。 <table>元素应该使用 CSS 定制样式。在 <table>元素上使用 CSS 的属性 border-spacing。以达到类似于 cellspacing 的效果。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        table {
            width: 700px;
            height: 300px;
            border: 1px solid red;
            border-collapse: collapse;  /* 合并相邻边框 */
        }
        td {
            border: 1px solid red;
        }
        </style>
    </head>
    <body>
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </table>
    </body>
</html>

image.png

圆角边框（css3）

CSS属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

image.png

border-radius: 左上角右上角右下角左下角;

border-radius: 30px;

image.png

border-radius: 25% 10%;

image.png

border-radius: 10% 30% 50% 70%;

image.png

border-radius: 10% / 50%;

image.png

border-radius: 10px 100px / 120px;

image.png

border-radius: 50% 20% / 10% 40%;

image.png

使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效

border-radius: 1em/5em;

/* 等价于： */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* 等价于： */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            display: inline-block;
        }
        div:first-child {  /* 结构伪类选择器 选亲兄弟 */
            border-radius: 10px;  /*  一个数值表示4个角都是相同的 10px 的弧度 */ 
        }

        div:nth-child(2) {
            /*border-radius: 100px;    取宽度和高度 一半  则会变成一个圆形 */
            border-radius: 50%;   /*  100px   50% 取宽度和高度 一半  则会变成一个圆形 */
        }

        div:nth-child(3) {
            border-radius: 10px 40px;  /* 左上角  和 右下角  是 10px  右上角 左下角 40 对角线 */
        }
        
        div:nth-child(4) {
            border-radius: 10px 40px  80px;   /* 左上角 10    右上角  左下角 40   右下角80 */
        }
        div:nth-child(5) {
            border-radius: 10px 40px  80px  100px;   /* 左上角 10    右上角 40  右下角 80   左下角   右下角100 */
        }
        div:nth-child(6) {
            border-radius: 100px;  
            height: 100px; 
        }
        div:nth-child(7) {
            border-radius: 100px 0;  
        }   
        </style>
    </head>
    <body>
    <div> 1. 20px</div>
    <div> 2. 50%  或者 100px</div>
    <div>3. 10px 40px</div>
    <div>4. 10px 40px  80px</div>
    <div>5. 10px 40px  80px  100px</div>
    <div>6. 123</div>
    <div>7. 100px 0</div>
    </body>
</html>

image.png

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。

值的个数	表达意思
1个值	padding：上下左右边距比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距左右边距比如 padding: 3px 5px; 表示上下3像素左右 5像素
3个值	padding：上边距左右边距下边距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
4个值	padding:上内边距右内边距下内边距左内边距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 顺时针

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

padding: 1em;

image.png

padding: 10% 0;

image.png

padding: 10px 50px 20px; 上10px；左右50px；下20px；

image.png

padding: 10px 50px 30px 0;

image.png

padding: 0;

image.png

实例：


padding: 5%;                /* All sides: 5% padding */

padding: 10px;              /* All sides: 10px padding */

padding: 10px 20px;         /* top and bottom: 10px padding */
                            /* left and right: 20px padding */

padding: 10px 3% 20px;      /* top:            10px padding */
                            /* left and right: 3% padding   */
                            /* bottom:         20px padding */

padding: 1em 3px 30px 5px;  /* top:    1em padding  */
                            /* right:  3px padding  */
                            /* bottom: 30px padding */
                            /* left:   5px padding  */

案例：导航栏

a链接自带下划线，用text-decoration: none;取消下划线。
padding: 0 15px; 设置内边距上下0，左右15px，因为盒子内的字数不同，所以不能给盒子宽度，否则无法调整文字和盒子之间的边距，直接设置内边距，然后用文字本身撑开盒子，最后设置行高等于高line-height
:41px;，让文字居中显示就可以了

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        nav {
            height: 41px;
            background-color: #fcfcfc;
            border-top: 3px solid #ff8500;/*上边框*/
            border-bottom: 1px solid #edeef0;/*下边框*/
        }
        nav a {
            font-size: 14px;
            color: #4c4c4c;
            text-decoration: none;/*取消下划线*/
            padding: 0 15px;/*内边距上下0，左右15px，因为盒子内的字数不同，所以不能给盒子宽度，要不无法调整边距，直接设置内边距，然后用文字本身撑开盒子，然后行高等于高，让文字居中显示就可以了*/
            height: 41px;
            line-height: 41px;/*让行高等于盒子高，使文字垂直居中*/
            background-color: ;
            display: inline-block; /*链接是行内元素，不能设置高度，将其转换为行内块元素*/
        }
        nav a:hover {  
            background-color: #ccc;
        }
    </style>
</head>
<body>
<nav>
    <a href="#">首页</a>
    <a href="#">手机新浪网</a>
    <a href="#">网站导航</a>
    <a href="#">客户端</a>
</nav>
</body>
</html>

效果如下：鼠标经过变灰色

外边距（margin）

一个盒子实现水平居中的两个条件：

必须是块级元素
盒子必须制定宽度（width）

然后就给左右边距都设定为auto 就可以实现盒子水平居中。

margin: 1em;

image.png

margin: 5% 0;

margin: 10px 50px 20px;

image.png

margin: 10px 50px 20px 0;

image.png

margin: 0;

image.png

示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin-top: 100px;
            margin-left: 50px; */
            margin: 30px auto;  /* 上下 30px;  左右 auto  自动 这样可以使块级带有宽度的盒子水平居中对齐 */
            padding:4px;
        }
        header,
        span {  /*span是行内元素，不是块元素，所以设置自动居中不起效果*/
            width: 900px;
            height: 120px;
            background-color: black;
            margin: 0 auto;  /* 左右设置auto使盒子居中 */
        }
        </style>
    </head>
    <body>
    <div></div>
    <header>头部标签</header>
    <span>123</span>
    </body>
</html>

image.png

文字水平居中和盒子水平居中的区别

文字居中水平
text-align: center;
盒子水平居中
margin: 10px auto; 左右margin 改为 auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 300px;
        height: 100px;
        border: 1px solid pink;
        text-align: center; /*  文字居中水平 */
        margin: 10px auto;  /* 盒子水平居中  左右margin 改为 auto 就阔以了 */
    }
    section {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
    }
    section img {  
        width: 200px;/* 插入图片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
        margin-left: 50px; /* 插入的图片也是一个盒子 */
    }

    aside {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
    
        background-size: 200px 210px; /*  背景图片更改大小只能用 background-size 插入图片直接用宽、高设置*/
        background-position: 30px 50px; /* 背景图片更该位置 用 background-position */
    }
    </style>
</head>
<body>
    1. 文字水平居中  和  盒子水平居中 

    <div>文字水平居中</div>

    2. 插入图片和背景图片

    <section>
        <img src="images/sun.jpg" height="691" width="721" alt="">123
    </section>

    <aside>
        123123123
    </aside>

    3. 一般情况下，背景图片适合做一些小图标使用 
       产品展示之类的就用插入图片
</body>
</html>

image.png

外边距实现盒子居中

清除元素的默认内外边距

用通配符 * 也能做到同样的效果，但是 * 的清除范围太广了，不建议使用。

p,
ul {
margin: 0;
padding: 0;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p,
        ul {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<p>abc</p>
<p>abc</p>
<ul>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
</ul>
</body>
</html>

image.png

外边距合并

相邻块元素垂直外边距的合并

块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者，这种行为称为外边距折叠（margin collapsing），有时也翻译为外边距合并。注意浮动元素和绝对定位元素的外边距不会折叠。
下面列出了会发生外边距折叠的三种基本情况：

毗邻的两个元素之间的外边距会折叠（除非后一个元素需要清除之前的浮动）。

父元素与其第一个或最后一个子元素之间

如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面。

空的块级元素

如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height将两者分开，则该元素的上下外边距会折叠。

一些需要注意的地方：

上述情况的组合会产生更复杂的外边距折叠。
即使某一外边距为0，这些规则仍然适用。因此就算父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和。
如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。

嵌套块元素垂直外边距的合并

两个嵌套关系的块元素，如果父元素没有上内边距以及边框，则父元素的上内边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者吗，既使父元素的上外边距为0，也会合并。
解决方案：

可以为父元素定义1px的上边框或内边距
可以为父元素添加 overflow:hidden；（BFC）

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。
大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：
如果盒子本身没有指定宽度，而是继承父级元素宽度，那么给内边距padding和height高度不会使盒子变大。

/外盒尺寸计算（元素空间尺寸）/
Element(元素)空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
/内盒尺寸计算（元素实际大小）/
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 5px solid red;  /* 4个边框  110   5 + 5 */
            padding: 10px;  /* left right  10 + 10    =  130  */
            margin: 20px;   /* left right 20 + 20   = 170  */
            /* 空间尺寸:  width + border + padding + margin ; */
            /* 内合 实际尺寸:  width + border + padding  130 ; */
        }
        </style>
    </head>
    <body>
    <div></div>
    <div></div>
    </body>
</html>

image.png

案例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {/*写css需要先清除默认样式*/
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;/*取消列表自带的小点，取消默认样式*/
        }
        .searchPic {
            width: 238px;
            height: 294px;
            border: 1px solid #d9e0ee;
            border-top: 3px solid #ff8400;
            margin: 100px;
        }
        .searchPic h3 {
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #d9e0ee;
            font-size: 16px;
            font-weight: normal;/*让粗体不变粗*/
            padding-left: 12px;
        }
        .searchPic img {
            margin: 7px 0 0 8px;
        }
        .searchPic ul li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;/*取消链接自带的下划线*/
        }
        .searchPic ul {
            margin-left: 8px;
        }
        .searchPic ul li {
            padding-left: 10px;
            height: 26px;
            line-height: 26px;/*让li 垂直居中*/
            background: url(images/square.png) no-repeat left center;/*left center是让li前面的小点水平垂直居中，上面的line-height是让文字居中*/
        }
        .searchPic ul li a:hover {
            text-decoration: underline;/*添加下划线*/
            color: #ff8400;
        }
    </style>
</head>
<body>
<div class="searchPic">
    <h3>搜索趣图</h3>
    <img src="images/happy.gif" />
    <ul>
        <li><a href="#">GIF：小胖墩游泳被卡 被救后一脸无辜</a></li>
        <li><a href="#">GIF：小胖墩游泳被卡 被救后一脸无辜</a></li>
        <li><a href="#">GIF：小胖墩游泳被卡 被救后一脸无辜</a></li>
    </ul>
</div>
</body>
</html>

image.png

盒子模型（重点）

盒子模型

盒子边框（border）

盒子边框总结表：

表格的细线边框

圆角边框（css3）

内边距（padding）

案例：导航栏

外边距（margin）

文字水平居中和盒子水平居中的区别

外边距实现盒子居中

清除元素的默认内外边距

外边距合并

相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的合并

content宽度和高度

案例：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web