CSS 的框模型

最新推荐文章于 2020-11-06 17:04:06 发布

Python小子

最新推荐文章于 2020-11-06 17:04:06 发布

阅读量199

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_43883022/article/details/88738515

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS 的框模型

1、外边距

1.1、语法

margin-top：上外边距
margin-bottom：下外边距
margin-right：右外边距
margin-left：左外边距

取值	说明
5px	以px为单位的数字
10%	父元素的10%作为外边距
-5px	移动元素时使用
auto	自动，只能对设定宽度的块级元素有效，只对左右外边距有效

margin：4个方向的外边距
margin：5px 上下左右外边距都是5px
margin：5px 3px 上下外边距5px，左右外边距3px
margin：0 auto 块级元素居中对齐
margin：1px 2px 3px 上外边距1px，左右外边距2px，下外边距3px
margin：1px 2px 3px 4px 上外边距1px，右边距2px，下外边距3px，左外边距4px（从顶端，顺时针方向）

1.2、页面中有默认外边距的元素

body、p、ol、ul、h1——h6都具备默认外边距，通过css重写的方式，取消默认外边距 body,p,ol,ul,h1,h2,h3,h4,h5,h6{margin:0}

2、内边距

2.1、语法

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

取值	说明
5px	以px为单位的数字
10%	父元素的10%作为内边距

padding：4个方向的内边距
padding：5px 上下左右内边距都是5px
padding：5px 3px 上下内边距5px，左右内边距3px
padding：1px 2px 3px 上内边距1px，左右内边距2px，下内边距3px
padding：1px 2px 3px 4px 上内边距1px，右内距2px，下内边距3px，左内边距4px（从顶端，顺时针方向）

2.1、页面中有默认内边距的元素

ol，ul，文本框，密码框，按钮都有默认内边距

3、box-sizing 属性

作用：重新指定框模型的计算方式

取值	说明
content-box	元素的width和height属性只表示内容区域的尺寸，默认值
border-box	元素的width和height属性包含内容区域，边框和内边距的全部尺寸，建议使用

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1,#id2{
            width: 200px;
            height: 200px;
            background-color: orangered;
            box-sizing: border-box;   /* 自动计算文本区域大小 */
        }
        #id2{
            background-color:yellow;
        }
        #id1{
            border: 3px solid #aeb9c0;
            margin-right: auto;  /* 水平居中对齐 */
            margin-left: auto;   /* 水平居中对齐 */
            margin-top: 50px;
            margin-bottom: 50px;
            overflow:auto;   /* 溢出处理 */
        } 
    </style>
</head>
<body>
    <div id="id1">hello word</div>
    <div id="id2"></div>
</body>

Python小子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 的框模型

CSS 的框模型1、外边距    1.1、语法margin-top：上外边距margin-bottom：下外边距margin-right：右外边距margin-left：左外边距取值说明5px以px为单位的数字10%父元素的10%作为外边距-5px移动元素时使用auto自动，只能对设定宽度的块级元素...
复制链接

扫一扫

专栏目录