css学习

CSS学习

加粗，装饰线

font-weight的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ubZn0Uyy-1662168010822)(D:\Roaming\Typora\typora-user-images\image-20220713094523644.png)]

text-decoration文本的装饰

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HJGQYgxv-1662168010823)(D:\Roaming\Typora\typora-user-images\image-20220713094810155.png)]

缩进

text-indent属性用于设置首行文本的缩进

• 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值。
• 建议使用em作为设置单位。
• 1em 就是一个字的宽度。如果是汉字的段落，1em 就是一个汉字的宽度

宽高属性

width: 100px;

height: 100px;

PX像素

当没有宽度时，块元素宽度为父元素的100%，行内元素宽度靠文本内容撑出

当没有高度时，靠文本内容撑出高度，内容是浮动元素绝对定位，固定定位除外

CSS背景

背景颜色

background-color: 颜色值; 默认的值是 transparent 透明的

背景图片

语法：
background-image : none | url (url) ;
例如:
background-image: url(images/1.png);

背景平铺

background-repeat : repeat | no-repeat | repeat-x | repeat-y

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rkqrWcW4-1662168010824)(D:\Roaming\Typora\typora-user-images\image-20220713101657621.png)]

背景位置

background-position : length || length
background-position : position || position [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BKO1k9ls-1662168010824)(D:\Roaming\Typora\typora-user-images\image-20220713101746167.png)]

注意

• 必须先指定background-image属性
• position 后面是x坐标和y坐标。可以使用方位名词或者 精确单位。
• 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
• 如果只指定了一个方位名词，另一个值默认居中对齐。
• 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二个一定是y
• 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
• 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

字体

font-family属性用于设置哪一种字体。

p { font-family:“微软雅黑”;}

• 指定多个字体，如果浏览器不支持第一个字体就会尝试下一个直到找到合适的字体，如果都没有，以电脑默认字体为准。

p {font-family: Arial,“Microsoft Yahei”, “微软雅黑”;}

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JuI866Jw-1662168010825)(D:\Roaming\Typora\typora-user-images\image-20220713102154675.png)]

inherit：当前元素继承父元素的字体样式

oblique：文本为倾斜的状态

字间距

设置字符与字符之间的间距

letter-spacing: 10px;

大小写文本转换

text-transform 文本转换

​ uppercase：大写英文

​ lowercase：小写英文

​ capitalize：单词首字母大写*/

如： text-transform: capitalize;

设置行高，行间距

line-height设置行高，行间距

作用：

​ 让文本在行间距内垂直居中，不允许用负值

值：

​ normal:设置合理的行间距

​ number：设置数字，数字会与字体大小相乘设置行间距

​ 百分比：相当于当前文字大小的百分比进行行间距

盒子模型

盒子模型是由内容content、内边距padding、边框border、外边距margin四部分组成 每个盒子除了有自己的大小外

padding撑大盒子，调整元素内容的位置，从元素的边框border开始到内部的内容content之间的距离(多个值的话分：1个值.上下左右 ，2个值.上下 左右 ，3个值.上 左右 下 ，4个值.上 右 下 左)

属性为padding，通过值控制不同边的内边距。

​ 向内边距：

​ 一个值：表示上下左右内边距

​ 两个值：分别表示上下，左右内边距

​ 三个值：分别表示上，左右，下内边距

​ 四个值：分别表示上右下左内边距

margin合并：

​ 外边距：

​ 作用：元素添加外边距后会移动的位置，调整元素与元素之间的距离

​ margin的合并：

​ 块级元素的上外边距和下外边距有时候会进行合并。

​ margin的合并只发生在块级元素之间(浮动元素/绝对定位/固定定位除外)。

