Css3之基础-3 Css 尺寸单位尺寸属性与边框属性

Posted 2020-06-27

一、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

溢出

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

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

      - visible

      - hidden

      - scroll

      - auto

  - overflow-x:

  - overflow-y:

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:边框右上角

边框阴影

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

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

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

  - 其中

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

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

      - blur     : 可选，为模糊距离

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

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

图片边框

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

      - border-image: source width repeat;

  - 也可以分别设置

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

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

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

轮廓

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

  - 简写方式

      - outline:color style width;        

  - outline-width:轮廓的宽度

  - outline-style:轮廓的样式

  - outline-color:轮廓的颜色

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

本文出自 “技术交流” 博客，谢绝转载！