1. 请写出与尺⼨有关的css属性?
尺寸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(色相,饱和度,明度,不透明度)
3. 请写出与背景有关的属性?
背景属性一共有8个(外加两个一起为10个):
1.设置背景颜色,
2.设置图片源,
3.设置背景图片,
4.设置背景图片起始位置(设置背景图片位置),
5.设置背景图片重复位置,
6.设置图片截切,
7.设置背景图片固定性,
8.设置背景尺寸大小,
9.多背景,
10.设置背景渐变色。
1.设置背景颜色:
属性定义:用于定义背景色
语法: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 渐变位置,颜色列表);
2. background-image: radial-gradient(渐变大小,颜色列表);
3.角度渐变:指两种颜色之间按照360°旋转方式平滑过渡。
角度渐变属性语法:
background-image: conic-gradient(from 角度,颜色列表)
background-image: conic-gradient(at 位置,颜色列表)
4.视口是什么?
pc端:网页可视宽度
移动端:渲染网页的区域
5.像素是什么?
像素单词:pixel,通常是0.3mm
像素是会发光的二级管(像素管)
发为两种:
物理像素:物理像素反馈的是真实的二极管(像素板)
逻辑像素:虚拟的信息(颜色值,坐标)