2020-8.3

CSS企业开发经验.盒子模型: CSS文本样式：color 为字体指定颜色​ 关键字 rgb rgba 十六进制font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访font-style 用于打开和关闭斜体文本 font-style:normal(正常字体，关闭斜体) font-style:italic(斜体) font-style:oblique(模拟斜体)font-weight 为字体设置粗细程度​ font-weight:normal / bold 正常加粗字体​ font-weight：lighter / bolder 设置当前元素字体比父元素更粗或者更细​ 100-900 数值类型的粗细程度（值越大字体越粗） font-size 为文字指定大小text-align 文字排列方式text-transform 设置或者取消字体改变 ​ text-transform:none 防止任何改变 ​ text-transform:uppercase 将文本转换为大写 ​ text-transform:lowercase 将文本转换为小写 ​ text-transform:capitalize将所有单词第一个字母转换为大写​ text-transform:full-width:转换为类似于一个等宽字体text-decoration 设置或者取消文本修饰​ text-decoration:none; 取消所有文本修饰​ text-decoration: underline; 为文本添加下划线​ 下划线 ： 文字 文字​ text-decoration: overline; 为文本添加上划线​ text-decoration: line-through; 为文本添加删除线text-shadows 设置或者取消文本阴影​ text-shadows:none; 取消所有阴影​ 语法：text-shadow: h-shadow v-shadow blur color;​ h-shadow:必需。水平阴影的位置。允许负值。​ v-shadow: 必需。垂直阴影的位置。允许负值。​ blur 可选。模糊的距离。​ color 可选。阴影的颜色。参阅 CSS 颜色值。list-style-type:设置列表项标志类型： list-style-type:none/disc(实心圆圈)/circle(空心圆圈)/square/list-style-image:url()list-style-position:设置列表项标志出现的位置 list-style-position:outside/inside cursor 调整光标悬浮到链接上的时候光标的形状​ outline 调整环绕链接的框​ text-decoration:自定义设置列表项标志​ text-align: 文本对齐方式默认样式：ul,ol 元素的margin-top，margin-bottom均为16px(1em) ， padding-left为 40px(2.5em)üli 元素没有设置默认的空白（行间距）üdl 元素的margin-top，margin-bottom均为16px(1em),但是没有内边距üdd 元素的margin-left为40px(2.5em)üp 元素的margin-top，margin-bottom为16px(1em)盒子模型 : 标准盒模型/w3c盒子/默认盒模型​ 特点：width.height设置给内容区​ box-sizing:content-box; 考虑的问题：​ 盒子内容宽度 ​ 盒子宽度​ 盒子在浏览器中的宽度​ 边框盒模型/ 怪异盒模型​ 特点： width.height设置给边框​ box-sizing:border-box;盒子背景样式：3.background-color:为元素设置一种颜色4.background-image:为元素设置一个背景图片2.background-clip:设定背景的覆盖范围​ 【background-clip: border-box 背景位于边框以内​ background-clip:padding-box 背景位于内边距以内​ background-clip:content-box 背景位于内容区】background-origin:设定背景的起始点​ 【background-origin: border-box 从边框的外边缘开始​ background-origin:padding-box 从内边距的外边缘开始​ background-clip:content-box 从内容区开始】5.background-position:设置为背景图像初始位置6.background-repeat:设置背景图片的重复方式​ 【 background-repeat:repeat为了覆盖整个背景范围，背景图片尽可能多的重复，在背景 边缘切割(clipping)最后一个图片以使用整个背景范围。​ background-repeat:space使用空白分隔开图片，尽可能使背景图片占满整个屏幕而不 使用切割(clipping)​ background-repeat:round 将图片压缩或者是扩展以适应整个背景范围，不使用切割】​ background-repeat:no-repeat 不重复1.background-attachment:设置背景图片的固定点 【 background-attachment:fixed 背景固定在视口上 background-attachment:scroll 背景固定在自身元素上 background-attachment:local 背景固定在自身元素的内容上】background-size:设置背景的大小background-size:cover 背景铺满整个屏幕，（尽量不要使用大图覆盖小范围