​ margin合并的几种情况：

	1.相邻兄弟之间margin的合并；
	2.父级元素中的第一个子元素和最后一个子元素外边距会穿透父元素，表现为父元素的外边距，称为父盒子塌陷(子元素设置margin-top父元素跟着一起移动)。详细解释：父级的第一个子级是块标签，在css中使用margin-top时，发现并没有实现上边距，而是父级跟着一起向下移动了，这时候就出现了塌陷问题。
	解决方法：
	1.给父元素添加边框；
	2.给父元素设置padding(值不能小于等于0)；
	3.给父元素添加overflow: hidden;。溢出元素部分的内容隐藏。
	3.空div的合并。
	margin合并的计算规则：正正取最大，负负最小值，正负值相加。

	margin-top合并的解决方法：
	1.父元素设置为块状格式化上下文；
	2.父元素设置border-top；
	3.父元素设置padding-top；
	4.父元素和第一个子元素之间添加内联元素进行分割。
	margin-bottom合并解决方法：
	1.父元素设置为块状格式化上下文；
	2.父元素设置border-bottom；
	3.父元素设置padding-bottom；
	4.父元素和最后一个子元素之间添加内联元素进行分割。
	5.父元素设置height。
	不让空div合并的方法：
	1.设置垂直方向的border；
	2.设置垂直方向的padding；
	3.在元素内部添加内联元素；
	4.设置height。
	块状格式化上下文：BFC
	如果一个元素符合BFC的条件，该元素会成为独立的容器，元素内部的元素会垂直的沿着父元素的边框排列，和外部的元素互不干扰。
	触发BFC的条件：
	1.浮动元素，float除none以外的值；
	2.绝对定位为固定定位，position: absolute/fixed;
	3.display为以下任何一个值inline-block等，除块元素之外；
	4.overflow除visible以外的值(hidden,auto,scroll)。

盒子模型特性

• 每个盒子都有内容content、内边距padding、边框border、外边距margin四部分组成
• 每个属性都包括四部分：上右下左（top，right，bottom，left）

标准盒子与IE(怪异)盒子模型的表现效果的区别

1. 标准盒子中的width指的是内容区域content的宽度，高也是指的内容区域content的高度

   标准盒子模型的大小=content+padding+border+margin

2. IE(怪异)盒子模型中的width指的是内容content+内边距padding+边框border

   IE(怪异)盒子模型的大小=width(content+padding+border)+margin

行元素块元素

html标签按照布局方式可分为：

​ 块元素，行元素，行内块元素。

块元素特点：

​ 1.独占一行；

​ 2.可以设置宽高，

​ 如果不设置宽高，则显示默认宽高，如果也没有默认宽高，这显示为内容的宽高。

​ 布局方式默认为块元素：

​ p，h1-h6等。

行元素特点：

​ 1.不独占一行；

​ 2.不能设置宽高；宽高取决于自身的内容；

​ 多个行元素之间会左右排列；

​ 一行到最后显示不下时会自动换行。

​ 布局方式默认为行元素：

​ b，a等。

行内块元素特点：

​ 1.不独占一行；

​ 2.可以设置宽高；

​ 多个行内块元素之间会左右排列；

​ 一行到最后显示不下时会自动换行。

布局方式默认为行内块：

​ img，input等。

display: 改变元素的布局方式。

​ 值：

​ block：将元素转换为块元素。

​ inline：将元素转换为行元素。

​ inline-block：将元素转换为行内块元素。

​ none：隐藏一个元素，隐藏后不会显示。

导航栏标签

nav标签是导航栏标签

基线对齐

基线

​ 图片和空块的基线在元素的底部，文本基线在文本的中下部(四线三格的第三条线)。

​ 注意：

​ 元素中带有文本，默认其元素的基线对齐以文本为准。

基线对齐（垂直居中）：

​ 为了让文本和图片进行对齐，两个或多个元素在一行显示，会按照默认的对齐规则对齐(基线对齐)。

vertical-align: 基线对齐的方式。

​ 值：

​ auto：默认值，按照浏览器的默认状态执行。

​ middle：中线对齐。

​ top：顶部对齐。

​ bottom：底部对齐。

​ baseline：文本基线对齐(四线三格的第三条线)。

元素间隔

为什么行元素和行内块之间会有间距？

