CSS自学手册-第3章


CSS 盒子模型-Box Model

所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计和布局时使用。

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

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

下面的图片说明了盒子模型(Box Model):

CSS box-model

不同部分的说明:

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

为了正确设置元素在所有浏览器中的宽度和高度,你需要知道的盒模型是如何工作的。ZDK 折叠框


重要: 当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和外边距。

下面的例子中的元素的总宽度为 450px:

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

让我们自己算算:
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px

试想一下,你只有 250 像素的空间。让我们设置总宽度为 250 像素的元素:

div {
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

最终元素的总宽度计算公式是这样的:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距


一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可


CSS 边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

CSS自学手册-第3章 插图2

边框样式属性指定要显示什么样的边界。

Remark border-style属性用来定义边框的样式

border-style 值:

none: 默认无边框

CSS自学手册-第3章 插图4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title> 
<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;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框</p>
</body>

</html>

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等),或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin。

注意:CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,而另一个用户则分别设置为 3px、2px 和 1px。

p.one
{
    border-style:solid;
    border-width:5px;
}
p.two
{
    border-style:solid;
    border-width:medium;
}

border-color属性用于设置边框的颜色。可以设置的颜色:

  • name – 指定颜色的名称,如 “red”
  • RGB – 指定 RGB 值, 如 “rgb(255,0,0)”
  • Hex – 指定16进制值, 如 “#ff0000”

您还可以设置边框的颜色为”transparent”。

注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。

p.one
{
    border-style:solid;
    border-color:red;
}
p.two
{
    border-style:solid;
    border-color:#98bf21;
}

在CSS中,可以指定不同的侧面不同的边框:

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

上面的例子也可以设置一个单一属性:

border-style:dotted solid;

border-style属性可以有1-4个值:

  • 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

上面的例子用了border-style。然而,它也可以和border-width 、 border-color一起使用。


上面的例子用了很多属性来设置边框。

你也可以在一个属性中设置边框。

你可以在”border”属性中设置:

  • border-width
  • border-style (required)
  • border-color
border:5px solid red;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title>
<style>
p 
{
	border-style:solid;
	border-top:thick double #ff0000;
}
</style>
</head>

<body>
<p>段落中的一些文本。</p>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title>
<style>
p {border-style:solid;}
p.none {border-bottom-style:none;}
p.dotted {border-bottom-style:dotted;}
p.dashed {border-bottom-style:dashed;}
p.solid {border-bottom-style:solid;}
p.double {border-bottom-style:double;}
p.groove {border-bottom-style:groove;}
p.ridge {border-bottom-style:ridge;}
p.inset {border-bottom-style:inset;}
p.outset {border-bottom-style:outset;}
</style>
</head>

<body>
<p class="none">无底边界。</p>
<p class="dotted">点底边界。</p>
<p class="dashed">虚线底边界。</p>
<p class="solid">实线底边界。</p>
<p class="double">双线底边界。</p>
<p class="groove">凹槽底边界。</p>
<p class="ridge">垄状底边界。</p>
<p class="inset">嵌入底边界。</p>
<p class="outset">外凸底边界。</p>
</body>
</html>

复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title> 
<style>
p 
{
	border-style:solid;
	border-left-width:15px;
}
</style>
</head>

<body>
<p><b>注意:</b>"border-left-width" 单独使用没有效果.要先使用 "border-style" 属性设置borders.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title>
<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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title>
<style>
p 
{
	border-style:solid;
	border-right-color:#ff0000;
}
</style>
</head>

<body>
<p>这是段落中的一些文本。</p>
</body>
</html>


属性描述
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设置元素的上边框的宽度。
border-radius设置圆角的边框。

border-style:属性1,属性2,属性3,属性4

上->右->下->左

border-style:属性1,属性2,属性3

上->左右->下

border-style:属性1,属性2

上下->左右

border-style:属性1

上下左右属性相同


CSS 轮廓-outline

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

轮廓(outline)属性指定元素轮廓的样式、颜色和宽度


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title> 
<style>
p 
{
	border:1px solid red;
	outline:green dotted thick;
}
</style>
</head>

<body>
<p><b>注意:</b> 如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta c元宇宙之家-liboven.cn
<title>菜鸟教程(runoob.com)</title> 
<style>
p {border:1px solid red;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>
</head>
<body>

<p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓</p>
<p class="ridge">垄状轮廓</p>
<p class="inset">嵌入轮廓</p>
<p class="outset">外凸轮廓</p>
<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
</body>
</html>

复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title> 
<style>
p 
{
	border:1px solid red;
	outline-style:dotted;
	outline-color:#00ff00;
}
</style>
</head>

<body>

<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
</body>
</html>


轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

Outline

“CSS” 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)

属性说明CSS
outline在一个声明中设置所有的轮廓属性outline-color
outline-style
outline-width
inherit
2
outline-color设置轮廓的颜色color-name
hex-number
rgb-number
invert
inherit
2
outline-style设置轮廓的样式none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-width设置轮廓的宽度thin
medium
thick
length
inherit
2

1.outline是不占空间的,既不会增加额外的width或者height(这样不会导致浏览器渲染时出现reflow或是repaint)

2.outline有可能是非矩形的(火狐浏览器下)


CSS 填充 padding

CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。

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

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

CSS自学手册-第3章 插图6

可能的值

