css盒子模型

最新推荐文章于 2024-08-26 19:57:53 发布

不会飞的小飞侠24

最新推荐文章于 2024-08-26 19:57:53 发布

阅读量605

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_73312013/article/details/126429010

版权

盒子模型是对页面进行布局所需要使用的非常重要的一部分。盒子模型本质上就是一个盒子，它包括边距（margin）、边框（border）、填充（padding）、内容（content）、背景（backbround），下面对每一部分进行简单的说明。

margin(外边距)：清除边框外的区域，外边距是透明的；
border(边框)：围绕在内边距和内容外的边框；
padding(内边距)：清除内容周围的区域，内边距是透明的；
content(内容)：盒子的内容，显示文本和图像；
backbround（背景）：背景包含背景颜色（background-color）、背景图（background-image），给整个盒子添加上背景样式。盒子分类

块元素
块元素也称为行元素，在布局中常用的标签如：div p ul li h1-h6 dl dt dd等都是块元素，它在布局中的行为：
1、支持全部样式
2、如果没有设置宽度，默认宽度为父级元素宽度的100%
3、盒子占据一行，即使设置了宽度

内联元素(行内元素)
内联元素也成为行内元素，布局中常用的标签如：a span em b strong i等都是内联元素，它们在布局中的行为：
1、支持部分样式(不支持宽、高、margin上下、padding上下)
2、宽高由内容决定
3、盒子并在一行
4、代码(html)换行，盒子之间会产生间距
5、子元素时内联块元素，父元素可以用text-align属性设置子元素水平对齐方式

行内块元素
内联块元素也叫内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这个元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素，它们在布局中的行为：
1、支持全部样式
2、如果没有设置宽高，宽高由内容决定
3、盒子并在一行
4、代码换行，盒子产生间距【解决办法同内联元素一样】
5、子元素是内联元素，父元素可以用text-aliign属性设置子元素的对齐方式

块级元素并排显示
块级元素的并排显示在前端页面书写过程中也是应用非常多，我们常见的各种新闻页面、购物平台页面等等内容都是并排显示。

常用操作如下：

浮动：float: left/right，在布局中应用很广泛，可以很好的使块级元素达到并排显示的效果；
flex：flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间，本人对于这个属性很少用；
定位：position属性属于css中相对较难掌握的一个属性，包含相对定位与绝对定位；
行内块
美化
美化中所使用的设置都是属于css中一些最基本最简单的设置，字体设置、文本设置、列表设置、表格设置。
字体设置
字体的属性设置主要包含以下几个方面：
font-style: 设置字体是否倾斜属性值有 normal 正常体； italic 斜体；
font-size: 设置字体大小最小是12px
font-weight: 设置字体的粗细程度属性值有 normal 正常体；bold 加粗；bolder 更粗；100 200 300
font-family: 设置字体类型
font: 上面几个属性的复合属性 font:font-style font-weight font-size/line-height，
font-family font-style font-weight 可以不写也可以交换位置，font-size/line-height font-family 必须写能交换位置
文本设置
文本的属性设置主要包含以下几个方面：
text-decoration: 用来设置文本的装饰线 underline 下划线，overline 上划线，none 不添加任何装饰线，line-through 删除线；一般情况下用于a标签，hover时添加上下划线
text-indent: 首行空格，2em 首行空两格
text-align: 设置文本的对齐方式，center 居中使用较多
列表设置
列表可以进进行小范围的内容排列，有有序列表、无序列表、定义列表三种样式，这部分内容属于html基础知识，相对较简单，比较容易灵活运用。
表格设置
表格一般占用空间较大，使用较少，因为现在对于页面的布局方面都使用块级元素来划分。同样这部分内容也是属于html基础知识。

盒子模型的设置
只要一个盒子被选中，就要考虑它的属性问题，思考这个盒子需要设置哪些属性，然后考虑是否需要并排显示，最后再考虑美化问题。

内容区域：width 和 height
内填充区域： padding
边框： border
外填充区域：margin
背景： background
一张网页就是一堆的盒子堆积起来的。盒子就是标签，都是矩形。