​ HTML代码在书写的时候为了保持美观，每个元素会单独写一行，所以元素之间会有空格和回车，这些空格和回车在页面解析的时候会解析为一个空格，间隙就是这个空格造成的。

​ 解决方法：

​ 1.清除元素之间的空格和回车；例如：把所有元素写在同一行；将下一行的开始标签写在上一行的尾部。

​ 2.在文本后面添加空格(针对文本标签)；

​ 3.给元素添加外间距抵消整个间隙；

​ 4.将字符大小改为0。

流式布局

元素依次从左到右(行元素、行内块元素)从上到下(块元素)的方式进行排列

文档流

• 一个元素内部的子元素采用流式布局是，这个元素内部就会形成一个为文档流，每个子元素在文档流中都有自己的位置。

• 一个元素如果脱离了文档流，就不在参与流式布局，父元素里面不再有它的位置。

• 块元素脱离文档流之后，宽度不在默认为父元素的100%，需要主动设置宽度。

• HTML中所有的标签默认都是static定位，static采用的是流式布局

绝对定位，相对定位，固定定位

绝对定位

1.元素添加绝对定位之后，会脱离文档流，位置会被正常文档流中的内容所替代

2. 元素使用的绝对定位之后，位置从左上角出发。

3. 在嵌套中，后代元素会先对外层有定位(非static的定位)的元素的左上角出发，如果都没有定位，则相对页面左上角出发。

4. 给元素添加绝对定位之后，会转换为行内块元素

   position: 设置元素的定位方式。

   ​ position：值：

   ​ static：默认值，静态定位。

   ​ absolute：绝对定位。

   出发位置：

   以有定位方式的父级元素为参考，如果父级元素没有定位方式在往上找，直至找到有定位方式的父级元素位置；如果父级元素都没有定位，位置从浏览器的左上角出发。

   相对定位

   相对定位：position：relative

   1.元素使用相对定位之后不会脱离文档流，还占据文档流中的位置。
   2.元素使用相对定位之后，位置从自身在文档流中的位置出发。
   3.子绝父相：子元素使用绝对定位。父元素使用相对定位
   位置从父元素的左上角出发。
   4.行内元素使用相对定位之后不会转换为行内块。

   固定定位

   固定定位：position: fixed;
   1.元素添加固定定位之后，会脱离文档流，不占据文档流中的位置，位置会从被文档流中正常的内容所替代。
   2.元素使用固定定位之后，位置从浏览器的左上角出发。
   3.在嵌套中不管外层元素是否有定位，元素只要使用固定定位，位置永远从立刻领取的左上角出发。
   4.给行内元素添加固定定位之后，会转换为行内块元素。

块内居中对齐

​ top: 0px;

​ left: 0px;

right: 0px;

bottom: 0px;

margin: auto;

伪类和伪元素

在选择器后可以通过：添加伪类

伪类是在一定条件下才能触发的样式

hover：当鼠标指针在元素悬停时触发

visited:a标签的专用属性表示访问过的

focus:当元素成为焦点时触发。

焦点：用户可以交互的元素才能成为焦点。 一个页面中同一时刻只有一个焦点

first-letter选择文本第一个字

first-line选择元素文本第一行

before:前缀伪元素，为元素添加一个前缀

after:后缀伪元素，为元素添加一个后缀

序号选择器

一、不区分类型（根据元素的位置序号找到元素）

first-child选中同级别中的第一个元素

last-child选中同级别中的最后一个元素

nth-child(number):选中同级别中的第几个（从一开始）元素

二：区分类型（根据元素的种类选择元素）

first-of-type：选中同级别的第一个元素

last-of-type：选中同级别的最后一个元素

nth-of-type(number):选中同级别中的第几个（从一开始）元素

三、奇偶数选择（分类型）

nth-child(odd)

odd 选择同级别中的所有奇数

even 选择同级别中的所有偶数。

无序列表(ul)

list-style: none;清空删除列表项的前缀

