盒子模型总结

最新推荐文章于 2024-09-10 14:41:34 发布

巧克力男孩dd

最新推荐文章于 2024-09-10 14:41:34 发布

阅读量1.2k

点赞数 19

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_81056739/article/details/139633395

版权

1.盒子模型的组成。

1.就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

2.盒子模型=元素（内容）+内边距+边框+外边距构成

3.盒子模型的总宽度=总宽度 = 左内边距 + 左边框 + 左外边距 + 宽度 +右外边距+右边框+右内边距

作用：网页的布局就是众多个盒子模型组在一起

2.边框（border）

1.边框：设置元素的边框；边框的三大要素：粗细（单位是px）颜色样式

1.1样式的种类

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .A{ 
        width: 100px;
        height: 100px;
        background-color: blanchedalmond;
        /* 颜色 */
        border-color: blue;
        /* 粗细 */
        border-width: 1px;
        /* 样式：边框没有 */
        border-style: none;
    }
    .B{background-color: blanchedalmond;
        width: 100px;
        height: 100px;
        /* 颜色 */
        border-color: blue;
        /* 粗细 */
        border-width: 1px;
        /* 样式：边框为实线 */
        border-style: solid;

    }
    .C{background-color: blanchedalmond;
        width: 100px;
        height: 100px;
        /* 颜色 */
        border-color: blue;
        /* 粗细 */
        border-width: 1px;
        /* 样式：边框为虚线 */
        border-style: dashed;
    }
    .D{background-color: blanchedalmond;
        width: 100px;
        height: 100px;
        /* 颜色 */
        border-color: blue;
        /* 粗细 */
        border-width: 1px;
        /* 样式：边框为点线 */
        border-style: dotted;

    }
    </style>
   
</head>
<body>
    <div class="A"></div>
    <div class="B"></div>
    <div class="C"></div>
    <div class="D"></div>
</body>
</html>

2.单独对一条边或任意方向的边框进行调整

border-top:1px solid red

3.内边距（padding）

1.内边距是内容与边框的的距离。

2.单独的表示方向

padding-top：表示上内边距
padding-bottom：表示下内边距
padding-left：表示左内边距
padding-right：表示下内边距

3.数据的多少代表方向

padding：20px（代表上下左右都是20px）
padding：20px 30px（依次代表上下，左右）
padding：20px 30px 20px(依次代表左右，上，下）
padding：20px 30px 20px 30px（顺时针：上右下左）

4.注意事项

1.增添了内边距相当于增大了盒子的长度与宽度，要保证盒子大小样子的不变，可以自行调节内容的height和width。没有width和height就不会撑大。

4.外边距（margin）

1.外边距是盒子与盒子之间的的距离。

2.单独的表示方向

margin-top：表示上内边距
margin-bottom：表示下内边距
margin-left：表示左内边距
margin-right：表示下内边距

3.数据的多少代表方向

margin：20px（代表上下左右都是20px）
margin：20px 30px（依次代表上下，左右）
margin：20px 30px 20px(依次代表左右，上，下）
margin：20px 30px 20px 30px（顺时针：上右下左）

4.注意事项

4.1让块级元素自适应居中（仅限于水平居中），盒子内的居中可以使用text-align

前提：盒子得有宽度

text—align：center；

margin：auto；

4.2垂直相邻两个块元素的之间的合并

4.2.1 当两个块元素，一个块元素的margin-bottom：20px，与他垂直相邻的块元素的顶部是margin-top：10px，那么这是他们会合并在一起并被大的合并。

4.2.2 嵌套块元素垂直外边距的塌陷:当一个div包含宁一个div时，正正取大，正负取和，负负取小，符合这个原则

解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加 overflow:hidden。
还可以其他定位方式：定位浮动

5.清除内外边距

用一个通用选择器，将所有的margin与padding清为0px，避免原有的造成影响

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

6，让行内文字垂直居中

让行内文字垂直上居中，通过使文字的行高与盒子的高度相等，这样就可以是文字垂直居中

巧克力男孩dd

关注

19
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
盒子模型总结

4.2.1 当两个块元素，一个块元素的margin-bottom：20px，与他垂直相邻的块元素的顶部是margin-top：10px，那么这是他们会合并在一起并被大的合并。1.增添了内边距相当于增大了盒子的长度与宽度，要保证盒子大小样子的不变，可以自行调节内容的height和width。3.盒子模型的总宽度=总宽度 = 左内边距 + 左边框 + 左外边距 + 宽度 +右外边距+右边框+右内边距。1.就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。3.数据的多少代表方向。
复制链接

扫一扫