盒子属性(Boxproperties)
文档中的每个元素都可以被看作是一个矩形盒子。
-
width&height用于设置内容区的宽高,该片区域用于显示内容。盒子高度默认为内容的高度。
-
padding代表内容盒子的外边界与外边框的内边界之间的距离。
-
border设定介于padding的外边缘与margin的内边缘之间,默认值为0。
-
margin代表盒子四周的区域。设值方法与padding类似。相邻元素的边框会合并(margincollapsing)
盒子模型
默认盒子模型
使用box-sizing属性可以改变盒子模型,取值“content-box”的盒子为默认盒子模型。width属性仅表示盒子内容所占的宽度height属性仅表示盒子内容所占的高度
边框盒子模型
使用box-sizing属性可以改变盒子模型,取值“border-box”的盒子为边框盒子模型。width=width+padding-left+padding-right+border-left+border-right
盒子背景样式-background
背景(backgrounds)
- background-color 为元素设置一种颜色
- background-image 为原素设置一个背景图片
- background-clip 设定背景的覆盖范围
- background-origin 设定背景的起始点
- background-position设置为背景图像初始位置
- background-repeat设置背景图片的重复方式
- background-attachment设置背景图片的固定点
- background-size设置背景的大小
- background背景设置的速记写法
background-color
为元素设置颜色
取值
- 关键字
red、orange、yellow…
color:red;
- 十六进制
#333333 ==> #333
color:#333;
- RGB
r 红色
g 绿色
b 蓝色
color:rgb(0,0,0);
- HSL
- RGBA
- HSLA
background-image
为元素设置一个背景图片
取值
- none
- url()
background-clip
设置背景的覆盖范围
取值
- border-box:背景位于边框以外
- padding-box:背景位于内边距以内
- content-box:背景位于内容区
background-origin
设定背景图片的起始覆盖点
取值
- border-box:背景图片从边框的外边缘开始绘制
- padding-box:背景图片从内边距的外边缘开始绘制
- content-box:背景图片绘制在内容区
background-position
设定背景图片的起始覆盖点
取值
- 关键字
- 坐标
background-repeat
设置为背景图像的重复方式
取值
- repeat:为了覆盖整个背景范围,背景图片尽可能多的重复,在背景边缘切割(clipping)最后一个图片以使用整个背景范围。
- space:使用空白分隔开图片,尽可能使背景图片占满整个屏幕而不使用切割(clipping)
- round:将图片压缩或者是扩展以适应整个背景范围,不使用切割
- no-repeat:不重复
background-attachment
设置为背景图像的固定点
取值
- fixed:背景固定在视口上
- scroll:背景固定在自身元素上
- local:背景固定在自身元素的内容上
background-size
设置背景的大小
取值
- cover:背景铺满整个屏幕,(尽量不要使用大图覆盖小范围)
background
背景相关属性的速记写法
取值
[<attachment>][<clip>][<color>][<image>][<position>][<repeat>]
盒子边框样式-border
边框(border)
- border-width:为元素指定边框的宽度
- border-style为元素指定边框样式
- border-color为元素指定边框颜色
- border-radius为元素指定圆角边框的半径
- border-image为元素设定边框背景
border-image-source用于加载作为边框的图片
border-image-slice用于切割边框图片
border-image-repeat用于设置边框图片重复方式
- border边框相关属性的速记写法
border-width
为元素指定边框的宽度
取值
- 关键字:thin、medium、thick
- 单位:px、em
border-style
为元素指定边框的样式
取值
- none:不设置
- hidden:隐藏
- dotted:显示一系列的点
- dashed:显示一系列小线段
- solid:显示一条单一的实心直线
- double:显示两条实心直线
- groove:边框雕刻效果(与ridge相反)
- ridge:与groove相反
- inset:嵌入式边界框(与outset相反)
- outset:突出的边界框
- …
border-color
为元素指定边框的颜色
取值
- 关键字
- 十六进制
- RGB
- HSL
- RGBA
- HSLA
border-radius
为元素指定圆角边框的半径
取值
- 绝对值:px、mm、cm
- 相对值:em、rem
border-image
为元素设定边框背景的速记写法
子属性:
-
border-image-source用于加载作为边框的图片
url()
-
border-image-slice用于切割边框图片
onevalue:alltheslicesarethesamesize
Twovalues:topandbottom,leftandright
Threevalues:Top,leftandright,bottom
Fourvalues:Top,right,bottom,left
- border-image-repeat用于设置边框图片重复方式
stretch:拉伸,不推荐;repeat:重复切割;
round:重复自适应;space:重复自适应;
表格样式 table
表格(Stylingtables)
- table-layout指定显示表格的盒子,行,列的算法
- border-collapse指定表格的边框是合并还是分开
- caption-side指定caption坐落在表格的哪个位置上
- 其他
- background为表格添加背景色
table-layout
指定显示表格的盒子,行,列的算法
取值
- auto:【默认值】绝大多数浏览器采用的一种布局表格的方式。table以及cell的宽度取决于包含在其中的内容
- fixed:table的宽度以及列的宽度取决于表格的第一行各列设定的宽度
表格样式tablelborder-collapse
指定表格的边框是合并还是分开
取值
- separate:【默认值】分开模式,表示相邻的两个格子都有独立边框
- collapse:合并模式,表示相邻的两个格子共享边框
caption-side
指定caption坐落在表格的哪个位置上
取值
- top:标题位于表格的上方
- bottom:标题位于表格的下方