ist-style: circle;改变无序列表样式

1.无序列表：常用导航栏。

​ ul：定义无序列表。

​ 默认样式：

​ 上下有16px外边距，值会根据内容文本大小改变；

​ 左内边距40px。

​ li：列表中的项。

​ 注意：

​ 默认无序列表有"圆点"，可通过css属性改变。

有序列表

2.有序列表：

​ ol：定义有序列表。

​ 默认样式：

​ 上下有16px外边距，值会根据内容文本大小改变；

​ 左内边距40px。

​ li：列表中的项。

​ 注意：

​ 默认无序列表有"阿拉伯数字"，可通过html属性改变。

​ type：列表的类型：

​ 值：

​ 1：默认值，阿拉伯数字。

​ A：大写英文。

​ a：小写英文。

​ I：大写罗马数字。

​ i：小写罗马数字。

自定义列表

3.自定义列表：常用在底部导航群。

​ dl：定义自定义列表。

​ 默认样式：

​ 上下有16px外边距，值会根据内容文本大小改变。

​ dt：定义列表的项。

​ dd：定义列表项的描述。

​ 默认样式：

​ 左外边距40px。

表格

table：定义表格。

​ 不设置宽度时，宽度被内容撑开；

​ 设置了宽度并且内部内容不设置宽度时，td会按照内容长度比例拉伸。

​ caption：定义表格的标题。

​ 默认样式：

​ 文本默认在表格的水平居中的位置。

​ thead：定义表格的表头。

​ 可以省略，浏览器在解析的时候会自动添加。

​ tr：定义表格的行。

​ th：定义表头表格的单元格。

​ tbody：定义表格的主体部分。

​ 可以省略，浏览器在解析的时候会自动添加。

​ td：定义标准的单元格。

rowspan：行合并，用于设置一个单元格占几行。

colspan：列合并，用于设置一个单元格占几列。

边框合并: border-collapse: collapse;

cellpadding 是边框与其内容的间隙大小；
cellspacing 是边框与边框之间的间隙大小；

字间距行间距

letter-spacing: 20px; 调整字与字之间的距离

line-height，调整行与行之间的距离

阴影

box-shadow: 5px 5px 5px #ccc, -5px -5px 5px #ccc;

页内跳转

把a标签的href属性设置为#XXX时，点击这个a标签里面立刻就会跳转到id值为XXX的元素位置。

表单

