CSS 盒模型简介

netmou 发布于2019-08-30 15:55 / 1709人阅读

摘要：左右和会起作用。外边距合并当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

一、盒子模型概述

盒子模型是CSS的基石,指定标签如何显示；
页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容（content）、内边距（padding）、边框（border）和外边界（margin）组成；

二、border

1、border-width

指定边框的宽度

2、border-style

指定边框的样式，border-style:none | dotted | solid | double | dashed;
dotted    定义点状边框。在大多数浏览器中呈现为实线。
dashed    定义虚线。在大多数浏览器中呈现为实线。
solid     定义实线。
double    定义双线。双线的宽度等于 border-width 的值。

3、border-color

指定边框的颜色

4、border-top|bottom|left|right

border-top-style
border-top-width
border-top-color

三、padding

padding：padding区域在border与content之间；
padding（填充）,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。

1）用来调整内容在容器中的位置关系
2）用来调整子元素在父元素中的位置关系。padding属性需要添加在父元素上。
3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性。
4）背景色和背景图像会覆盖padding和content组成的区域；
5）padding不可以为负值
1、padding-top|bottom|left|right    
2、padding:10px;
所有四个填充都是 10px
3、padding:10px 5px;
上填充和下填充是 10px 右填充和左填充是 5px
4、padding:10px 5px 15px;
 上填充是 10px 右填充和左填充是 5px 下填充是 15px

5、padding:10px 5px 15px 20px;
上填充是 10px 右填充是 5px 下填充是 15px 左填充是 20px

四、margin

margin：在元素外边的空白区域，被称为边距。

1）外边距(margin)在border之外,margin区域不应用背景;CSS中margin默认值为0
2）可以为负数。

1、margin-top|bottom|left|right    
2、margin:10px 5px 15px 20px;
上边距是 10px 右边距是 5px 下边距是 15px 左边距是 20px
3、margin:10px 5px 15px;
上边距是 10px 右边距和左边距是 5px 下边距是 15px
4、margin:10px 5px;
上边距和下边距是 10px 右边距和左边距是 5px
5、margin:10px;
所有四个边距都是 10px

五、特别关注

1、行内元素

不要给上下的margin 和padding，上下margin和padding会被忽略。左右margin和padding会起作用。

2、外边距合并

1）、当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

2）当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

3）应用：这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

4）合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

GPU云服务器云服务器盒模型盒模型html吗简述html盒模型 css简介

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117177.html

盒模型的一些碎碎念

摘要：盒模型的简介本文简单的总结了一些基本概念，知识点以及细节问题作为前端人员，盒模型是最基础的知识点，在排版与布局时不可避免与盒模型打交道。 1. 盒模型的简介本文简单的总结了一些基本概念，知识点以及细节问题作为前端人员，盒模型是最基础的知识点，在排版与布局时不可避免与盒模型打交道。在我们编写HTML时，网页上的内容几乎都是被包在一个个元素（当然也可以叫做标签）中的，最常见的有div...

王伟廷 2019-08-29 16:27 评论0 收藏0
弹性盒子模型详解

摘要：二弹性盒模型历史弹性盒模型历史英文原版或者查看中文翻译版另外附上标准文档弹性盒模型在过去几年间制定了三版草案规范。给子元素直接添加属性即可七后话以上是本文所有内容，以下是小白我的感慨。一、前言由于W3C在制定弹性盒模型内容有多版草案，在网上浏览了很多视频和文章，版本有新有旧，所以准备写一篇关于弹性盒模型的文章，一是辅助自己学习，二是帮忙其他前端学习者更容易地弹性盒模型。二、弹性盒...

rozbo 2019-08-28 18:27 评论0 收藏0
深入css布局 (1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。从元素的布局特性来分，主要可以分为三类元素块级元素，行内元素，行内块级元素。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们...

ky0ncheng 2019-04-23 13:43 评论0 收藏0
深入css布局(1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。规定元素和属性是包含元素的边框内边距内容的。后来微软也慢慢转向了的标准，在以后支持了标准盒模型。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重...

blankyao 2019-08-29 15:25 评论0 收藏0