day03-CSS核心样式规则

一、文本规则：通过属性值为项目中的文本进行修饰

1、大小规则：font-size:属性值；

        取值：

                取值单位：1、px（像素），一般默认文本为16px；

                                   2、em，一般按照em的单位进行设置，需要参照物（参照物一般为父级元素字体大小）

2、字体类型：font-family:"字体样式"；用于改变字体类型，一般默认字体为微软雅黑；常应用字体为宋体，楷体，黑体

3、加粗：fant-wight:属性值;一般运用单词blod（粗）,bloder（更粗）,lighter（细）;normal（不变，可以消除strong与b的加粗效果）

4、颜色:color:属性值；

        颜色属性值：   

                十六进制：#000

                rgb:rgb(000,000,000)；rgb：指三原色，r-red,g-greem,b-blue

                颜色单词：red,green,blue,yellow,purple,plum,aqua,yellowgreen,greenyellow,transparent（透明颜色）

5、大小写转换：用于英文文本修饰

        属性：text-transfrom

        取值：none：默认；capitallize:英文文本每一个单词的首字母大写；uppercase:全部变成大写字母；lowercase:全部变成小写字母；

6、小型大写字母：指让所有小写字母转换成大写字母，但是字体仅占四线格三个中的中间位置

        字符属性：font-variant

        取值：normal；默认效果；small-caps：小型大写

7、文本间距：一般分为字符间距与词间距

        字符间距：指汉字与汉字，字母与字母，符号与符号之间的间距，

                        属性：letter-spacing：数值+单位；

         词间距：指单词与英文单词之间的间距

                        属性：word-spacing：数值+单位；

8、段落首行缩进：一般应用与中文段落首行留白

        属性：text-indent:属性值；

二、背景规则

1、背景颜色：background-color：属性值；

2、背景图片：background-img：url（图片路径）；

三、浮动：

        1、浮动：

        属性：float：属性值

        属性值：left（左浮动），right（右浮动），none（不浮动）

        注：当一个区块进行浮动时，它就脱离了标准文档流，它的位置就会被下一个区块占据；但是当两个区块都进行浮动时，区块会根据浮动方向依次排列（区块浮动后没有脱离文本流，区块内内容仍然占据文本位置）

        2、清除浮动影响：

        属性：clear：both；

        3、万能清楚浮动方式：使用after伪元素，在元素后设置一个看不见的块级元素，通过这个块级元素来清除浮动；

        4、与浮动相关的部分问题

        假定有两个宽高相同块级元素a,b；

                1）、文档流：HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动的从左到右(非块级元素),从上到下(块级元素)的排列规则。

        代码：

                        

        效果：

                        

                原因：当区块a浮动后，区块a就脱离了文档流，它的位置就会被下一个块级元素占据，既a,b相互叠加

        2）文本流：简单来说就是元素内部的一系列的字符的排列规则。

代码：

                

效果：

        

原因：浮动会使元素脱离文档流,但是不会脱离文本流,在于其他盒子的文本内容计算布局的时候,还是占位置的。