input：定义输入框，按钮等，单标签。
type：定义input的类型(值不同对应的input的功能或样式都会发生改变。)
值：
text：定义文本输入框。
password：定义密码输入框。
button：定义可点击的按钮。
submit：提交按钮，会把表单内的数据提交给服务器。
reset：重置按钮，清除表单内所有的数据。
file：文件选择按钮，供文件上传。
accept：规定了文件上传的类型，text/*
image：定义图片形式的提交按钮，必须把src属性和image结合使用。
checkbox：定义复选框。
radio：定义单选框。
value：定义input的初始值。
required：输入内容是必须的，不能为空。
readonly：定义input为只读模式。
disabled：禁用input元素。
placeholder：定义文本输入框的提示音。
name：定义文本输入框的名字，唯一。
maxlength：最多可以输入多少字符。
size：定义文本框的宽度。

label：给input添加的标注。与id相同
for：为了让input和label进行绑定。
for的值要跟input的值相同，当点击label时，可以让input自动获得输入焦点。

多行文本输入框

textarea：定义多行文本输入框。
name：规定文本区的名称。
cols：number，规定文本区内的可见宽度。
rows：number，规定文本区内的可见行度。
required：输入内容是必须的，不能为空。
readonly：定义input为只读模式。
disabled：禁用input元素。
maxlength：最多可以输入多少字符。

button：定义可点击的按钮。
value：按钮的标题。

分组

fieldset：将表单内容进行分组，会产生一个边框(默认为2px边框，内边距(10px,12px)，左右外边距2px)；

legend：legend是fieldset元素定义的标题(默认在分组边框的上边框内，可以左右移动位置)；

分组下拉菜单

		    select：定义下拉菜单。
            optgroup：定义选项组。
            option：定义列表中的一个选项内容。

背景图片

 background-image: 设置元素的背景图片。
                    url("图片路径")
                注意：
                    当图片比较小时，默认会以平铺的方式铺满整个背景区域。
                平铺：
                    图片会在水平和垂直两个方向上重复自己，直至背景区域填充完整。
                    
background-repeat: 设置背景图片是否重复显示。
                当背景图片的尺寸小于元素尺寸时，背景图片会重复显示知道铺满整个元素。
                    值：
                        repeat：默认值，平铺/重复出现。
                        no-repeat：不重复。
                        repeat-x：水平平铺。
                        repeat-y：垂直平铺。
                        space：保持图片的大小平铺满整个背景区域，剩余空间作为图片之间的间隙平分。
                        round：保持图片的完整性，根据背景区域图片相对应拉伸填充。
background-attachment: 设置背景图片是否固定。
                    背景图片是否随着页面的其他部分滚动。
                        值：
                            scroll：默认值，背景图片会随着滚动条而滚动。
                            fixed：背景图片不会随着滚动而滚动。                        

在盒子中的背景图片

背景图片默认显示的是图片的原始尺寸，如果背景图片大于元素尺寸，则只能显示图片的一部分(左上角)。
 background-position: 设置背景图片横向和纵向的位置，默认为0 0。
    background-position: -100px -100px; 
            /* 设置为50%可以实现居中。 
            
            
background-size: 设置背景图片的尺寸，分别表示宽和高。
                图片的大小仅设置一个方向，另一个方向根据图片大小自动缩放。
                值：
                  contain：根据容器的最小值设置图片，将图片进行比例缩放，图片会始终包含在容器之内，容器范围可能不被完全占用。
                  cover：根据容器的最大值设置图片的大小，将图片比例缩放至完全覆盖整个容器，图片可能会超出容器。
                        -数值：第一个值为X轴(宽度)，第二个值为Y轴(高度)。
                            单位：
                                px：像素，固定的大小。
                                %：百分比，以容器的大小作为标准进行计算。
                      -值为一个：该值将作用于X轴(宽度)位置，高度为auto，此时的背景图片高度以X轴(宽度)作为参考进行比例缩放。
背景图片尺寸可以通过100%，设置为和元素等宽等高。 

精灵图

section:nth-of-type(2) {
            width: 300px;
            height: 300px;
            /* size是宽高的7倍加% */
            background-size: 700% 700%;
            /*加负号 从x负半轴到0的距离，从0格开始算，每个距离为宽高的一倍  从y正半轴到0的距离，从0格开始算，每个距离为宽高的一倍  */
            /* background-position: -300px -600px; */
            /*不加负号 从x正半轴到0的距离，从0格开始算，每个距离为宽高的一倍  从y负半轴到0的距离，从0格开始算，每个距离为宽高的一倍 */
            /* background-position: 1800px 1500px; */
            /* 不加负号情况   百分比，每格固定为100%，顺序为x正半轴  y负半轴    */
            /* background-position: 600% 500%; */
            /* 加负号情况   百分比，每格固定为100%，顺序为x正半轴  y负半轴    */
            background-position: -100% -200%;
        }

元素溢出

 
                当元素固定宽高，不被内容撑开时，如果内容的宽高超出元素本身的宽高，超出元素边界的内容任然会显示。
            
            
                overflow: 设置元素溢出部分内容的显示方式，默认为显示。
                    值：
                        visible：默认值：内容不会被隐藏，溢出的内容出现在元素大小之外。
                        hidden：溢出的部分不显示。
                        scroll：溢出的内容可以滚动查看。
                        auto：隐藏溢出内容，出现滚动条。
            
             overflow: hidden; 
             overflow: scroll; 
             overflow: auto; 
             overflow: visible; 

            
                overflow-x: 设置水平方向溢出内容的显示方式。
            
             overflow-x: scroll; 
            overflow-y: 设置垂直方向溢出内容的显示方式。 
            overflow-y: scroll; 
           
             文本不换行 
            white-space: nowrap; 
            
            text-overflow: ellipsis;  文本溢出以省略号...为后缀。 

             
                resize: 允许用户调整元素的大小。
                    值：
                        none：默认值，不能调整元素的大小。
                        horizontal：允许用户调整元素的宽度。
                        vertical：允许用户调整元素的高度。
                        both：允许用户调整元素的宽高。
           

