1. 请写出与尺⼨有关的css属性?
w尺寸css属性：一共有11个
- height 高
- min-height 最小高度
- max-height最大高度
- line-height行高
- width宽
- min-width最小宽度
- max-width最大宽度
- margin外边距
- padding内边距
- border边框
- font-size字体大小
尺⼨属性值的单位有哪些？
分为两类：
1.绝对单位（一共5个）px，cm,mm,pt,inch
2.相对单位（一共5个）%,em,rem,vh,vw
绝对单位：
- px（pixel）像素，是数字世界里常用的长度单位；
- cm:厘米
- mm:毫米
- pt:磅
- inch（in）：英寸
相对定位：参照父级元素进行计算；
- %：百分比（参照父级元素进行计算）
- em：参照当前元素的font-size计算
- rem：参照html的font-size计算
- vh：表示视口（viewport）高度的百分之一;v:表示：vieport；h：表示：height
- vw：表示视口（vieport）宽度的百分之一；v：表示vieport；w：表示：width
背景色覆盖到哪个区域停止？
答：边框
背景颜色值的写法有几种？
1.16进制
2.英文单词
3.rgb（red，blue，alpha）
alpha：不透明度
rega（0-255，0-255，0-255，0-1）
4.hsl（0-360，0%-100%，0%-100%）
hsla（色相，饱和度，明度，不透明度）
与背景有关的属性
背景属性一共有8个(外加两个一起为10个)：
- 1.设置背景颜色,
- 2.设置图片源,
- 3.设置背景图片,
- 4.设置背景图片起始位置(设置背景图片位置),
- 5.设置背景图片重复位置,
- 6.设置图片截切,
- 7.设置背景图片固定性,
- 8.设置背景尺寸大小,
- 9.多背景，
- 10.设置背景渐变色。
1.设置背景颜色：
属性定义：用于定义背景色
语法：
body{
background-color：url（''）
}
2.设置图片源：
语法：
- 1.background-origin：border-box ；
缩放到边框大小，修改坐标。 - 2.background-origin：padding-box ；
缩放到内边距大小，修改坐标。 - 3.background-origin： content-box;
缩放到内容大小，修改坐标。
3.设置背景图片
属性定义：设置背景图片
语法：background-image：url（）
4.设置背景图片起始位置(设置背景图片位置)
语法：backround-position
可以设置三种值：px像素，%百分比，left ，rigth，bottom，top，center（关键字）
5.设置背景图片重复位置
语法：
- background-repeat：repeat 默认重复
- background-repeat：repeat-x 水平重复
- background-repeat：repeat-y 垂直重复
- background-repeat：no-repeat 不重复
6.设置图片截切
语法：
- background-clip: border-box;
默认采用border-box，在边框区域渲染。 - background-clip: content-box;
指定为content-box;，在内容区渲染。 - background-clip: padding-box;
指定为：padding-box;在内容区渲染。
7.设置背景图片固定性
语法：
1.background-attachment: scroll;//默认值
背景图跟主视口一起移动，不跟元素视口一起移动。
background-attachment: fixed;
背景图固定，无论是主视口还是元素视口背景都不会动。
background-attachment: local;
本地图片跟随元素视口和主视口一起动。
8.设置背景尺寸大小
语法：
1.background-size : px，%， auto;
使用长度，百分比或auto定义尺寸时，需要两个参数，
第一个是图像的宽，第二个是图像的高。如果只有一个值，则第二个是auto.
9.多背景
语法：
1.background-image: url(),url();
多张背景图用逗号隔开。
10.设置背景渐变色
语法：
background-image
渐变色分为3个属性：线性渐变，径向渐变，角度渐变。
1.线性渐变：指两种颜色之间按照直线方式平滑过度。
- 线性渐变属性语法：
background-image: linear-gradient（渐变角度，列表颜色）//颜色列表停顿位置（stop）//狡辩角度默认180° 0°。
2.径向渐变：指两种颜色之间按照射线方式平滑过渡。
- 径向渐变属性语法：
1.background-image: radial-gradient（渐变形状（circle ，ellipse）at 渐变位置，颜色列表）；
- background-image: radial-gradient（渐变大小，颜色列表）；
3.角度渐变：指两种颜色之间按照360°旋转方式平滑过渡。
- 角度渐变属性语法：
background-image: conic-gradient（from 角度，颜色列表）
background-image: conic-gradient（at 位置，颜色列表）
视口是什么？
- pc端：网页可视宽度
- 移动端：渲染网页的区域
像素是什么？
- 像素单词：pixel，通常是0.3mm
- 像素是会发光的二级管（像素管）
- 发为两种：
- 物理像素：物理像素反馈的是真实的二极管（像素板）
- 逻辑像素：虚拟的信息（颜色值，坐标）
网友评论