CSS盒子模型

最新推荐文章于 2024-08-03 09:43:52 发布

万万君

最新推荐文章于 2024-08-03 09:43:52 发布

阅读量168

点赞数 1

分类专栏：笔记 CSS HTML 文章标签： html css

本文链接：https://blog.csdn.net/devin_xin/article/details/105046474

版权

笔记同时被 3 个专栏收录

80 篇文章 0 订阅

订阅专栏

HTML

35 篇文章 0 订阅

订阅专栏

CSS

24 篇文章 0 订阅

订阅专栏

盒子模型示意图

在这里插入图片描述

各个部分解释如下：

Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容） - 盒子的内容，显示文本和图像
进一步了解盒子模型的内部结构请参考W3C描述。

每个元素的宽度和高度计算公式

元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框（Border）属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中
border-bottom-color	设置元素的下边框的颜色
border-bottom-style	设置元素的下边框的样式
border-bottom-width	设置元素的下边框的宽度
border-left	简写属性，用于把左边框的所有属性设置到一个声明中
border-left-color	设置元素的左边框的颜色
border-left-style	设置元素的左边框的样式
border-left-width	设置元素的左边框的宽度
border-right	简写属性，用于把右边框的所有属性设置到一个声明中
border-right-color	设置元素的右边框的颜色
border-right-style	设置元素的右边框的样式
border-right-width	设置元素的右边框的宽度
border-top	简写属性，用于把上边框的所有属性设置到一个声明中
border-top-color	设置元素的上边框的颜色
border-top-style	设置元素的上边框的样式
border-top-width	设置元素的上边框的宽度

boarder-style属性

border-style:dotted solid double dashed;
– 上边框是 dotted
– 右边框是 solid
– 底边框是 double
– 左边框是 dashed
border-style:dotted solid double;
– 上边框是 dotted
– 左、右边框是 solid
– 底边框是 double
border-style:dotted solid;
– 上、底边框是 dotted
– 左、右边框是 solid
border-style:dotted;
– 四面边框是 dotted

代码示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.one
{
	border-style:solid;
	border-color:#0000ff;
}
p.two
{
	border-style:solid;
	border-color:#ff0000 #0000ff;
}
p.three
{
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
	border-style:solid;
	border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>

<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
</body>
</html>