长度单位

• px 表示像素，1px相当于屏幕上最小的一个显示单位

• em 表示当前元素父元素的字体大小

• rem，表示根元素字体大小

• 1vw 表示浏览器窗口宽度的1%

• 1vh 表示浏览器窗口高度的1%

• cm 厘米

• mm 毫米

• pt 磅

边框圆角和阴影

 border边框：
            border-style: 边框样式；
                值：
                    none：定义无边框；
                    solid：定义实线；
                    double：定义双实线；
                    dashed：定义虚线；
                    dotted：定义点状线；
                    groove：定义3D凹槽效果；
                    ridge：定义3D隆起效果；
            border-width: 边框粗细默认是3px；
            border-color: 边框的颜色默认是黑色(2D)/灰色(3D)。

圆角：border-radius: 
            可控制四个角的圆角；
                一个值：四个角的圆角；
                两个值：分别代表左上角和右下角、右上角和左下角；
                三个值：分别代表左上角、右上角和左下角、右下角；
                四个值：分别代表左上角、右上角、右下角、左下角；
            单脚设置：
                border-top-left-radius: 20px;
                border-top-right-radius: 30px;
                border-bottom-left-radius: 40px;
                border-bottom-right-radius: 50px;
            圆角半径可以设置为百分比，正方形的元素设置为50%，可以显示为圆形；
            圆角仅仅设置边框和背景为圆形，元素内容还是原来的矩形。

盒子阴影：box-shadow: inset 5px 5px 5px #cfc,5px 5px 5px #cfc;
            值：
                inset：内阴影，可选。取值相反。
                第一个值：阴影距离盒子的左右距离，正值往右，负值往左，0盒子正下方。
                第二个值：阴影距离盒子的上下距离，正值往下，负值往上，0盒子正下方。
                第三个值：阴影的清晰度(值不能为负)，阴影值越大会以渐变的形式呈椭圆形往外扩散。
                第四个值：阴影的颜色；
            注意：可以一个元素同时添加多个阴影，值之间以逗号隔开。
文本阴影：text-shadow: 5px 5px 5px #cfc;
            值：
                第一个值：阴影距离文本的左右距离，正值往右，负值往左，0文本正下方。
                第二个值：阴影距离文本的上下距离，正值往下，负值往上，0文本正下方。
                第三个值：阴影的清晰度(值不能为负)，阴影值越大会以渐变的形式呈椭圆形往外扩散。
                第四个值：阴影的颜色；
            注意：文本阴影没有inset    可以一个元素同时添加多个阴影，值之间以逗号隔开。

浮动元素

float：设置元素使用浮动布局，浮动有左浮动和右浮动。
                    值：
                        none：默认值，定义无。
                        left：左浮动。
                        right：右浮动。
                预算设置浮动布局之后，会脱离原有的文档流，参与浮动文档流；
                在浮动文档流中，块元素也是横向排列，而且宽度不在继承父元素的100%。

  鼠标指针设置为超衔接 
            cursor: pointer;

 使用浮动布局，必须在最后一个浮动元素结束的地方清除浮动，否则会影响后续页面，也会导致父元素不能根据内容显示高度。

最基本的清除浮动的方法：
                    是在在最后一个浮动元素的后面添加一个元素，设置这个元素clear: both;

 在不添加新元素的情况下清除浮动
            浮动元素都会有一个共同的父元素，可以为这个父元素添加一个后缀伪元素，在后缀中清除浮动。
        .clear-fix::after{
            content: "";
            display: block;
            clear: both;
        }