内容区域：width 和 height
对于块元素形成的盒子来说，表示内容区域，

对于内联元素形成的盒子来说，width和height不起作用
注意：
1）不设置有默认值，宽度默认值是auto，对于块级元素来说，auto表示尽可能大，对于行内元素来说，auto表示尽可能小。
2）不设置高度，男盒子的高度是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说，也是由内容撑起来的，但是和font-size也有关系。
3）宽度和高度可以设置百分比，是父元素的百分比的，一般情况下在移动端开发时用的多一点。

边框：border
边框的粗细 border-width

边框的样式 border-style

边框的颜色 border-color
一般情况下，不会单独设置，所以border也是一个复合属性；

注意：
1）border: 1px solid red;
border后面的属性是没有顺序的，但是一般都是先写border-width，然后是border-style，最后是border-color；
2）粗细大部分情况下单位都是px，你也可以使用单词，使用单词时，在不同的浏览器下代表粗细是不一样的；
3）边框的样式也非常多，用的非常多的有这几个：solid 实线， dotted 点画线， dashed 虚线， none 没有线；
4）边框的颜色设置单词用的最多还是16进制也可以使用rgb函数
5）也可以单独设置某一个方向上的border，例如border-top:1px solid red; 用的也比较多

内填充区域： padding
用来设置内填充，也叫补白：表示内容区域和边框之间的距离。
padding后面也可以跟一个值、二个值、三个值、四个值：

一个值：padding: 10px; 四个方向的padding都是10px
二个值：padding: 10px 20px; 上下10px 左右20px
三个值：padding: 10px 20px 30px; 上10px 左右20px 下30px
四个值：padding: 10px 20px 30px 40px; 上10px 右20px 下30px 左40px
四个方向的补白使用量也是挺大的

padding-top: ;

padding-right: ;

padding-bottom: ;

padding-left: ;

注意：
1）有些标签是有默认的padding 如ul ol... 等一刀切 *{ padding:0; }
2）对于行内元素来说，padding在垂直方向上不影响行高，效果上看似是有padding，但是padding不是真正的padding，或者说对于一个女盒子来说，padding在垂直方向上无效。
3）对于块级元素来说，上下padding可以撑起男盒子的高度。

外填充区域：margin
表示外边距，盒子与盒子之间的距离，是边框之外的间隔，是在border之外的
margin后面也可以跟一个值、二个值、三个值、四个值：

一个值：margin: 10px; 四个方向的padding都是10px
二个值：margin: 10px 20px; 上下10px 左右20px
三个值：margin: 10px 20px 30px; 上10px 左右20px 下30px
四个值：margin: 10px 20px 30px 40px; 上10px 右20px 下30px 左40px
四个方向：

margin-top: ;

margin-right: ;

margin-bottom: ;

margin-left: ;

注意：
1）有此标签有默认的margin 一刀切 *{ margin:0; padding:0; }
2）对于行内元素来说，margin在垂直方向上是无效的
3）margin可以设置auto。表示尽可以大 div{ margin:0 auto; }
4）margin可以设置负值

塌陷问题

<div class="box7">box7</div>
<div class="box8">box8</div>
.box7{ 
    width: 200px;
    height: 200px;
    background-color: gold; 
    margin-bottom: 150px;
}
.box8{ 
    width: 200px;
    height: 200px;
    background-color: skyblue; 
    margin-top: 100px;
}

按理说：两个盒子之间的margin应该是250px
实现是：就150px 

这种现象叫：margin的塌陷  

margin塌陷的前提：1）块元素  2）垂直方向    

margin到底是多少：取大原则

解决办法：设置一个盒子的margin



父子元素之间的重叠问题:
<div class="box9">
<p class="box10">我是一个段落</p>
</div>    
.box9{ 
    background-color: pink;
    margin-top: 50px;
}
.box9 .box10{
    background-color: gold;
    margin-top: 30px;
}


按理说：p标签上面的应该有80px的margin 
实现是：只有50px margin 
这种现象叫：父子元素之间的margin重叠

解决办法：
    1）给父元素加border 
    2）给父元素加padding

对于块级元素来说，margin有重叠问题（塌陷问题）：