一、尺寸与颜色单位
1. 尺寸单位
- px 像素单位
- % 百分比,参照父元素对应属性的值进行计算(高度一般不动,设置宽度)
- em 字体尺寸单位,参照父元素的字体大小计算,1em=16px
- rem字体尺寸单位,参照根元素的字体大小计算,1rem=16px
2. 颜色单位
- 英文单词:red,green,blue
- rgb(r,g,b) 使用三原色表示,每种颜色取值0~255
- rgba(r,g,b,alpha) 三原色每种取值0-255;alpha取值0(透明)~1(不透明)
- 十六进制表示:以#为前缀,分为长十六进制和短十六进制。
- 长十六进制:每两位为一组,代表一种三原色;每位的取值范围09,af
例:red rgb(255,0,0) #ff0000 - 短十六进制:由3位组成,每一位代表一种三原色,浏览器会自动对每一位进行重复扩充,仍然按照长十六进制解析
例:#000 #fff #f00
- 长十六进制:每两位为一组,代表一种三原色;每位的取值范围09,af
2. CSS 盒模型
1. 内容尺寸
-
一般情况下,为元素设置width/height,指定的是内容框的大小
-
内容溢出:内容超出元素的尺寸范围,称为溢出。默认情况下溢出部分仍然可见,可以使用overflow调整溢出部分的显示,取值如下:
取值 作用 visible 默认值,溢出部分可见 hidden 溢出部分隐藏 scroll 强制在水平和垂直方向添加滚动条 auto 自动在溢出方向添加可用滚动条
2. 边框
1. 边框实现
语法:
border:width style color;
边框样式为必填项,分为:
样式取值 | 含义 |
---|---|
solid | 实线边框 |
dotted | 点线边框 |
dashed | 虚线边框 |
double | 双线边框 |
2. 单边框设置
分别设置某一方向的边框,取值:width style color;
属性 | 作用 |
---|---|
border-top | 设置上边框 |
border-bottom | 设置下边框 |
border-left | 设置左边框 |
border-right | 设置右边框 |
3. 网页三角标制作
- 元素设置宽高为0
- 统一设置四个方向透明边框
- 调整某个方向(下)边框可见色
4. 圆角边框
- 属性:border-radius 指定圆角半径(50%时会变成圆形)
- 取值:像素值或百分比
- 取值规律:顺时针,没有值就看对角线
一个值 表示统一设置上右下左
四个值 表示分别设置上右下左
两个值 表示分别设置上下 左右
三个值 表示分别设置上右下,左右保持一致
5. 轮廓线
- 属性:outline
- 取值:width style color
- 区别:边框实际占位,轮廓不占位
- 特殊:取none可以取消文本输入框默认轮廓线
6. 盒阴影
- 属性:box-shadow
- 取值:offsetX offsetY blur (spread) color;
- 使用:
不管是浏览器窗口还是元素自身都可以构建坐标系,统一以左上角为原点,向右向下为X轴和Y轴的正方向
offsetX 取像素值,阴影的水平偏移距离
offsetY 取像素值,阴影的垂直偏移距离
blur 取像素值,表示阴影的模糊程度,值越大越模糊
spread 选填,取像素值,阴影是否需要延伸
color 设置阴影颜色,默认为黑色