CSS盒子模型及属性

最新推荐文章于 2024-08-22 11:28:48 发布

RiskW1

最新推荐文章于 2024-08-22 11:28:48 发布

阅读量1.3k

点赞数 15

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_44648984/article/details/125890088

版权

CSS盒子模型

一、什么是盒子模型

在这里插入图片描述
所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

上面的图片说明了盒子模型(Box Model)：

Margin(外边距) - 清除边框外的区域，外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

二、内容区(content)

内容区是整个盒子模型的中心，其中存放了盒子的主要内容，这些内容可以是文本、图像等资源。内容区有 width、height、overflow 三个属性，其中 width 和 height 属性用来指定盒子内容区域的宽度和高度，当内容信息过多，超出内容区所设置的范围时，则可以使用 overflow 属性设置溢出内容的处理方式，overflow 属性有四个可选值：

hidden：表示隐藏溢出的部分；
visible：(默认值)表示显示溢出的部分（溢出的部分将显示在盒子外部）；
scroll：表示为内容区添加一个滚动条，您可以通过滑动这个滚动条来查看内容区的全部内容；
auto：表示由浏览器决定如何处理溢出部分。
内容区未设置和设置了overflow属性效果如下:

二、边框(border)和边框颜色(border-color)

边框是环绕内容区和内边距的边界，可以使用 border-style、border-width 和 border-color 以及它们的简写属性 border 来设置边框的样式。其中 border-style 属性为边框中最主要的属性，如果没有设置该属性的话，其它的边框属性也会被忽略。

border-top-color 上边框颜色
border-right-color 右边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色
border-color
- 四个边框为同一颜色 border-color
- border-color属性可接受一到四个值（依次对应上、右、下、左边框）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Risk</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
div{
    width: 500px;
    height: 30px;
    margin: 20px auto;
    text-align: center;
}
.one{
    border-style:solid;
    border-color:blue;
    }
.two{
    border-style:solid;
    border-color:black;
} 
.three{
    border-style: solid;
    border-color: aqua blue gold green;
}
</style>
<body>
<div class="one">实线蓝边框</div>
<div class="two">实线黑边框</div>
<div class="three">border-color的使用</div>
<div><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置边框。</div>
</body>
</html>

运行结果：

border-color

三、边框粗细（border-width）

1.可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
2.或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

四、边框样式（border-style）

border-style 属性用于设置元素所有边框的样式，或者单独地为各个边设置单独的边框样式

border-style的兼容性很好，基本所有的浏览器都兼容

属性值	描述
none	定义无边框(默认值)
solid	边框为单实线(常用)
dashed	边框为虚线
dotted	边框为圆点
double	边框为双实线

效果如下:
border-style

五、外边距（margin）

简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明：这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。

六、内边距（padding）

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

属性值：

padding-left
padding-right
padding-top
padding-bottom

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
div.one{
    background-color:yellow;
}
div.two
{   
    background-color: aqua;
    padding-top:25px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;
}
</style>
<body>
<div class="one">这是一个没有指定填充边距的段落。</div><br>
<div class="two">这是一个指定填充边距的段落。</div>
</body>
</html>