CSS中的尺寸与颜色单位,盒模型的尺寸和边框

一、尺寸与颜色单位

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（不透明）
• 十六进制表示：以#为前缀，分为长十六进制和短十六进制。
  • 长十六进制：每两位为一组，代表一种三原色；每位的取值范围0_9，af
    例：red rgb(255,0,0) #ff0000
  • 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
    例：#000 #fff #f00

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. 网页三角标制作

1. 元素设置宽高为0
2. 统一设置四个方向透明边框
3. 调整某个方向（下）边框可见色

4. 圆角边框

1. 属性：border-radius 指定圆角半径（50%时会变成圆形）
2. 取值：像素值或百分比
3. 取值规律：顺时针，没有值就看对角线

一个值 	表示统一设置上右下左
四个值 	表示分别设置上右下左
两个值 	表示分别设置上下 左右
三个值 	表示分别设置上右下，左右保持一致

5. 轮廓线

1. 属性：outline
2. 取值：width style color
3. 区别：边框实际占位，轮廓不占位
4. 特殊：取none可以取消文本输入框默认轮廓线

6. 盒阴影

1. 属性：box-shadow
2. 取值：offsetX offsetY blur (spread) color;
3. 使用：
   不管是浏览器窗口还是元素自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向

offsetX 	取像素值，阴影的水平偏移距离
offsetY 	取像素值，阴影的垂直偏移距离
blur 		取像素值，表示阴影的模糊程度，值越大越模糊
spread 		选填，取像素值，阴影是否需要延伸
color 		设置阴影颜色,默认为黑色