什么是浮动：
            浮动最开始出现是为了让文本环绕图片，但是发现浮动元素可以设置宽高或内联排列，是结于inline和block之间的一个特别存在。
            地方元素直到遇到父级元素或者同级浮动元素的边沿是停下，多个浮动元素相遇会按照内联的排列方式进行排列。

        使用方法：
            给元素直接添加：float: left/none/right;
                值：
                    none：默认值，元素不浮动，并会显示在其文档流中出现的位置。
                    left：向左浮动，会在页面或者父级元素的左侧。
                    right：向右浮动，会在页面或者父级元素的右侧。
            特点：
                1.元素使用浮动后会在页面/父元素的左边或者右边停留；
                2.元素使用浮动元素之后会脱离文档流，参与浮动文档流；
                3.文本和浮动元素相遇，会在其周围停下来；
                4.多个浮动元素相遇会按照内联的排列方式进行排列。

        为什么需要浮动：
            可以用来创建网页布局，比如左右两端布局栏。
        
        为什么需要清除浮动：
            当子元素设置了float属性之后，且父元素没有设置高度，而是由资源近视撑出，则导致父元素高度塌陷；
            多个浮动元素内联排列，会覆盖页面中正常的文档流中的内容。
        
        清除浮动方法：
            1.加高法：给父元素添加高度，值等于大于浮动子元素的高度，把浮动元素关在有高度的盒子之内；
            2.clear: both;给浮动元素添加，添加后可以控制当前元素不以内联排列的方式去找其他浮动元素；
            3.隔墙法：给浮动元素之间添加clear: both;让两个浮动元素之间添加一堵墙隔开。

flex布局（弹性布局）

弹性布局演示小网站https://ghbjayce.github.io/FlexTool/
弹性布局，又称为flex布局布局，是css3.0新增的布局方式。
        弹性布局，用来给盒模型提供最大的灵活性。
        任何一个容器，都可以被设置弹性布局。
        采用弹性布局的标签，父元素被称为flex容器，简称为“容器”；它的所有子元素自动成为容器成员，子元素称为flex项目，简称为“项目”；
        flex布局的属性：
            容器属性和项目属性。
        容器默认存在两根轴线：
            水平方向的主轴和垂直方向的交叉轴。

父级属性

用于定义弹性布局     display：flex；
flex布局，会影响子元素的布局方式。
                flex布局中的元素，子元素不在参与原有的流式布局，而是参与弹性布局。
                flex中，无论是行元素还是块元素，都会按照flex的方向进行排列。
                

 flex-direction: 设置弹性布局中项目的排列方向。
                    值：
                        row：默认值，项目从左到右主轴排列，起点在左端。
                        row-reverse：项目从右往左排列，起点在右端。
                        column：项目从上往下交叉轴排列，起点在顶端。
                        column-reverse：项目从下往上交叉轴排列，起点在下端。
                        
                        
注意：项目从左往右排列的时候，起始线在左端，反之则在右端。
justify-content: 项目在主轴的对齐方向。
                    值：
                        flex-start：所有的项目在起始线对齐；
                        flex-end：所有的项目在终止线对齐；
                        center：所有项目在中间线对齐；居中；
                        space-around：项目两端间距相等，项目之间的间距相等，是项目到两端的2倍。
                        space-between：项目两端对齐，项目之间的间距相等。
                        space-evenly：项目之间的间距与项目到两端的间距相等。   
                        
                        
                        
align-items: 定义当行项目在交叉轴如何对齐。
                    值：
                        center：项目在交叉轴中点对齐。
                        flex-start：项目在交叉轴的起点对齐。
                        flex-end：项目在交叉轴的终点对齐。
                        
flex-wrap: 定义项目在主轴一行排列不下时，如何换行。
                    值：
                        nowrap：默认值，不换行。
                        wrap：换行显示，第一行在上方。
                        wrap-reverse：换行显示，第一行在下方。
                        
