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(不透明)
  • 十六进制表示:以#为前缀,分为长十六进制和短十六进制。
    • 长十六进制:每两位为一组,代表一种三原色;每位的取值范围09,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 		设置阴影颜色,默认为黑色
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值