关于CSS(第四章-盒子)重要!!

tech2022-07-05  247

盒子属性(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);

HSLRGBAHSLA

background-image

为元素设置一个背景图片

取值

noneurl()

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

为元素指定边框的颜色

取值

关键字十六进制RGBHSLRGBAHSLA

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:标题位于表格的下方
最新回复(0)