CSS （cascading style sheet ）层叠样式表是前端对页面进行梳理美化的重要方式之一。
行内样式:
在标签中使用style属性进行样式的书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>这是普通div</div>
<!-- 行内样式 -->
<!-- 在标签内使用style属性 值为 样式名:对应样式值 多个样式之间使用空格分离 -->
<div style="color: red; font-size: 50px;">这是行内样式</div>
</body>
</html>优点：
可以精确的设置指定标签的样式，在进行样式设置时会优先考虑（因为其只在当前标签生效）
缺点：
只对书写标签生效，如果多个标签设置相同样式需要重复书写(一般不建议使用)
行内样式通过html标签属性进行修改，每个标签进行书写，不利与代码的修改，并且违背了html、css、js分别负责相应功能的规范
内部样式:
在当前html内部使用style标签+选择器的形式进行书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 内部样式通过不同的选择器选择要进行样式处理的标签
语法为：
选择器{属性:值;
属性:值;}
*/
div {
color: gray;
font-size: 60px;
}
</style>
</head>
<body>
<div>这是普通div</div>
<!-- 内部样式 -->
<!-- 在标签上直接书写样式 -->
<div class="d1">这是内部样式</div>
</body>
</html>优点：
可以通过选择器对当前页面的标签进行统一的样式设置,而且将样式操作与标签相分离
缺点：
只能设置当前页面内的标签样式，如果其他页面存在与当前页面对应标签相同的样式需要重复书写，如果书写样式过多可能导致页面加载过慢
外部样式:
在html外部使用以.css结尾的文件保存样式，在页面内使用link标签引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式 需要使用link标签进行加载 -->
<link rel="stylesheet" href="../css/d2.css">
</head>
<body>
<div>这是普通div</div>
<!-- 外部样式 -->
<!-- 书写语法与内部相同 只不过是将样式书写在指定的css文件中 页面通过链接引用 -->
<div class="d2">这是外部样式</div>
</body>
</html>优点：
在进行项目书写时可以统一管理样式，并且进行快速修改
缺点：
有时候会不需要的样式一同加载到当前页面,对于开发人员在书写样式时需要对整个项目样式进行全部了解后才能书写
在实际项目开发中这三种样式书写方式结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部样式 需要使用link标签进行加载 -->
<link rel="stylesheet" href="../css/d2.css">
<style>
/* 内部样式通过不同的选择器选择要进行样式处理的标签
语法为：
选择器{属性:值;
属性:值;}
*/
div {
color: gray;
font-size: 60px;
}
</style>
</head>
<body>
<div>这是普通div</div>
<!-- 行内样式 -->
<!-- 在标签内使用style属性 值为 样式名:对应样式值 多个样式之间使用空格分离 -->
<div style="color: red; font-size: 50px;">这是行内样式</div>
<!-- 内部样式 -->
<!-- 在标签上直接书写样式 -->
<div class="d1">这是内部样式</div>
<!-- 外部样式 -->
<!-- 书写语法与内部相同 只不过是将样式书写在指定的css文件中 页面通过链接引用 -->
<div class="d2">这是外部样式</div>
</body>
</html>注意：在页面中书写多种引用方式，将内部样式与外部样式书写在head标签中，因为这样会在页面加载时先将样式加载，防止客户先看到html标签无样式页面（如果网络过慢，外部样式加载出错也可能出现无样式页面），一般将外部样式链接书写在内部样式之上，这样可以先加载外部样式同时读取内部样式，并且内部、外部样式没有优先级概念，只是因为加载顺序以及常用的写法导致相同的样式外部被内部覆盖,实际根据选择器优先级决定.
当书写的样式为当前项目通用的样式时使用外部样式（尽量减少不必要冗余样式），当前页面唯一样式使用内部样式进行书写，对于外部与内部设置之后并且优先级混乱的情况不知道优先级设置（二次开发,尽量不要使用）
font字体样式
字体族
可以理解为在浏览器中对字体的分类
-
衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
-
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
-
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
-
草书字体（Cursive）- 模仿了人类的笔迹。
-
幻想字体（Fantasy）- 是装饰性/俏皮的字体。
font-family 字体
用于设置字体样式，在进行值书写时，可以书写多个作为备选值使用，进行分隔，并且如果书写的值为单个单词可以不书写双引号
select{
font-family:"字体1","字体2";
}font-style 倾斜样式
设置文本是否倾斜的样式 一般使用italic 属性值 类似于i标签
-
normal - 文字正常显示
-
italic - 文本以斜体显示
-
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
select{
font-style: italic ;
}font-weight 宽度样式
设置文本宽度
-
normal - 文字正常显示
-
blod- 文本加粗显示
-
bloder- 文本更粗显示
-
lighter- 文本以细体显示
-
number- 文本粗细数值(100 ~900)
select{
font-weight : blod ;
}font-variant 字体变形
在原有的基础上对字体数据进行变形
-
normal - 文字正常显示
-
small-caps- 将英文字母转换为大写字母并缩小
select{
font-variant : small-caps ;
}font-size 字体大小
用于设置字体的大小，页面字体默认大小为16px
-
单词- 代表对应大小的单词 xx-small、x-small、small、medium、large、x-large、xx-large
-
number- 设置指定值对应单位进行大小设置
-
%-设置百分比数值 对于默认百分比大小 一般使用em
一般通过px与em进行大小的设置，如果设置字体响应式操作使用vw或vh 1vw = 视口宽度的 1％
ie浏览器在进行字体大小设置时有可能不生效，所以在进行字体大小设置时伪类兼容浏览器一般的书写语法为
body{
font-size:100%;
}
select{
font-size:2em;
}
font 简写属性
font 属性是以下属性的简写属性：
-
font-style
-
font-variant
-
font-weight
-
font-size/line-height
-
font-family
可以通过font属性同时设置代表的简写属性，部分属性如果没有书写使用默认值
select{
font:italic small-caps bolder 50px/150px "sans-serif";
/* size与family是不够省略的 需要进行设置 */
}文本属性
是使用与对指定标签中文本进行格式化的属性
text-align 水平方向对其方式
在同一行内剩余位置不能存放下一个字符会进行换行，留出空白，对其方式就是空白相反的位置
-
left-(默认)水平居左
-
right-水平居右
-
center-水平居中
-
justify -两端对齐（对最后一行不生效）
text-align-last 两端对齐最后一行对齐方式
当设置两端对齐时最后一行由于没有填满一行所以不会进行对其，这个属性可以单独对这一行进行对齐设置
-
left-(默认)水平居左
-
right-水平居右
-
center-水平居中
-
justify -两端对齐（对最后一行不生效）
text-decoration-line 文本修饰线的位置
在指定文本插入线的位置
-
none 默认值 不显示线
-
underline-定义文本下的一条线。
-
overline-定义文本上的一条线。
-
line-through-定义穿过文本下的一条线。
text-decoration-color 文本修饰线的颜色
在设置插入线后进行颜色设置
text-decoration-style 文本修饰线的样式（形状）
在设置插入线后进行形状设置
-
solid-默认值。线条显示为单行。
-
double-线条显示为双线。
-
dotted-线条显示为点线。
-
dashed-线条显示为虚线。
-
wavy-线条显示为波浪线。
text-decoration 文本修饰简写属性
用于对文本进一步的修饰，可以设置三种修饰，线的位置、颜色、形状，其中位置必须，因为默认是不添加的
三个样式书写顺序没有限限制
select{
text-decoration: 位置 形状 颜色
}text-indent 文本首行缩进
设置当前标签内文本首行缩进距离，常用缩进为2em
letter-spacing 文本字符间距
设置当前标签内文本单个字符后距离下一个字符的间距（可以为负数）
word-spacing 单词间距
设置当前标签内单词文本间距(两个单词间间距)
white-space 文本内空格与换行处理方式
设置被浏览器忽略的空格与换行的显示
-
normal-默认值。默认。空白会被浏览器忽略。
-
pre-空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
-
nowrap-文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。
-
pre-wrap-保留空白符序列，但是正常地进行换行
-
pre-line-合并空白符序列，但是保留换行符。
text-overflow 溢出隐藏样式设置
设置的是文本溢出当前标签后显示的样式
需要设置当前文本overflow为hidden（隐藏）因为其属性默认值为visible（显示）所以设置了 white-space属性后溢出的数据会在当前行继续显示
-
ellipsis-使用省略号代替超出数据
text-shadow 文本阴影
x水平阴影长度 y垂直阴影长度 引用模糊 阴影颜色
select{
text-shadow: 2px 2px 5px red;
}css颜色
浏览器颜色书写分类常用三类rgb三原色设置、#十六进制三原色设置、系统默认预设颜色设置
2.1 rgb颜色设置
r-red红 g-green绿 b-blue蓝
使用三原色进行颜色设置,常用值两种
数值类型：0~255之间的整数
background-color: rgb(110, 110, 110);百分比类型：0~100%比例
background-color: rgb(20%,20%,20%);有时需要进行透明度设置需要使用rgba
a-alpha 透明度
可以在原有颜色的基础上进行透明度设置
background-color: rgba(20%,20%,20%,0.1);2.2 十六进制位数显示
本质与rgb相同但是书写形式语法相较于rgb更加简单
每位使用十六进制 0 1 2 3 4 5 6 7 8 9 A B C D E F
使用#红绿蓝每位两位的形式进行颜色选择
.d3{
background-color: #cceeff;
/* 使用十六进制进行颜色展示 */
/* 如果代表对应色为的两个字符相同 可以缩写为一个 */
background-color: #cef;
}
.d4{
background-color: #997766;
/* 使用十六进制进行颜色展示 */
/* 如果代表对应色为的两个字符相同 可以缩写为一个 */
background-color: #976;
}当然这种写法同样支持透明度的设置
.d5{
background-color: #997766aa;
/* 与rgba的透明设置相似 在最后以为使用十六进制进行颜色设置
如果为透明为00 但是不能像rgba一样设置1（ff） 一般如果不进行透明度设置不书写
*/
background-color: #9766aa;
}2.3 系统预设颜色
由系统内预设的通过颜色名称可以直接使用的颜色
.d6{
background-color:pink;
/* 为了避免不同浏览器设置rgb出现的颜色色差
系统提供了预设颜色将指定颜色设置好进行直接使用
*/
}但是系统预设的颜色中不会进行透明度设置，所以如果是同系统预设的颜色进行设置，在设置透明度时可能需要使用其他的标签属性进行设置
opacity: 0.5;设置元素不透明度 可以使用数值0~1 与百分比的形式进行透明度设置
三、列表样式
3.1 list-style-type
设置列表序列样式,常用值
none- 空 不进行样式显示
disc- 默认显示 实心圆
circle- 空心圆
square- 实心正方形
list-style-type: disc;
/* 默认：disc 实心圆 */
list-style-type: circle;
/* 空心圆 */
list-style-type: none;
/* 不显示列表 */
list-style-type: decimal;
/* 单位数字列表 */
list-style-type: decimal-leading-zero;
/* 多为数字列表 空位补0 */
list-style-type:square;
/* 实心正方形 */
list-style-type: lower-alpha;
/* lower-alpha 小写字母 upper-alpha 大写字母 */
list-style-type: lower-greek;
/* lower-greek 希腊字母 */
list-style-type: lower-roman;
/* lower-roman 小写罗马字母 upper-roman 大写罗马字母*/3.2 list-style-position
设置列表序号显示的位置，常用值
outside- 默认显示在列表默认区域内，以默认区域对其
inside- 显示在对应文本内容区域内，以文本选项区域对其
list-style-position: outside;
/* 默认 在对应序列位置 右对齐展示 不会影响内容位置 */
list-style-position: inside;
/* 在标签对应文本位置左对齐展示 会根据标签让文本后移 */如果 list-style-type设置为none 这该属性失效
3.3 list-style-image
设置列表序列以图片的形式展示，常用值
none- 默认不进行图片设置
url()- 图片地址
list-style-image: none;
/* 默认 none 不进行样式图片设置 */
list-style-image: url(../img/sdwlb1.gif);
/* 默认的设置顺序是先获取显示的图片进行序列设置 如果序列图片加载失败
使用type设置的样式
*/这个属性不是一个完善的属性，不能修改插入图片的大小，而且实际上这个属性就是通过伪元素进行添加的，所以一般在实际开发过程中不设置这个属性，而是通过伪元素的形式进行序列图片的插入
3.4 list-style
设置列表序列的简写属性
建议书写顺序 list-style：list-style-type list-style-position list-style-image
/* 简写属性 */
list-style: circle inside url(../img/sdwlb2.gif);虽然不书写会进行默认值复制，但是建议在书写引用图片时对自定义类型进行设置，主要是防止图片加载失败显示默认样式
四、overflow溢出属性样式
当前标签内容（大部分时是文本）超出当前标签时对超出标签内容样式的设置
常用值,
visible- 默认值 溢出显示
hidden- 溢出隐藏
scroll- 滚动条显示（默认显示滚动条）
auto- 滚动条自动显示（只有存在溢出时显示滚动条）
.overflow {
overflow: visible;
/* 默认值 可见 溢出标签内容会直接显示*/
overflow: hidden;
/* 隐藏 将溢出标签的内容隐藏 通常与text-overflow一同使用设置隐藏后的样式*/
overflow: scroll;
/* 滚动条显示 出现滚动条可以使用滚动条的形式进行内容的查看 */
/* 不论内容是否溢出都提供滚动条 */
overflow: auto;
/* 自动滚动条提示 当内容溢出时提供滚动条 不溢出时没有任何显示 */
}五、display显示属性样式
用于定义元素在页面显示的样式（以什么类型的类别显示）
默认值根据标签类别自动设置
常用值
none- 无样式，再也没无样式显示就是隐藏 会将占用区域让出
block- 块元素 将标签以块级元素展示
inline- 行内元素 将标签以行内元素展示
inline-block- 行内块级元素 将标签以行内块级元素展示
有时在进行样式设置时需要设置宽高盒子模型等样式而行内元素对这些属性失效，如果进行样式设置可以通过修改display属性修改其标签显示样式使其生效
div {
background-color: sandybrown;
display: none;
/* 无样式显示 在页面不显示 */
display: block;
/* 显示为块级元素 */
display: inline;
/* 显示位行内元素 */
display: inline-block;
/* 默认值根据标签样式自动设置 */
}六、visibility可见性属性样式
用于设置指定标签在当前页面是否可见，如果设置位隐藏，则在当前页面隐藏显示
常用值
visible- 默认值 标签默认可见
hidden-隐藏 将当前页面指定元素隐藏（所占区域依旧不变）
div:nth-of-type(2) {
visibility: visible;
/* 默认值 visible 可见 标签在页面可见 */
visibility: hidden;
/* hidden隐藏 标签在页面隐藏 */
}在实际开发过程中对于display与visibility的使用是根据需求决定，如果指定元素在页面需要通过位置进行效果时使用display，例如左侧导航栏，如果进行其他样式的展示隐藏建议使用visibility 因为不会随着隐藏进行位置的改变,在开发过程中也可以一同使用
七、盒子模型
将页面中每个标签元素当做一个盒子，通过设置盒子的相应属性实现样式的展示，之后可以通过对盒子位置的设将页面标签位置进行设置
7.1 width 宽度
用于设置盒子元素的宽度
常用值
auto- 默认值 根据页面自动计算
number- 数值常用单位px 设置以像素位单位的固定长度的宽
%- 百分比 设置相对于父元素（父盒子）（要求父级以及向上拥有固定的宽度-浏览器宽）
7.2 height 高度
用于设置盒子元素的高度
常用值
auto- 默认值 根据页面自动计算
number- 数值常用单位px 设置以像素位单位的固定长度的宽
%- 百分比 设置相对于父元素（父盒子）（要求父级以及向上拥有固定的高度）
由于在进行页面搭建时一般使用垂直布局所以页面的高度不定，如果想全部使用百分比进行高度设置那么，必须设置父标签的高度
、box盒子模型
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模型。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
2.1 内容
指的是当前标签所包含的元素内容（包含其他盒子、文本、图片等内容,内容区有三个属性，width、height 和overflow
2.1.1 宽度
当块元素设置以一定比例跟随父容器进行宽度改变时，为了不影响元素的展示效果可以通过设置最值的形式进行限制，使其只能在指定的范围内进行改变，
maxwidth：最大宽度
minwidth：最小宽度
.d1{
width: 60%;
background-color: aquamarine;
max-width: 700px;
min-width: 500px;
}2.2.2 高度
当块元素设置以一定比例跟随父容器进行宽度改变时，为了不影响元素的展示效果可以通过设置最值的形式进行限制，使其只能在指定的范围内进行改变
maxheight：最大高度
minheight：最小高度
.d1 {
width: 60%;
height: 60%;
background-color: aquamarine;
max-height: 400px;
min-height: 200px;
}2.2 内边距
是内容区和[边框](https://baike.baidu.com/item/边框/7166650)之间的空间。填充的属性有五种 ，即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。
由于设置的内容与边框的距离所以不能设置负值
padding
padding 是padding -top、padding -bottom、padding -left、padding-right四个属性的简写形式
可以通过这一个属性进行简写拥有四种不同的简写方法为对应四个属性赋值
①当分别需要为不同内边距设置不同值时
②当需要为左右设置相同边距时
div {
background-color: darkgray;
height: 200px;
width: 200px;
padding: 10px 11px 12px ;
/* 上 左右 下 */
}
③当需要上下边距相同 左右边距相同时
div {
background-color: darkgray;
height: 200px;
width: 200px;
padding: 10px 11px ;
}
④当四内边距属性值设置相同时
div {
background-color: darkgray;
height: 200px;
width: 200px;
padding: 10px ;
}
2.3 外边距
位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。空白边的属性有五种 ，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin，其具体的设置和使用与填充属性类似。
在进行页面书写时最常见的就是首先去除body的白边，因为其可能影响我们的布局
margin
是margin-top、margin-bottom、margin- left、margin-right 四个属性的简写形式
根据书写时输入数据的个数为不同的属性进行赋值
①设置不同的外间距
分别为上 右 下 左设置不同的外边距
div {
background-color: darkgray;
width: 200px;
height: 100px;
display: inline-block;
margin: 10px 21px 32px 43px;
}
2.4 边框
边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted（点线）、dashed（虚线）、solid(实线)等九种边框样式。
注意：如果添加了边框，那么边框的宽度也会占据元素所在位置，元素实际页面所在宽高=外边距+边框宽度+内边距+元素内容宽高
2.4.1 border-style 边框样式
用于设置边框的样式，常用默认样式solid实线,并且是border属性中最重要属性控制边框其他属性是否生效
.dd{
width: 200px;
height: 200px;
border-style: solid;
/* 实线 */
border-style: double;
/* 双实线 */
border-style: dotted;
/* 点虚线 */
border-style: inset;
/* 内凹 */
border-style: outset;
/* 外凸 */
border-style: dashed;
/* 虚线 */
}如果一个元素只设置了边框样式 那么会对其添加默认的宽度与颜色
2.4.2 border-width 边框宽度
用于设置边框的宽度样式
.dd{
border-style: solid;
border-width: 8px;
}
2.4.3 border-color 边框颜色
用于设置边框的颜色
.dd{
border-style: solid;
border-width: 8px;
border-color: darkseagreen;
}
2.4.4 边框详细属性设置
以上的属性其实还是简写属性简写的对应的
border-方向-style
border-方向-width
border-方向-color
在实际开发过程中可能出现设置部分边框
二、background背景设置
2.1 background-position 背景位置
是对background-position-x与background-position-y的简写形式
用于设置背景图片的位置，一般设置不重复背景图片位置
2.1.1 预设值设置
对于background-position-x: left center right
对于background-position-y:top center bottom
.back1 {
height: 100vh;
width: 100%;
border: solid 1px black;
background-color: cyan;
background-image: url(../img/pig.jpg);
background-size: 500px 400px ;
background-repeat: no-repeat;
background-position: center center;
/*
顺序无需固定因为对应的值唯一，并且如果x与y都为center 可以简写
*/
}2.1.2 固定数值设置
设置背景图片左上角距离所在标签的值
.back2 {
height: 600px;
width: 800px;
border: solid 1px black;
background-color: cyan;
background-image: url(../img/pig.jpg);
background-size: 500px 400px ;
background-repeat: no-repeat;
background-position: 150px 100px;
/*
设置时第一个值为background-position-x第二个值为background-position-y,如果设置值相同可以使用一个值进行设置，如果想将背景图片居中，设置值为标签的一半减去背景图片对应一半
*/
}2.1.3 百分比数值设置
以百分比进行图片位置的设置
.back3{
height: 600px;
width: 800px;
border: solid 1px black;
background-color: cyan;
background-image: url(../img/pig.jpg);
background-size: 500px 400px ;
background-repeat: no-repeat;
background-position: 50% 50%;
/*
注意：50%为居中，在使用百分比时不是以当前所在标签的大小百分比设置
*/
}2.2 background-attachment 图片依附方式
设置背景图片与对应标签的依附方式
scorll- 默认 背景图片随标签滚动
fixed- 固定位置 背景图片固定在视口中 不会随标签移动
div{
background-attachment: fixed;
/*
注意：设置依附方式为fixed后，图片的位置不会再以当前标签进行定位 而是相对于视口
如果多个div都设置了不同的背景图片并且位置相同，那么也不会进行覆盖，因为对应的背景图片只会在对应的标签中展示
*/
}
2.3 background 简写属性
是颜色 背景图片 位置 重复的常用简写形式
在实际开发过程中对应背景的大小单独设置
.back4 {
background:grey url(../img/pig.jpg) no-repeat center;
background-size: 500px 400px;/* 宽高 */
/*
顺序书写无限制，但是建议使用 color image repeat position 顺序进行书写
*/
}多背景图片设置
在当前标签中设置多个背景图片
.back5 {
background: url(../img/p1.png) no-repeat left center, url(../img/fly1.png) no-repeat right center;
background-color: green;
background-size: 400px 300px,400px 300px;
/*
注意：在使用简写属性进行图片设置时不能书写颜色，多个背景图片简写形式使用,分隔
在设置其他属性时也可以设置多个使用,分隔
背景颜色设置要在设置背景图片后
*/
}2.4 background-origin背景原点
主要用于设置背景的起始位置
padding-box- 默认 使用边框与内边距的位置作为背景的起点（背景图片）
border-box-边框与外边距的位置作为背景的起点
content-box-使用文本与内边距的位置作为背景的起点
.d1{
height: 500px;
width: 500px;
border: solid 100px blanchedalmond;
margin: 100px;
padding: 100px;
background: aquamarine url(../img/pig.jpg) no-repeat;
background-size: 400px 300px;
background-origin: content-box;
/*
注意设置为border-box边框会遮挡部分背景图片
content-box可以为文本内容设置背景图片
*/
}2.5 background-clip 背景裁剪
用于裁剪背景保留指定的背景
border-box-默认 使用边框与外边距的位置作为背景
padding-box- 使用内边距到边框的位置作为背景
content-box-使用文本与内边距的位置作为背景
.d1{
border: solid 100px #7c9b88aa;
margin: 100px;
padding: 100px;
background: aquamarine url(../img/pig.jpg) no-repeat;
background-size: 400px 300px;
background-origin: border-box;
background-clip:content-box;
/*
如果设置了宽高使用content-box也会保留未书写为本内容的背景
*/
}
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
