CSS样式--续写

哥们上课听到啥写啥，不做无意义的笔记。---驴言一刻

今天写常见的一些样式规划，例如字体的，页面的，浮动的这些。（都是css样式，不是标签）

字体样式：

这个是在页面编写中会经常用到的一类样式。例如字体的加粗、大小、变细、颜色变化、斜体、字体类型等等。

字体加粗/变细：font-weight

在css样式中字体的很多样式表示方式都和font有关，font就是html文档里面的字体标签，这个标签可以设置字体样式，同样在css中font开头的都是用来设计字体样式的。

font-weight：像素值/英文字母。常用的有：加粗字体（bold、bolder）、变细（lighter）、正常（normal）。因为像素的加粗变化过于笼统例如100px、200px等他们的效果可能没有任何变化，所以大多数情况下采用字母加粗的方式。

字体大小：font-size

font-size：像素值。xxpx一般字体的默认大小为16px，最小的值是12px，再小可能就看不到了，除了单位px外还有em这个单位，这个单位是一个字符大小的意思，默认情况下：1em=16px。但是当父元素从新定义字体的大小时，em的值会随着父元素定义的大小而变化。变为1em=父元素定义的大小。

字体颜色：color

color：颜色值；这个不需要带有font前缀。这个没啥说的，你爱啥色就可以为字体设置什么颜色。但是需要注意颜色的表示。颜色有三种表示方式：英语、rgb（0，0，0）、#000000。

英语：就像red、blue、green、yellow、purple、pink等等。但是颜色单词不能表示所有颜色，这玩意可是有256*256*256种的，不可能所有的都能用英语表示。能用在一些特别规整的地方。

rgb（0，0，0）：这是基于红（red）、绿（green）、蓝（blue）三原色来进行样式表示的。每个范围都是0~255，所以说样式真的非常多。

#000000：这个是基于rgb来表示的16进制颜色表示法，每个0的范围都是0~f（0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f），里面两个0和rgb里面的一个0相等。不太懂得可以去看一下16进制变2进制的过程。

斜体字：font-style

font-style：italic  斜体样式。和html标签内em和i一样的效果。斜体（italic）、正常（normal）、倾斜（oblique）。倾斜（oblique），选择字体的倾斜体版本，如果当前字体没有可用的倾斜体版本，会是用斜体，并且这个属性后面还能跟倾斜角度。

字体类型：font-family

font-family：“黑体”；该属性是用来调整字体的显示类型的。可以将字体的内容更改为黑体、楷体、宋体、微软雅黑等多种样式。这个属性后面可以跟多个属性值，作为备用防止到一台新设备上没有需要用的样式，导致界面样式缺失。

文本样式：

相关的文本样式：文本居中、文本首行缩进、文本内英语大小写转换、增加字母间间距。

文本居中；text-align

将文本居中显示，可以是在界面的中间，也可以是在定义的盒子中。

文本首行缩进：text-ident

对文本的首行进行缩进，单位可以是px，也可以是em，em是一个字符大小，设置2em就可以空两格。

文本内大小写转行：text-transform

属性text-transform（被提问了，不会读。。尴尬。。）这个是与文本内英语单词相关的属性。默认效果（none）、每个英语首字母大写（capitalize）、变大写（uppercase）、变小写（lowercase）。

增加字母间距：letter-spacing/word-spacing

letter-spacing：数值+单位  这个属性是将字母、汉字、标点之间的距离都增加。

word-spacing：数值+单位 这个是增加英文单词和英文单词之间的距离。

背景样式：

合理的设置背景样式会让界面更好看。（举个栗子：合理的使用粉底液，会让妆容看起来更好看哦）

背景样式相关的有：background-color(背景颜色)、background-image(背景图片)。这两个都挺简单的就不展开讲了，一个是为背景设一个颜色；另一个是为背景加一个图片，后面书写的文本都会在这个图片上展示，而不是将图片挤下去。

窗口浮动：float

这里说一下窗口浮动，这是比较难的一点，因为使用过程中总会出现一些预料之外的情况。要想避免就要认真看。

什么是窗口浮动？窗口浮动就是给窗口一个属性，让拥有该属性的板块“飘起来”，使他不占用原来的位置。窗口浮动还能用来解决困扰我们已久的块级元素并排的问题。

float属性拥有两个常用值：left 和 right。left是让窗口向左“飘”；right就是让窗口向右“飘”。

先来个简单的展示看看浮动的效果：

上面是浮动的小小展示，下面看看到底是咋“飘”起来的，为啥都在一个板片却说它飘起来了呢？

解释：因为红色板块飞（飘）起来了，红色板块已经脱离了文档流（可以理解为脱离了这个界面）那个位置空缺了，所以蓝色色块就上去填位置了，所以飘起来的红色色块就会盖住下面的蓝色色块。

思考一：在我为每个板块都添加上内容时，板块内部的内容会因为浮动发生什么变化呢？

A；随着板块漂浮起来，继续占据板块内的内容

B：板块飘动，内容不动，并且内容会影响下一个板块的内容。

答案：

为蓝色区域添加了一个浮动，蓝色在红色下，所以浮动也在红色下。蓝色浮动后，绿色板块上去了，但是其文本却未能上去！！！这就和文档流和文本流有关了。

浮动后的原素脱离了标准的文档流，这就使他原来的位置空缺出来了，所以绿色会上去，但是浮动元素的内容没有脱离文本流，导致浮动元素的内容继续留在那里占据着位置，使得属于绿色板块的内容被堵在了蓝色板块外。（被留在蓝框外的文本到底属于那个流派呢？这里还要想一下。。。）

另一个思考我放评论区吧，因为我也不能说清楚答案。。。。

清除浮动的方法：

第一种：为浮动的部分的父元素添加一定的宽高，用来占位置，避免因为内部板块的浮动导致外部盒子的塌陷。

第二种：为父盒子在其样式里面添加一个  overflow：auto 模块自适应，避免父模块塌陷

第三种：增加一个类 clear ，在类中添加  clear：both； 属性。用来清除浮动影响。

第四种：在父类的类选择器处添加新的 父类选择器名称::after{ clear:both; content:"" ; display:"block" }  after伪类元素的作用是在某个元素内部的尾部设置信息。

content:"";是指在浮动后添加一个空字符用来占位置，避免元素浮动后下面的元素直接上去占位。

今天碰到了行内元素与块级元素发生浮动发生的情况，现象真是让我惊呆了。。。

块级元素后面跟一个行内元素，当块级元素浮动时，行内元素居然是这样变化的。。

不卖关子了，在一个盒子中，块级元素浮动后，脱离文档流，占据文本流，行内元素依据文档流默认上面没东西了，所以行内元素上移，但是文本流是占据内容的，所以会出现，块级元素和行内元素并行的情况！！！

而且因为块级元素的宽高都在文本流里面体现了，所以和块级元素并排的那些地方，宽度会重新计算，这时候居中就是依据剩下空间的内容进行居中了！！

（下面是我遇到问题时，参考的博客，感兴趣或者还是不懂的小伙伴可以过去看看，浮动对块和行内元素的不同影响）

CSS 浮动元素对块级元素和行内元素的影响_css float 时行内块元素的影响-CSDN博客