CSS盒子模型

更新日期: 2019-09-15阅读: 2.2k标签: 模型分享

复制链接

新浪微博

QQ 好友

扫一扫分享

一、什么叫框模型

页面元素皆为框（盒子）,定义了元素框处理元素内容，内边距，外边距以及边框的计算方式。

二、外边距

围绕在元素边框外的空白距离（元素与元素之间的距离）

语法：margin，定义4个方向的外边距

1、单边定义：margin-top/right/bottom/left

（1）取值：以px为单位， %占父级元素宽度的%比

正数：margin-left 元素向右移动，margin-top元素向下移动

负数：就是相反方向

取值 auto：自动计算块级元素的外边距，对于上下外边距无效,块级元素水平居中

2、简写方式

margin：value ；定义4个方向的值

margin：v1 v2； v1设置上下，v2设置左右

margin：0 auto：设置块级元素水平居中

margin：v1 v2 v3；v1设置上，v2设置左右，v3设置下

margin：v1 v2 v3 v4；上右下左

3、自带外边距的元素

h1~h6、p、body、ol、ul、dl、pre

一般在开发的时候需要重置具有外边距的元素

方案一：*{margin:0;padding:0}
方案二：参考淘宝

4、外边距的特殊效果

（1）外边距合并

当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于两个边距中较大的

(2)行内元素对外边距的表现

行内元素垂直外边距无效（img）除外

（3）行内块对外边距的表现

同一行中，一个行内块设置了垂直边距，同行其他行内会跟着变化

(4)外边距溢出

在特殊条件下，为子元素设置上外边距，会作用到父元素

特殊条件：

1.父元素上边框
2.为第一个子元素设置上外边框，任何一个都会造成外边框溢出

解决方法：

为父元素添加边框，弊端：影响了父元素的实际高度
为父元素添加内边距，弊端了父元素的实际高度
在父元素的第一个子元素位置，添加一个空的table

三、内边距

不会影响其他元素，但是会影响自己的占地尺寸，视觉上感觉大小发生变化

语法：

padding：value ；设置4个方向的内边距

padding：v1 v2；v1设置上下，v2设置左右

padding：v1 v2 v3；v1设置上，v2设置左右，v3设置下

padding：v1 v2 v3 v4；设置上右下左

单方向设置：padding-top/right/bottom/left

box-sizing属性，设置框模型的计算方式

box-sizing：content-box；默认值，盒子模型计算，div设置的width，height为content的大小

<style>
        #d1{
            width: 200px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 10px solid black;
            box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>

box-sizing：boder-box；div设置的width，height为border外边距的大小

<style>
        #d1{
            width: 200px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 10px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>

链接: https://fly63.com/article/detial/5327