10bet后端码农谈前端(CSS篇)第六课:盒子模型,

来源:http://www.chinese-glasses.com 作者:Web前端 人气:97 发布时间:2020-03-31
摘要:时间: 2019-10-24阅读: 65标签:属性border属性介绍border属性设置元素边框。边框3个要素如:粗细、线型、颜色。边框线型属性值说明表如: 后端码农谈前端(CSS篇)第六课:盒子模型,后端

时间: 2019-10-24阅读: 65标签: 属性border属性介绍border属性设置元素边框。边框3个要素如:粗细、线型、颜色。边框线型属性值说明表如:

后端码农谈前端(CSS篇)第六课:盒子模型,后端css

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

提示:背景应用于由内容和内边距、边框组成的区域。

属性指

一、CSS 内边距属性

属性 描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。

属性值:

auto:浏览器计算内边距。

length:规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。

%:规定基于父元素的宽度的百分比的内边距。

inherit:规定应该从父元素继承内边距。

描述

二、CSS 边框属性

none定义无边框。hidden与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于 border-width 的值。groove定义 3D 凹槽边框。其效果取决于 border-color 的值。ridge定义 3D 垄状边框。其效果取决于 border-color 的值。inset定义 3D inset 边框。其效果取决于 border-color 的值。outset定义 3D outset 边框。其效果取决于 border-color 的值。inherit规定应该从父元素继承边框样式。边框方向属性值说明表如:

1、border

属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。

属性

2、border-style

属性 描述
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-bottom-style 设置元素的下边框的样式。
border-left-style 设置元素的左边框的样式。
border-right-style 设置元素的右边框的样式。
border-top-style 设置元素的上边框的样式。

属性值:

none:定义无边框。

hidden:与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。

dotted:定义点状边框。在大多数浏览器中呈现为实线。

dashed:定义虚线。在大多数浏览器中呈现为实线。

solid:定义实线。

double:定义双线。双线的宽度等于 border-width 的值。

groove:定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge:定义 3D 垄状边框。其效果取决于 border-color 的值。

inset:定义 3D inset 边框。其效果取决于 border-color 的值。

outset:定义 3D outset 边框。其效果取决于 border-color 的值。

inherit:规定应该从父元素继承边框样式。

描述

3、border-width

属性 描述
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-bottom-width 设置元素的下边框的宽度。
border-left-width 设置元素的左边框的宽度。
border-right-width 设置元素的右边框的宽度。
border-top-width 设置元素的上边框的宽度。

属性值:

thin:定义细的边框。

medium:默认。定义中等的边框。

thick:定义粗的边框。

length:允许您自定义边框的宽度。

inherit“规定应该从父元素继承边框宽度。

border-top设置元素上边框。border-bottom设置元素下边框。border-left设置元素左边框。border-right设置元素右边框。边框实践实践代码:

4、border-color

属性 描述
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom-color 设置元素的下边框的颜色。
border-left-color 设置元素的左边框的颜色。
border-right-color 设置元素的右边框的颜色。
border-top-color 设置元素的上边框的颜色。

color_name:规定颜色值为颜色名称的边框颜色(比如 red)。

hex_number:规定颜色值为十六进制值的边框颜色(比如 #ff0000)。

rgb_number:规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。

transparent:默认值。边框颜色为透明。

inherit:规定应该从父元素继承边框颜色。

Copy!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" title边框/title style .box{ width: 200px; height: 100px; border: 1px solid red; } /style/headbody div  微笑是最初的信仰 /div/body/html

三、CSS 外边距属性

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

属性值:

auto:浏览器计算外边距。

length:规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。

%:规定基于父元素的宽度的百分比的外边距。

inherit:规定应该从父元素继承外边距。

注意:边框颜色可以省略不写,默认为黑色。如果其他2个属性不写就不会显示边框。设置元素边框方向实践代码块

四、外边距合并:

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

http://www.bkjia.com/Javascript/973801.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/973801.htmlTechArticle后端码农谈前端(CSS篇)第六课:盒子模型,后端css 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景...

Copy!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" title边框/title style .box{ width: 200px; height: 100px; border-top: 2px double red; border-bottom: 2px ridge lawngreen; border-left: 2px inset darkorange ; border-right:2px groove darkblue; } /style/headbody div  微笑是最初的信仰 /div/body/html

display属性介绍display属性它是显示的意思,display属性可以将行内元素与块级元素之间相互转换,将隐藏的元素设置显示状态或将显示的元素设置隐藏状态。display属性值说明表如下:

本文由10bet发布于Web前端,转载请注明出处:10bet后端码农谈前端(CSS篇)第六课:盒子模型,

关键词:

最火资讯