web前端学习(十九)——CSS3盒子模型(Box Model)、边框属性(border)及轮廓属性(outline)的相关设置

简介: web前端学习(十九)——CSS3盒子模型(Box Model)、边框属性(border)及轮廓属性(outline)的相关设置

1.CSS盒子模型(Box Model)


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

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

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

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


不同部分的说明:

·       Margin(外边距) - 清除边框外的区域,外边距是透明的。

·       Border(边框) - 围绕在内边距和内容外的边框。

·       Padding(内边距) - 清除内容周围的区域,内边距是透明的。

·       Content(内容) - 盒子的内容,显示文本和图像。

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

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

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

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

小实例: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>CSS简单学习</title>
    <style type="text/css">
      div {
        background-color: lightgray;
        border: 25px solid green;
        width: 300px;
        padding: 25px;
        margin: 25px;
      }
    </style>
  </head>
  <body>
    <h2>盒子模型小实例</h2>
    <p>CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p>
    <div>这里是盒子内的实际内容。有 25px 内间距,25px 外间距、25px 绿色边框。</div>
  </body>
</html>

2.CSS边框属性(border)


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

有关border(简写属性)、border-width(边框宽度)、border-style(边框样式)、border-color(边框颜色)的相关内容,可以参考这篇博文:https://blog.csdn.net/weixin_43823808/article/details/113251320


2.1 border-width属性(边框宽度)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p.one {
        border-style: solid;
        border-width: 5px;
      }
      p.two {
        border-style: solid;
        border-width: medium;
      }
      p.three {
        border-style: solid;
        border-width: 1px;
      }
    </style>
  </head>
  <body>
    <p class="one">这是一个段落。</p>
    <p class="two">这是一个段落。</p>
    <p class="three">这是一个段落。</p>
    <p><b>注意:</b>&quot;border-width&quot; 属性 如果单独使用则不起作用。要先使用 &quot;border-style&quot; 属性来设置边框。</p>
  </body>
</html>

2.2 border-color属性(边框颜色)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p.one {
        border-style: solid;
        border-color: red;
      }
      p.two {
        border-style: solid;
        border-color: blue;
      }
      p.three {
        border-style: solid;
        border-color: green;
      }
    </style>
  </head>
  <body>
    <p class="one">实线红色边框</p>
    <p class="two">实线蓝色边框</p>
    <p class="three">实线绿色边框</p>
    <p><b>注意:</b>&quot;border-color&quot; 属性 如果单独使用则不起作用. 要先使用 &quot;border-style&quot; 属性来设置边框。</p>
  </body>
</html>

2.3 border-style属性(边框样式)

border-top-styleborder-bottom-styleborder-left-styleborder-right-style四个属性可以简写为:border-style

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


·       border-style: a b c d;

·       上边框是 a

·       右边框是 b

·       底边框是 c

·       左边框是 d

·       border-style: a b c;

·       上边框是 a

·       左、右边框是 b

·       底边框是 c

·       border-style: a b;

·       上、底边框是 a

·       右、左边框是 b

·       border-style: a;

·       四面边框是 a


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

border-style:属性1,属性2,属性3:上->左右->

border-style:属性1,属性2:上下->左右

border-style:属性1:上下左右属性相同

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p {
        border-top-style: dotted;
        border-bottom-style: dotted;
        border-left-style: solid;
        border-right-style: solid;
      }
    </style>
  </head>
  <body>
    <p>这里设置了两种不同的边框样式</p>
  </body>
</html>

3.CSS轮廓属性(outline)


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

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


属性

说明

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


3.1 outline-style属性(轮廓样式)


outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围。

outline-style属性指定outline的样式。

描述

none

默认。定义无轮廓。

dotted

定义点状的轮廓。

dashed

定义虚线轮廓。

solid

定义实线轮廓。

double

定义双线轮廓。双线的宽度等同于 outline-width 的值。

groove

定义 3D 凹槽轮廓。此效果取决于 outline-color 值。

ridge

定义 3D 凸槽轮廓。此效果取决于 outline-color 值。

inset

定义 3D 凹边轮廓。此效果取决于 outline-color 值。

outset

定义 3D 凸边轮廓。此效果取决于 outline-color 值。

inherit

规定应该从父元素继承轮廓样式的设置。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      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>
  </body>
</html>

3.2 outline-width属性(轮廓宽度)

outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围。

outline-width指定轮廓的宽度。

注意: 请始终在outline-width属性之前声明outline-style属性。元素只有获得轮廓以后才能改变其轮廓的宽度。

描述

thin

规定细轮廓。

medium

默认。规定中等的轮廓。

thick

规定粗的轮廓。

length

允许您规定轮廓粗细的值。

inherit

规定应该从父元素继承轮廓宽度的设置。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p.one {
        border: 3px solid red;
        outline-style: double;
        outline-width: thick;
      }
      p.two {
        border: 3px solid red;
        outline-style: dotted;
        outline-width: 5px;
      }
    </style>
  </head>
  <body>
    <p class="one">这个段落设置了轮廓宽度和轮廓样式</p>
    <p class="two">这个段落设置了轮廓宽度和轮廓样式</p>
  </body>
</html>


3.3 outline-color属性(轮廓颜色)

outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围。

outline-color属性指定轮廓颜色。

注意: 请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。

描述

color

指定轮廓颜色。

invert

默认。执行颜色反转(逆向的颜色)。可使轮廓在不同的背景颜色中都是可见。

inherit

规定应该从父元素继承轮廓颜色的设置。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p {
        border: 3px solid red;
        outline-style: dashed;
        outline-color: #0000FF;
      }
    </style>
  </head>
  <body>
    <p>这个段落的边框和轮廓拥有不同的颜色</p>
  </body>
</html>

3.4 outline属性

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

outline简写属性在一个声明中设置所有的轮廓属性。

可以设置的属性分别是(按顺序):outline-coloroutline-styleoutline-width(顺序正好与border相反)

如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p {
        border: 3px solid red;
        outline: green dashed 3px;
      }
    </style>
  </head>
  <body>
    <p>这个段落的边框和轮廓均使用&quot;border&quot;和&quot;outline&quot;简写属性进行设置。</p>
  </body>
</html>

相关文章
|
1月前
|
资源调度 JavaScript 前端开发
IM跨平台技术学习(十一):环信基于Electron打包Web IM桌面端的技术实践
这次借着论证 Web IM端 SDK 是否可以在 Electron 生成的桌面端正常稳定使用,我决定把官方新推出的 webim-vue3-demo,打包到桌面端,并记录了这次验证的过程以及所遇到的问题和解决方法。
37 2
|
21天前
|
前端开发
CSS中的边框属性:border、border-width、border-color、border-style 详解
CSS中的边框属性:border、border-width、border-color、border-style 详解
120 44
|
17天前
|
前端开发
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
18 1
|
7天前
|
前端开发 JavaScript
使用CSS中的cursor属性值,常用的可设置参数,以及其他16中参数值的使用场景和示例代码
使用CSS中的cursor属性值,常用的可设置参数,以及其他16中参数值的使用场景和示例代码
13 0
|
1月前
|
前端开发 JavaScript 开发工具
Web前端开发学习资料:深度探索与开发实践
Web前端开发学习资料:深度探索与开发实践
21 3
|
1月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
44 3
|
1月前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
32 2
|
1月前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
38 2
|
28天前
|
前端开发
【Web开发】CSS教学(超详细,满满的干货)
【Web开发】CSS教学(超详细,满满的干货)
12 0
|
1月前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
24 0