哈哈哈哈。翻出了css,随便写写 ......
盒模型简介
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
- margin(外边距) - 边界外的透明区域。由外边距边界限制,用空白区域扩展边框区域,以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。
- border(边框) - 边框在填充和内容周围。由边框边界限制,扩展自内边距区域,是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。
- padding(内边距) - 内容周围的透明区域。由内边距边界限制,扩展自内容区域,负责延伸内容区域的背景,填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。
- content(内容) - 实际文本和图像。由内容边界限制,容纳着元素的“真实”内容,例如文本、图像,或是一个视频播放器。它的尺寸为内容宽度(或称 content-box 宽度)和内容高度(或称 content-box 高度)。
为了正确设置元素在所有浏览器中的宽度和高度,我们需要知道盒模型是如何工作的。
下面介绍css的两种盒模型。
- W3C的标准盒模型(标准盒模型)
width是只指content部分。 - IE盒模型 (怪异盒模型)
width包含content、padding、border部分。
image.png
在css3中有box-sizing属性可以来改变盒模型的类型,值为content-box,代表W3C盒模型,盒子定义宽高 = 内容宽高(content),为默认值;值为border-box代表IE盒模型,盒子定义宽高 = 内容宽高(content) + 内边距 (padding)+ 边框(border)。
css 边框
可以使用border属性。border属性是一个用于设置各种单独的边界属性的简写属性。它可以用于设置一个或多个以下属性的值:
- border-width - 设置边框的宽度。
- border-style - 设置用于绘制边框的样式。
- border-color - 设置边框的颜色。如果这个值没有设置,它的默认值是元素的color属性值(是文字颜色而非背景色)。
border-width 属性
设置盒子模型的边框宽度。此属性可以有一到四个值。
默认值: medium
继承性: 否
属性值
- thin: 定义细的边框。
- medium: 定义中等边线的边框。
- thick: 定义宽边线的边框。
用法
/* 用法一:明确指定宽度值 */
/* 当给定一个宽度时,该宽度作用于选定元素的所有边框 */
border-width: 5px;
/* 当给定两个宽度时,该宽度分别依次作用于选定元素的横边与纵边 */
border-width: 2px 1.5em;
/* 当给定三个宽度时,该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
border-width: 1px 2em 1.5cm;
/* 当给定四个宽度时,该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边 (即按顺时针依次作用) */
border-width: 1px 2em 0 4rem;
/* 用法二:使用全局关键字 */
/* 可以使用的全局关键字有:inherit(继承),initial(初始值),unset(不设置) */
border-width: inherit;
/* 用法三:使用作用于 border-width 的关键字 */
border-width: thin;
border-width: medium;
border-width: thick;
设置border-width
border-style 属性
border-style属性设置一个元素的边框的样式。此属性可以有一到四个值。
默认值: none
继承性: 否
属性值
- none:和关键字 hidden 类似,不显示边框。默认值。
- hidden:和关键字 none 类似,不显示边框。
- dotted:显示为一系列圆点。
- dashed:显示为一系列短的方形虚线。
- solid:显示为一条实线。
- double:显示为一条双实线。
- groove:显示为有雕刻效果的边框。
- ridge:显示为有浮雕效果的边框。
- inset:显示为有陷入效果的边框,样式与outset相反。
- outset:显示为有突出效果的边框,样式与inset相反。
用法
/* 用法一:明确指定宽度值 */
/* 当给定一个宽度时,该宽度作用于选定元素的所有边框 */
border-style: dashed;
/* horizontal | vertical */
/* 当给定两个宽度时,该宽度分别依次作用于选定元素的横边与纵边 */
border-style: dotted solid;
/* top | horizontal | bottom */
/* 当给定三个宽度时,该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
border-style: hidden double dashed;
/* top | right | bottom | left */
/* 当给定四个宽度时,该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边 (即按顺时针依次作用) */
border-style: none solid dotted dashed;
/* 用法二:使用全局关键字 */
/* 可以使用的全局关键字有:inherit(继承),initial(初始值),unset(不设置) */
border-style: inherit;
border-style: initial;
border-style: unset;
设置border-style
border-color 属性
border-style属性是一个用于设置元素四个边框颜色的快捷属性。此属性可以有一到四个值。
默认值: currentcolor
继承性: 否
属性值
- 预定义的颜色名称:规定颜色值为颜色名称的颜色(比如 red)。
- 十六进制颜色:规定颜色值为十六进制值的颜色(比如 #ff0000)。
- RGB颜色: 规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。
用法
/* border-color: color; 单值语法 */
border-color: red;
/* border-color: vertical horizontal; 双值语法*/
border-color: red #f015ca;
/* border-color: top horizontal bottom; 三值语法 */
border-color: red yellow green;
/* border-color: top right bottom left; 四值语法 */
border-color: red yellow green blue;
/* 全局关键字 */
border-color: inherit
设置border-color
border 简写用法
border: solid;
border: dashed red;
border: 4mm ridge rgb(170, 50, 220);
border设置
内边距
padding属性设置一个元素的内边距,padding 区域指一个元素的内容和其边界之间的空间,该属性不能为负值。该属性可以有1到4个值。
默认值: 0
继承性: 否
属性值
- length:规定以具体单位计的填充值,比如像素、厘米等。默认值是 0。
- percentage:规定基于父元素的宽度的百分比的填充。
- 全局关键字:指定应该从父元素继承padding。
用法
/* 指定一个值时 该值指定四个边的内边距
指定两个值时 第一个值指定上下两边的内边距 第二个指定左右两边的内边距
指定三个值时 第一个指定上边的内边距.第二个指定左右两边 第三个指定下边
指定四个值时分别为上 右 下 左(顺时针顺序)*/
padding: 5%;
padding: 10px 20px;
padding: 10px 3% 20px;
padding: 1em 3px 30px 5px;
/* 简写模式相当于 */
padding-left: 1em; /* 左边距 */
padding-right: 3px;/* 右边距 */
padding-bottom: 30px;/* 下边距 */
padding-top: 5px;/* 上边距 */
设置padding内边距
外边距
margin属性为给定元素设置所有四个(上下左右)方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是: margin-top,margin-right,margin-bottom和margin-left。指定的外边距允许为负数。
默认值: 0
继承性: 否
属性值
- length:规定以具体单位计的填充值,比如像素、厘米等。默认值是 0。
- percentage:规定基于父元素的宽度的百分比的填充。
- auto:浏览器计算外边距。
- 全局关键字:指定应该从父元素继承padding。
用法
/* margin: style 单值语法 所有边缘 */
margin: 1em;
/* margin: vertical horizontal 二值语法 纵向 横向 */
margin: 5% auto;
/* margin: top horizontal bottom 三值语法 上 横向 下*/
margin: 1em auto 2em;
/* margin: top right bottom left 四值语法 上 右 下 左*/
margin: 2px 1em 0 auto;
/* auto 可以用来居中元素 */
margin: 0 auto;
/* 全局关键字 继承 */
margin: inherit;
设置外边距
总结
结束语
来呀,快活呀,反正有大把时光~