说明
length定义一个固定的填充(像素, pt, em,等)
%使用百分比值定义一个填充

在CSS中,它可以指定不同的侧面不同的填充:

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
  • 上内边距是 25px
  • 右内边距是 50px
  • 下内边距是 25px
  • 左内边距是 50px

为了缩短代码,它可以在一个属性中指定的所有填充属性。

这就是所谓的简写属性。所有的填充属性的简写属性是 padding :

padding:25px 50px;

Padding属性,可以有一到四个值。

  padding:25px 50px 75px 100px;

  • 上填充为25px
  • 右填充为50px
  • 下填充为75px
  • 左填充为100px

  padding:25px 50px 75px;

  • 上填充为25px
  • 左右填充为50px
  • 下填充为75px

  padding:25px 50px;

  • 上下填充为25px
  • 左右填充为50px

  padding:25px;

  • 所有的填充都是25px

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title>
<style>
p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}
</style>
</head>

<body>
<p class="ex1">这个文本两边的填充边距一样。每边的填充边距为2厘米。</p>
<p class="ex2">这个文本的顶部和底部填充边距都为0.5厘米,左右的填充边距为3厘米。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title>
<style>
p.padding {padding-left:2cm;}
p.padding2 {padding-left:50%;}
</style>
</head>

<body>
<p>这是一个没有左填充边距的文本。</p>
<p class="padding">这个文本的左填充边距为2厘米。</p>
<p class="padding2">这个文本的左填充边距为50%。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title>
<style>
p.padding {padding-right:2cm;}
p.padding2 {padding-right:50%;}
</style>
</head>
​
<body>
<p>这是一个没有右填充边距的文本。这是一个没有右填充边距的文本。这是一个没有右填充边距的文本。</p>
<p class="padding">这个文本的右填充边距为2厘米。这个文本的右填充边距为2厘米。这个文本的右填充边距为2厘米。</p>
<p class="padding2">这个文本的右填充边距为50%。这个文本的右填充边距为50%。这个文本的右填充边距为50%。</p>
</body>
</html>

复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title>
<style>
p.padding {padding-top:2cm;}
p.padding2 {padding-top:50%;}
</style>
</head>

<body>
<p>这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。这是一个没有上部填充边距的文本。</p>
<p class="padding">这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。这个文本的上部填充边距为2厘米。</p>
<p class="padding2">这个文本的上部填充边距为50%。这个文本的上部填充边距为50%。这个文本的上部填充边距为50%。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>元宇宙之家-liboven.cn</title>
<style>
p.padding {padding-bottom:25px;}
p.padding2 {padding-bottom:50%;}
</style>
</head>

<body>
<p>这是一个没有底部填充边距的文本。这是一个没有底部填充边距的文本。这是一个没有底部填充边距的文本。</p>
<p class="padding">这个文本的底部填充边距为 25px。这个文本的底部填充边距为 25px。这个文本的底部填充边距为 25px。</p>
<p class="padding2">这个文本的底部填充边距为 50%。这个文本的底部填充边距为 50%。这个文本的底部填充边距为 50%。</p>
</body>
</html>


属性说明
padding使用简写属性设置在一个声明中的所有填充属性
padding-bottom设置元素的底部填充
padding-left设置元素的左部填充
padding-right设置元素的右部填充
padding-top设置元素的顶部填充

padding: 10px;             /* 意思是上下左右值全是 10px */
padding:5px 10px;          /* 意思是上下为 5px,左右为 10px */
padding:1px 2px 3px 4px;   /* 这个写法意思是:上为 1px,右为 2px,下为 3px,左为 4px */
padding:5px 10px 7px;      /* 这种写法意思是:上为 5px,左右为 10px,下为 7px */

注意:padding 后面 4 个值定义的顺序分别为 — 上 右 下 左

而 padding-top 或者 padding-bottom 这种写法,只是单方面的定义了一个方向的值,这样写会增加 CSS 代码的长度,增加 CSS 样式的代码量,拖慢页面的加载速度。


padding:填充

padding-top:上边距

padding-bottom:下边距

padding-left:左边距

padding-right:右边距


复制代码,点击 “尝试一下” 按钮,粘贴到 HTML运行测试工具查 看实例!

对于 margin 和 padding ,百分比按照父元素的宽计算, 这只发生在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下。

当书写模式变成纵向的时候,其参照将会变成包含块的高度。

对于定位元素,其百分比是按照定位了的父元素来计算(未定位的父元素会被跳过)。


margin 是指从自身边框到另一个容器边框之间的距离,就是容器外距离。(外边距)

padding 是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。(内边距)

(1)padding-left:10px;/margin-left:10px;               左内/外边距
(2)padding-right:10px;/margin-right:10px;              右内/外边距
(3)padding-top:10px;/margin-top:10px;                上内/外边距
(4)padding-bottom:10px/margin-bottom:10px;               下内/外边距
(5)padding:10px;/margin:10px;                       四边统一内/外边距
(6)padding:10px 20px;/margin:10px 20px;               上下、左右内/外边距
(7)padding:10px 20px 30px; /margin:10px 20px 30px;          上、左右、下内/外边距
(8)padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px;     上、右、下、左内/外边距

注意:将 padding 设置为负值无效:margin:0 auto; 只对块级元素起作用


温馨提示:本文最后更新于2023-01-19 03:24:25,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞28赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容