CSS盒模型

最新推荐文章于 2022-08-28 15:25:52 发布

cs08211317dn

最新推荐文章于 2022-08-28 15:25:52 发布

阅读量833

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/sunny_forever/article/details/10962147

版权

html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

一．CSS 盒模型

margin：没有背景颜色，是完全透明的。

border：颜色受box背景颜色影响。

padding：颜色受box背景颜色影响。

content：box的内容。

元素的高度和宽度

设置高度和宽度时设置的是内容的高度和宽度。整个box的高度宽度由以下公式计算而得：

总宽度：

Total element width = width + left padding+ right padding + left border + right border + left margin + right margin

总高度：

Total element height = height + top padding+ bottom padding + top border + bottom border + top margin + bottom margin

二. CSS 边框

1.border-style

border-style可以具体到border-left-style，border-right-style，border-top-style，border-bottom-style。

border-style属性可以有四个值。例如：

（1）border-style:dotted solid double dashed;

top border：dotted

right border：solid

bottom border：double

left border：dashed

（2）border-style:dotted solid double;

top border：dotted

right and left borders：solid

bottom border：double

（3）border-style:dotted solid;

top and bottom borders：dotted

right and left borders：solid

（4）border-style:dotted;

all four borders：dotted

一个例子：

<html>
<head>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">border-style:none</p>
<p class="dotted">border-style:dotted</p>
<p class="dashed">border-style:dashed</p>
<p class="solid">border-style:solid</p>
<p class="double">border-style:double</p>
<p class="groove">border-style:groove</p>
<p class="ridge">border-style:ridge</p>
<p class="inset">border-style:inset</p>
<p class="outset">border-style:outset</p>
<p class="hidden">border-style:hidden</p>
</body>

</html>

以上代码运行结果：