作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

从零开始学前端 - 5. CSS 常用属性

一、CSS 常用单位
- 1. 绝对长度单位
- - 1.1 px
  - 1.2 pt
- 2. 相对长度单位
- - 2.1 em
  - 2.2 rem
  - 2.3 vh、vw
二、基本属性-常用属性
- 1. 基本属性
- - 1.1 宽度 width
  - 1.2 高度 height
  - 1.3 min-width | min-height
  - 1.4 max-width | max-height
  - 1.5 颜色 color
- 2. 文本属性 font
- - 2.1 字体样式 font-style
  - 2.2 字体粗细 font-weight
  - 2.3 字体大小 font-size
  - 2.4 行高 line-height
  - 2.5 字体类型 font-family
- 3. 文本类属性
- - 3.1 文本水平对齐 text-align
  - 3.2 文本修饰 text-decoration
  - 3.3 首行缩进 text-indent
  - 3.4 字间距 letter-spacing
  - 3.5 词间距 word-spacing
  - 3.6 英文大小写转换 text-transform
  - 3.6 文字强制一行显示： white-space
- 4 background
- - 4.1 background-color
  - 4.2 background-images
  - 4.3 background-repeat
  - 4.4 background-attachment
  - 4.5 background-position
  - 4.6 background-size
- 5. 列表相关属性 list-style
- - 5.1 list-style-type
  - 5.2 list-style-position
  - 5.3 list-style-image
- 6. 边框 border
- - 6.1 边框宽度 border-width
  - 6.2 边框样式 border-style
  - 6.3 边框颜色 border-color
- 7. 外边距 margin
- 8. 内边距 padding
- 9. 浮动 float
- 10 定位 position
- - 10.1 固定定位 position:fixed
  - 10.2 相对定位 position:relative
  - 10.3 绝对定位 position:absolute
- 11 display

一、CSS 常用单位

1. 绝对长度单位

1.1 px

px，即“pixel”（像素）。是显示屏上显示的每一个小点，为显示的最小单位。是我们在 PC 端网页中最常使用的单位。

1.2 pt

pt，即 “point”（点），是印刷行业常用单位，等于1/72英寸。是一个自然界标准的长度单位。

2. 相对长度单位

2.1 em

em 表示元素的 font-size 属性的计算值，如果用于 font-size 属性本身，相对于父元素的 font-size ；若用于其他属性，相对于本身元素的 font-size 。
例：

div{font-size:16px;text-ident:2em};
div p{font-size:1.5em}

我们将 div 的字体大小设置为 16 像素，并且设置它的文本向后缩进 2em = 2*16px 的距离，而子元素 p 的字体大小设置为 2em = 1.5*16px。

2.2 rem

rem 是相对于根元素 html 的 font-size 属性的计算值。
例：

html{font-size:20px;}
div{width:2rem;}

div 的宽度是 40px。2rem = 2*20px。

2.3 vh、vw

我们将浏览器窗口的宽高各自平分为 100 份，vh 表示窗口高度的 1/100，vw 表示窗口宽度的 1/100。

二、基本属性-常用属性

1. 基本属性

1.1 宽度 width

语法：width:value + unit
实例：width:50%
作用：将元素的宽度设置为父元素宽度的50%

1.2 高度 height

语法：height:value + unit
实例：height:50%
作用：将元素的高度设置为父元素高度的50%

1.3 min-width | min-height

作用：设置元素的最小宽度和最小高度，元素的大小可以大于设置的数值，但不会小于设置的数值

1.4 max-width | max-height

作用：设置元素的最大宽度和最大高度，元素的大小可以小于设置的数值，但不会大于设置的数值

1.5 颜色 color

语法：color:color
实例：color:#f00。
作用：设置文字的颜色。

color 可以是英文名字，如 red、black等；
color 可以是十六进制值的背景颜色，如 #f00,#000等；
color 可以是 rgb 代表的背景颜色，如 rgb(255, 0, 0),rgb(0,0,0)等；

2. 文本属性 font

语法：font:style weight size/line-height family
实例：font:italic bold 16px/24px "Microsoft YaHei"
作用：设置字体样式为斜体加粗 16像素字号 / 24像素行高 “Microsoft YaHei”（微软雅黑）字体。
同时，该属性可以拆分为以下五个属性，也是文字的核心属性：

2.1 字体样式 font-style

语法：font-style: normal(正常)|italic(斜体)|oblique(倾斜)|inherit(继承父级)
实例：font-style:italic
作用：设置字体样式为斜体

2.2 字体粗细 font-weight

font-weight:400 等同于 font-weight:normal；
font-weight:700 等同于 font-weight:bold；

2.3 字体大小 font-size

语法：font-size:value + unit
实例：font-size:14px
作用：设置字体大小为 14px

通常以 px 或 em 为单位设置为一个固定值；
浏览器默认字体大小为16px，最小显示 12px 的大小;
字体一般设置偶数不设置奇数；
实际上设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮），所以说 字号大小就是字体的高度。

