当前位置:首页 > css相关 > 正文内容

三剑客实战之Css入门基础知识[框模型及轮廓颜色一]

CSS 框模型:

CSS 框模型实质上是一个包围每个 HTML 元素的框。所有 HTML 元素都可以视为方框。它包括:内边距、外边距、边框以及实际的内容。在谈论布局和设计时,会使用术语“框模型”或“盒模型”。'框模型'允许我们在元素周围定义元素之间的空间或者添加边框。对不同部分的说明:

CSS框模型_uuucd.cn.jpg

边框       -围绕内边距和内容的边框。

外边距    -清除边界外的区域。外边距是透明的。

内边距    -清除内容周围的区域。内边距是透明的。

内容       -框的内容,其中显示文本和图像。


元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距的边缘是边框,内边距呈现了元素的背景;边框以外是外边距,外边距默认是透明的,为此并不会遮挡其后的元素。友情提示:背景应用于由内边距、边框和内容组成的区域。

边框和外边距、内边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的  padding 和 margin 设置为零来覆盖这些浏览器样式。可以使用通用选择器对所有元素进行设置或分别进行:

* {
  margin: 0;
  padding: 0;
}


在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距;内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边:

CSS框模型的宽度和高度_uuucd.cn.jpg

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

演示框模型关键代码:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

元素的宽度和高度

为了在所有浏览器中正确设置元素的宽度和高度,您需要了解框模型如何工作。重要提醒:要计算元素的完整大小,还必须把内边距、边框和外边距加起来。使用 CSS 设置元素的 height 和 width 属性时,需要设置内容区域的宽度和高度。

元素的宽度和高度关键代码演示

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

计算如下:

320px(宽度)
+ 20px(左+右内边距)
+ 10px(左+右边框)
+ 0px(左+右外边距)
= 350px

元素的总高度应该这样计算:

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

元素的总宽度应该这样计算:

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距


CSS 轮廓

轮廓是在元素周围绘制的一条线,在边框之外,以凸显元素。 拥有如下轮廓属性:

outline-style

outline-color

outline-width

outline-offset

outline

需要注意的关键:边框和轮廓不同!不同之处在于:轮廓也不是元素尺寸的一部分;元素的总宽度和高度不受轮廓线宽度的影响。轮廓是在元素边框之外绘制的,可能与其他内容重叠。


此元素拥有蓝色轮廓以及黑色边框,宽度为 15px。


CSS 轮廓样式

outline-style 属性指定轮廓的样式,并可设置如下值:

dotted - 定义点状的轮廓。

dashed - 定义虚线的轮廓。

solid - 定义实线的轮廓。

double - 定义双线的轮廓。

groove - 定义 3D 凹槽轮廓。

ridge - 定义 3D 凸槽轮廓。

inset - 定义 3D 凹边轮廓。

outset - 定义 3D 凸边轮廓。

none - 定义无轮廓。

hidden - 定义隐藏的轮廓。

提示:除非设置了 outline-style 属性,否则其他轮廓属性(在下一章中将详细介绍)都不会有任何作用!

下例代码中展示了不同的 outline-style 值,不同的轮廓样式关键代码示例:

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;}

示例图:

CSS轮廓样式关键代码示例.jpg

CSS 轮廓宽度

outline-width 属性指定轮廓的宽度,并可设置如下值之一:

thin          -(通常为 1px)

medium   -(通常为 3px)

thick        -(通常为 5px)

特定尺寸   -(以 px、pt、cm、em 计)

关键代码示例:

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}


扫描二维码推送至手机访问。

版权声明:本文由uuucd.cn发布,如需转载请注明出处。

本文链接:https://www.uuucd.cn/css/61.html

标签: css相关

相关文章

利用css隐藏元素的5种方法之[Display属性简介]

利用css隐藏元素的5种方法之[Display属性简介]

用 CSS 隐藏页面元素有许多种方法。但是每个方法之前是存在着细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法。你可以将 将 visibility 设为 hidden、将 display 设为 none、opacity 设为 0、...

Css 及 Html5之初学者基础教程[前端语言基础]

Css 及 Html5之初学者基础教程[前端语言基础]

前端语言基础:HTML5 & CSS(一) HTML5:超文本标记语言1) :基本概念Ω是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )Ö这些标签以<标签名称>的形式出现,用于标记...

三剑客实战之Css入门基础知识[css控制颜色]

三剑客实战之Css入门基础知识[css控制颜色]

css中,控制指定颜色是通过使用预定义的颜色名称,或 RGB、HEX、HSL、RGBA、HSLA 值,在 CSS 中,可以使用颜色名称来指定颜色,CSS/HTML 支持 140 种标准颜色名。CSS 文本颜色下面是简单设置文本的颜...

三剑客实战之Css入门基础知识[CSS 背景属性定义]

三剑客实战之Css入门基础知识[CSS 背景属性定义]

CSS 背景属性:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position background-color...

 三剑客实战之Css入门基础知识[css边框属性教程一]

三剑客实战之Css入门基础知识[css边框属性教程一]

CSS 边框属性关键词:borderborder 属性允许您指定元素边框的颜色和宽度以及样式。CSS 边框样式关键词:border-style border-style 属性作用于指定显示的边框外观类型。可以设置一到四个值(用于上...

三剑客实战之Css入门基础知识[css边框属性教程二]

三剑客实战之Css入门基础知识[css边框属性教程二]

CSS 圆角边框关键词:border-radius 用于向元素添加圆角边框关键代码及举例:p { border: 3px; solid red;/*普通边框*/ } p ...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。