CSS盒子模型

CSS盒子模型

CSS中的盒子模型(box ,model)是为描述一个HTML元素而形成的矩形盒子，网页上在所有元素都可以描述成盒子

通过管理盒子以及多个盒子之间的关系，是实现页面布局的重要基础。

盒子的排列方式：

①　横向排列 ②　纵向排列

③　嵌套排列 ④　层叠排列

盒子模型通过四个要素来描述

① Content 内容区域 ② Padding 内边框

③ Border 边框 ④Margin 外边框

元素的宽和高

​ 元素的宽度width和高度height指的是内容区域的宽度和高度

盒子的边框

Border的属性值包含三个方面内容：width，style，color

• Width：边框宽。如果设置为0，其他两个样式无效

• Style：边框的样式。Solid（实线）、dashed（虚线）、double（双线）等；

• Color：颜色。Red、#fff268、rgba（255.255.1.1）

边框的设置

​ 统一设置：border:1px solid #ff112f;

​ 分开设置：border-top:24px red dashed;

​ //top上边、bottom下边、left左边、right右边

​

盒子内边距

• ​ 盒子的内边距可以通过padding属性来设置，是指元素边框与元素内容之间的空白区域。

• ​ 有一个方向忘记设置内边距就会根据对应方向的值来显示。

• ​ Padding属性值可以接受长度值或百分比，不能使用负值。百分比值是相对于父元素的width计算的

内边距的设置。

​ 总和设置

​ padding: 10px 15px 10px 15px;/顺时针方向,上-右-下-左/

​ 分开设置

​ Padding-top:10px 上 Padding-right:0.5em 右

​ Padding-bottom:5ex 下 Padding-left:5% 左

​ 盒子的外边距-margin

​ 盒子的外边距是指围绕在元素边框外的空白区域，设置外边距会在元素外创建额外的“空白”，通常是用来控制多个盒子之间的相互间隔

盒子的宽和高

​ 盒子的尺寸

​ 盒子的宽度和高度是指该元素在网页中的实际所占尺寸。

实际尺寸：

​ 高=元素高+（内边距2）+（线宽2）+（外边距*2）

​ 宽=元素宽+（内边距2）+（线宽2）+（外边距*2）

box-sizing属性

​ 在标准W3C盒模型下，对于设置好了width和height的元素，往往由于又设 置边框或内外边距，导致元素在页面中的占位发生了变化，影响了盒子在页 面中的布局。

CSS3中的box-sizing属性可以改变盒子模型的组成方式标准，使开发人员根据自己的需求选择不同的组成方式。

基本语法：box-sizing: content-box|border-box|inherit;

• content-box：默认值，在元素的宽度和高度之外绘制元素的内边距和边框；

• border-box：内边距和边框被包含在定义的width和height；

• inherit：规定从父元素继承box-sizing 属性的值；