2.4 行高 line-height

语法：line-height:value + unit
语法：line-height:24px
作用：设置行高（行间距）。

默认行高通常为 font-size / 0.75 ，即设置字号为 12px 时，默认行高为 16px ，遵循四舍五入原则；
不允许设置负值，只写数值不加单位时，按照字体大小的倍数设置行高；

2.5 字体类型 font-family

语法：font-family : "字体1","字体2","字体3";
语法：font-family : Serif , "Microsoft YaHei";
作用：设置元素的字体。

字体可以设置多个，用逗号分隔。如果浏览器不支持，则向后依次寻找；
中文字体要加双引号，英文字体由多个单词组成也要加双引号
浏览器会尝试使用设置的字体，如果找不到，识别字体2，如果都找不到，采用浏览器默认字体
是否可以使用设置的字体，取决于用户电脑上该字体是否存在；

3. 文本类属性

3.1 文本水平对齐 text-align

语法：text-align:left(左对齐) | center(居中对齐) | right(右对齐) | justify(两端对齐)
实例：text-align:center
作用：设置文本文字在元素内居中显示

3.2 文本修饰 text-decoration

语法：text-decoration:none | underline(下划线) | overline(上划线) | line-through(删除线)
实例：text-decoration:underline
作用：设置文本文字拥有下划线

3.3 首行缩进 text-indent

语法：text-indent:value + unit
实例：text-indent:2em
作用：设置文本文字首行缩进两个文字的距离

3.4 字间距 letter-spacing

语法：letter-spacing:value + unit
实例：letter-spacing:2em
作用：设置文本文字之间的字间距为两个字节的距离

3.5 词间距 word-spacing

语法：word-spacing:value + unit
实例：word-spacing:2em
作用：设置英文单词的字间距为两个字节的距离

3.6 英文大小写转换 text-transform

语法：text-transform:none(默认值) | capitalize(首字母大写) | uppercase(全部大写) | lowercase(全部小写)
实例：text-transform:uppercase
作用：将文字内容全部转换为大写，只对英文起效

3.6 文字强制一行显示： white-space

语法：white-space:normal(默认值) | nowrap(不换行，强制在一行显示)
实例：white-space:nowrap
作用：将文字内容强制显示在一行

4 background

语法：background: color url repeat attachment position / size
实例：background: #000 url("../images/banner.jpg") no-repeat fixed center / cover
作用：设置背景颜色为黑色，背景图片为 banner.jpg 背景图不平铺固定背景图背景图位置居中 / 背景图完全覆盖背景区域

4.1 background-color

语法：background-color:color
实例：background-color:#f00。
作用：设置背景颜色。

color 可以是英文名字，如 red、black等；
color 可以是十六进制值的背景颜色，如 #f00,#000等；
color 可以是 rgb 代表的背景颜色，如 rgb(255, 0, 0),rgb(0,0,0)等；
color 设置为 transparent 表示透明无色；

4.2 background-images

语法：background-image:url("URL") | none
实例：background-image:url("../images/banner.jpg")
作用：设置背景图片。

4.3 background-repeat

语法：background-repeat:repeat(x轴y轴平铺) | repeat-x(x轴平铺) | repeat-y(y轴平铺) | no-repeat(不平铺)
实例：background-repeat:repeat
作用：设置背景图片沿x 轴 y 轴进行平铺。

背景图默认向 x 轴和 y 轴无限平铺；

4.4 background-attachment

语法：background-attachment:scroll(滚动) | fixed (固定) | inherit
实例：background-attachment:fixed
作用：设置背景图像不随着页面的其余部分滚动，我们一般不使用这个属性，而是通过固定元素标签来实现。

4.5 background-position

语法：background-position: x y
实例：background-position:10px -20px
作用：设置背景图从容器的左上角为原点，向右移动 10px，向上移动 20px。

当 x 和 y 相同时，可以省略 y；
可以使用方位词 left | right | center | top | bottom 来代替具体数值；
x 向右为正，向左为负； y 向下为正，向右为负；

4.6 background-size

语法：background-size:cover
实例：background-size:cover
作用：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域,CSS3 新增属性，后续详解。

5. 列表相关属性 list-style

语法：list-style:type | position | image
实例：list-style:square inside url('../images/index.jpg')
作用：设置列表中的标记样式为自定义图片 index.jpg 并且位于文本内部。

5.1 list-style-type

语法：list-style-type:disc(实心圆) | circle(空心圆) | square(方块) | decimal(数字) | none(去掉列表符号样式)
实例：list-style-type:none
作用：清除列表样式，我们通常会删除列表的默认样式，需要的效果用其他方式来实现。

5.2 list-style-position

语法：list-style-position:inside(文本内) | outside (默认文本外) | inherit
实例：list-style-position:inside
作用：将列表样式设置在列表内部。

