[css]css基础选择器和重用属性介绍

一、常用的选择器

使用css设置标签的属性，最常用方法就是使用选择器选中标签，然后在选择器中对标签的属性进行设置。

（1）类选择器

对标签的class属性进行选择，开头要使用点号( . )然后+类名 ，一个标签可以有多个class属性，只需要在给class赋值的时候在标签名之间加上空格

（2）id选择器

对标签的id属性进行选择，id选择器是以#开头的，并且一个标签只能有一个id，且一个id也只能赋值给一个标签

（3）标签选择器

就是对标签名进行选择，没有说明特殊符号作为开头，只有标签名作为开头。

（4）后代选择器

由前面三种基础选择器的两种组合而成，随意两种都能组成，选择器名的结构为：任意基础选择器名+空格+任意基础选择器名，比如：.row input，这个选择器的意思是，选中row类标签的后代标签中的所有input标签，包括子代，孙子等。

（5）子代选择器

也是由三种基础选择器的两种组合而成，结构为：任意基础选择器名>任意基础选择器名，如:

.row>input,这个选择器的意思是选中.row类标签的子代input标签，只能选中子代的标签

（6）并集选择器

也是由三种基础选择器组合而成，格式如：input,.row，选择器之间用逗号隔开，代表的意思是同时选中这两种类型的标签

（7）伪选择器

伪类选择器常用的有两种：hover（鼠标悬停）和active（鼠标点击），

使用格式是，任意基础选择器+冒号+hover/active,这样选中的是基础选择器对应的标签，hover和active的功能是让鼠标在悬停或者点击到被选中标签上时，这个标签的属性会变成伪选择器设置的属性。

（8）全局选择器

*{}

*{
   属性
}

选中页面的所有属性         

二、常用的属性

css的属性和值是以键值对的方式进行组织的，属性和值之间用冒号连接，属性之间用；隔开

（一）默认格式

margin:0;
padding:0;
box-sizing:border-box;

将box-sizing有两个值，默认是content-box，表示元素的宽度和长度只包括内容，不包括边框。

border-box表示元素的宽度包括内容和边框。

默认浏览器的html标签的margin和padding都不是0.

上面三个属性是编写html时初始化html标签的css属性。

（二）字体属性

（1）字体选择（font-family）

将front-family赋值为字体名字，就能将字体格式设置为选中的字体。

（2）字体大小（font-size）

font-size的单位为px

（3）字体粗细（font-weight）

设置字体粗细，weight的范围是0-1000,400是正常的粗细，大于400等于加粗，小于400等于减细

（4）字体风格（font-style）

倾斜：italic

（三）文本属性

文本属性并不是单纯的对应文本，它指代的是标签的内容value的属性

（1）文本颜色（color）

颜色两种表示方法

* rgb函数，rgb（ ，，）；对三个分量分别赋值，最终确定颜色

* 使用16进制表示，#开头，如#0155ff

（2）文本对齐（text-align）

靠左：left

靠右：right

居中：center

（3）文本装饰（text- decoration）

常用取值：

underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用]

（4）文本缩进（text-indent）

文本缩进的单位可以是px，但是推荐使用em，em是一个字体大小的代号，一般文本缩进都是缩进两个字体，也就是2em，如果使用px，当字体大小变化时，缩进大小不会自动变化。

（5）行高（line-height）

行高=字体大小+行距，所以当行高大于字体大小时，行高增大就是行距增大

（四）圆润的边框(border-radius)

border-radius就是将标签区域的四个角，用border-radius长度的内切与四个角的圆替换，这样显示出来的就是一个圆润的边框。

当radius的值为标签区域的一半时，达到最大的内切圆。生成了圆角矩形

（五）弹性布局

弹性布局是针对的父元素内部的非块的子元素，为了将子元素在父元素内部有序的组织起来，就有了弹性布局。

弹性布局首先要将父标签的引入属性display：flex，这样就开启了后代标签的弹性布局开关， 

弹性布局开关打开后，可以对内容进行布局，布局的属性也要设置在父类的选择器中

两个常用的弹性布局属性：

（1）justify-content（一行弹性元素的在横轴上的布局）

常见的值：

flex-start（行内标签紧挨着，靠左布局）

flex-end（行内标签紧挨着，靠右布局）

center（行内标签紧挨着，在中间布局）

space-around（行内元素平均分布，元素之间间隔距离相等，首元素与左边的距离为元素间间隔的一半）

space-between（行内元素平均分布，元素之间间隔距离相等，首元素紧挨左边）

（2）align-items（一行弹性元素再竖轴上的布局）

针对的是一行元素，以高为竖轴的分布

三、易混淆的布局属性

（1）文字居中：text-align ，也就是一个一个标签块内的文字会被放在这个标签块的中央，这个属性设置只对块级标签有用，因为只有块级标签能才能设置大小，行内元素的大小都是和文字一样大的，默认就是居中的。

因此，只设置文字居中，有时不能将文字在屏幕中居中，因为文字所在的标签的位置可能还没有居中

（2）标签水平居中：margin： 0，auto；通过设置外边距为auto，自动将左右两边的外边距设置为一个合适的大小，实现标签居中。也只能用于块级标签的居中。行内元素如果要使用这种办法居中，要先将行内元素转换后才能块级元素。

（3）弹性布局的水平居中：justify-content。设置弹性布局的水平居中

四、常用函数

1.calc（100% - 50px）

这是css里的计算函数，计算时“-”两边一定要留空格，这样才能在css里面表示是在计算。

clac支持百分比减正常数字。

例图中就是要占满50px的导航栏后的所有空间。