一、CSS 单位


尺寸单位

  - %  : 百分比

  - in : 英寸

  - cm : 厘米

  - mm : 毫米

  - pt : 磅(1pt等于1/72英寸)

  - px : 像素(计算机屏幕上的一个点)

  - em : 1em等于当前的字体尺寸,2em等于当前字体尺寸的两倍


颜色单位

  - rgb(x,x,x)   : RGB 值,如 rgb(255,0,0)

  - rgb(x%,x%,x%): RGB 百分比值,如 rgb(100%,0%,0%) 

  - #rrggbb:十六进制数,如 #ff0000

  - #rgb:简写的十六进制数,如 #f00

  - 表示颜色的英文单词,如 red


二、CSS 尺寸属性


尺寸

  - 尺寸属性是用于设置元素的宽度和高度

      - 单位一般为像素或百分比

  - 宽度属性

      - width

      - max-width

      - min-width

  - 高度属性

      - height

      - max-height

      - min-height

wKioL1bvvFuz1Bb3AAEwEvTAnzY109.png


溢出

  - 使用尺寸属性控制框的大小时,如果内容所需的空间大于框本身的空间,会导致内容溢出

  - overflow:当内容溢出元素框时如何处理

      - visible

      - hidden

      - scroll

      - auto

  - overflow-x:

  - overflow-y:

wKioL1bvvWPhu8J3AADyFBx7LHI797.png

wKioL1bvvYKgJLWNAAFQsPdOkpk208.png


HTML元素设置尺寸属性的元素有哪些

  - 块级对象,如

      - p

      - div

      - h1,h2,h3,h4,h5,h6

      - ul,ol,li,dl,dt,dd等

  - 存在width、height属性的HTML元素

      - img

      - table等


三、CSS 边框属性


边框

  - 简写方式

      - border:width style color;

  - 单边定义

      - border-left/right/top/bottom:width style color;

  - border-width

      - border-left/right/top/bottom-width

  - border-style

      - border-left/right/top/bottom-style

  - border-color

      - border-left/right/top/bottom-color


    边框颜色,可设置为值 transparent(用于创建有宽度的不可见边框)


边框倒角

  - border-radius 属性

      - 为简写属性,按顺时针顺序设置四个倒角

      - 取值为绝对值或者百分比

  - 单独定义

      - border-top-left-radius:边框左上角

      - border-top-right-radius:边框右上角

      - border-bottom-left-radius:边框左下角

      - border-bottom-right-radius:边框右上角

wKioL1bvwZPgInjdAACvee1bRec698.png


边框阴影

  - box-shadow: 向方框添加一个或多个阴影

      - 取值为多个属性值的列表

  - box-shadow: h-shadow v-shadow blur spread color inset;

  - 其中

      - h-shadow : 必需,为水平阴影的位置

      - v-shadow : 必需,为垂直阴影的位置

      - blur     : 可选,为模糊距离

      - color    : 可选,为阴影的颜色

      - inset    : 可选,将外部阴影(outset)改为内部阴影

wKioL1bvwuWB387UAADZqSsLgy4004.png


图片边框

  - border-p_w_picpath属性:将图片规定为包围div元素的边框

      - border-p_w_picpath: source width repeat;

  - 也可以分别设置

      - border-p_w_picpath-source: 图片的路径

      - border-p_w_picpath-width:  图片边框的宽度

      - border-p_w_picpath-repeat: 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)

wKioL1bvw5PymoR9AAE3Ha9dv_w581.png


轮廓

  - 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用

  - 简写方式

      - outline:color style width;        wKiom1bvxAbgwz5sAAAGqxKdx9c434.png

  - outline-width:轮廓的宽度

  - outline-style:轮廓的样式

  - outline-color:轮廓的颜色

wKiom1bvxCDT3RkNAABib0OYWvQ313.png


总结:本章内容主要介绍了 Css 尺寸单位、尺寸属性与边框属性。