align-content: 定义多跟轴线在交叉轴如何对齐。如果项目只有一根轴线，则该属性不起作用。
                    值：
                        center：多跟轴线在交叉轴的中点对齐。
                        flex-start：多条轴线在交叉轴的起点对齐。
                        flex-end：多条轴线在交叉轴的终点对齐。
                        space-around：轴线两端的间距相等，轴线之间的间距相等，是轴线两端的2倍。
                        space-between：多条轴线两端对齐，轴线之间间距相等。
                        space-evenly：轴线两端的间距与轴线之间的间距相等。
                        
 flex布局默认不换行
 
 

项目属性（子元素属性）

order：定义项目的排列顺序。
                    值：
                        number，默认为0，值越小越靠前。
                        

flex-grow: 定义项目的放大比例。
                    值：
                        number，默认值为0，存在剩余空间，也不放大。
                            放大空间为主轴的剩余空间。
                            
                            
align-self: 允许当个项目有与其他的项目在交叉轴有不同的对齐方式。
             align-self: end; 
            flex-basis: 定义项目占据的主轴空间。
             flex-basis: 20%;                         
                     
flex-shrink: 定义项目的缩小比例。
                    值：
                        number，默认值为1，当空间不足时，该项目将缩小。
                        如果所有项目flex-shrink: 都为1，表示当空间不足时，项目将等比例缩小。
                        如果flex-shrink取值为0时，表示当空间不足时，项目不缩小。
                        flex-shrink: 属性取值越大，表示当空间不足时，项目缩小的越快，空间缩小的越厉害。                 

清除浮动的方法

1. 给父级div定义height

原理：
    父级元素手动定义height，就解决了父级div无法获取到高度的问题。
优点：
    简单、代码少、容易掌握。
缺点：
    只适合高度固定的布局，要给出精确的高度；如果高度和父级div不一样时，回产生问题。
建议：
    只建议高度固定的布局使用。

2.结尾处添加空div标签 clear: both;

原理：
    添加一个空div，利用css提供的clear: both;清除浮动，让父级div能自动获取到高度。
优点：
    简单，代码少，容易掌握，浏览器支持，不容易出现怪问题。
缺点：
    如果页面的浮动布局多，就要增加很多空div，让人感觉很不好。

3.父级div定义 伪类:after 和 zoom

原理：
    IE8以上和非IE浏览器才支持:after，原理与方法2类似，zoom(IE专有属性)可解决IE6，IE7的浮动问题。
优点：
    浏览器支持，不容易出现怪问题，目前国内大型网站都有使用。
缺点：
    代码多，原理不易理解，要两句结合才能使浏览器都支持。
建议：
    建议定义公共类，以减少代码。
    
    清除浮动的代码：
    .clear-fix::after{
            content: "";
            display: block;
            clear: both;
            visibility: hidden;
            height: ;
        }
        .clear-fix{
            zoom: 1;
        }

4.父级div定义 overflow: hidden;

原理：
    必须定义width或zoom: 1; 同时不能定义height，使用overflow: hidden;时，浏览器会自动检测浮动区域的高度。
优点：
    简单，代码少，浏览器都支持。
缺点：
    不能和position结合使用，因为超出的部分会被隐藏。

5.父级div定义 overflow: auto;

原理：
    必须定义width或zoom: 1; 同时不能定义height，使用overflow: auto;时，浏览器会自动检测浮动区域的高度。
优点：
    简单，代码少，浏览器都支持。
缺点：
    内部宽高超过父级div时，会出现滚动条。

6.父级div也一起浮动

原理：
    所有代码一起浮动，就变成了一个整体。
优点：
    无。
缺点：
    会产生未知问题。

7.父级div定义 display: table;

原理：
    将div属性变成表格。
优点：
    无。
缺点：
    会产生新的未知问题。

8.结尾处添加br标签 clear: both;

原理：
    父级div定义zoom: 1;来解决浮动问题，结尾处添加br标签 clear: both;