5.3 list-style-image

语法：list-style-image:url
实例：list-style-image:url('../images/index.jpg')
作用：使用图像来替换列表中的标记样式，使用该属性之后，list-style-type 会失效。

6. 边框 border

语法：border: width style color
实例：border: 1px solid #000;
作用：设置边框为 1px 的黑色实线。
按边框样式拆分成以下三个属性

6.1 边框宽度 border-width

语法：border-width: value + unit
实例：border-width: 1px
作用：设置边框宽度为 1px。

6.2 边框样式 border-style

语法：border-style: solid(实线) | dashed(虚线)
实例：border-style: solid
作用：设置边框样式为实线。工作中一般只用到了这两种线条，更多的线条请翻阅 CSS 手册

6.3 边框颜色 border-color

语法：border-color: color
实例：border-color: #000
作用：设置边框颜色为黑色

按边框方向拆分四条 : border-top | border-bottom | border-left | border-right
将样式和方向结合，又多出了 border-top-width | border-top-style | border-top-color 等；

7. 外边距 margin

语法：margin：top right bottom left
实例：margin：5px 10px 15px 20px
作用：设置元素外边距为上方 5px 右方 10px 下方 15px 左方 20px

margin的四个值按照上、右、下、左的书写顺序；
margin的三个值按照上、左右、下的书写顺序，例 margin:10px 20px 15px 上方 10px 右方 15px 下方 20px 左方 15px；
margin的两个值按照上下、左右的书写顺序，例 margin:10px 20px 上方下方为 10px 右方左方为 20px；
margin的一个值表示上下左右外边距相等；
margin设置为百分比的时候，是根据父级的宽度进行计算的。
margin的颜色是透明的。

8. 内边距 padding

语法：padding：top right bottom left
实例：padding：5px 10px 15px 20px
作用：设置元素内边距为上方 5px 右方 10px 下方 15px 左方 20px

padding 与 margin语法相同
padding 也是透明的，但可以显示背景图或背景颜色；

9. 浮动 float

语法：float: left | right | none | inherit
实例：float:left
作用：设置元素向左进行浮动

10 定位 position

语法：position: absolute(绝对定位) | fixed(固定定位) | relative(相对定位) | static(无) | inherit
实例：position:fixed
作用：设置元素为固定定位

通过 top、bottom、left、right来设置元素移动的位置
通过 z-index 属性设置元素的层级关系

10.1 固定定位 position:fixed

语法：position: fixed
实例：position: fixed;top:0;left:0
作用：将元素固定在左上角，无论页面如何滚动都会一直固定在左上角的位置。

10.2 相对定位 position:relative

语法：position: relative
实例：position: relative;top:10px;left:20px
作用：将元素从它本来的位置上，以左上角为原点，向下移动 10px ，向右移动 20px 。

10.3 绝对定位 position:absolute

语法：position: absolute
实例：position: absolute;top:10px;left:20px
作用：拥有该元素的属性，将逐级向上查找是否含有 position属性，如果含有，则以该元素左上角为原点，向下移动 10px ，向右移动 20px，如果没找到，则以 html 元素左上角为原点。

11 display

值	效果
none	隐藏元素
block	转换为块级元素
inline	转换为行内元素
inline-block	转换为行内块级元素

更多属性请点击这里查看更多。

种一棵树，最好的时间是十年前，其次是现在。人的一生，总的来时就是不断学习的一生。
蚕吐丝，蜂酿蜜。人不学，不如物。与其纠结学不学，学了有没有用，不如学了再说。
等你学会了之后，你才拥有资格说“啊，这个东西学了没用。”

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!

请大家关注我的微信公众号，我会定期更新前端的相关技术文章，欢迎大家前来讨论学习。
都看到这里了，三连一下呗~~~。点个收藏，少个 Bug 。

从零开始学前端 - 5. CSS常用属性相关推荐

从零开始学前端：CSS字体属性和文本属性 --- 今天你学习了吗？（CSS：Day08）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
从零开始学前端：CSS背景颜色 --- 今天你学习了吗？（CSS：Day09）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS字体属性和文本属性 - 今天你学习了吗?(CSS:Day08) 文章目录从零开始学前端:程序猿小白 ...
从零开始学前端：CSS引入 --- 今天你学习了吗？（CSS：Day07）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:列表标签 - 今天你学习了吗?(CSS:Day06) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端 - 3. HTML 常用标签_2
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
从零开始学前端 - 2. HTML常用标签_1
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
从零开始学前端：CSS复合选择器 --- 今天你学习了吗？（CSS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录从零开始学前端:程序猿小白也可以完全 ...
从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
从零开始学前端：CSS盒子模型属性 --- 今天你学习了吗？（CSS：Day14）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:伪元素和盒子模型 - 今天你学习了吗?(Day13) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...

从零开始学前端 - 5. CSS常用属性