HTML、CSS综合03——css、浮动、文档流、定位

内容回顾

为什么要使用CSS?

由HTML的效果标签完成样式，会导致HTML的结构非常冗余。要求使用css来完成页面的样式渲染工作。后期要求，css不写在页面中，写在单独的css文件中。

css的三种引入方式

行内样式：把css的属性写在标签的style属性中

内部样式：把css属性写在style标签中

外部样式：把css属性写在单独的css文件中，通过link标签使HTML文件和css文件相关联

三种引入方式采用就近原则。

css三种基本选择器

标签选择器(Element选择器)：所有相同的标签都适用该样式

class选择器：标签上有该class的时候，才使用这种样式。

id选择器：标签上有该id的时候，才使用这种样式。

选择器优先级：!important -> id选择器 -> class选择器 -> 标签选择器

css复合选择器

交集选择器：两种选择器之间么有任何间隔，不以任何符号分开选择器。表示这一个标签必须同时拥有这两种选择器才能渲染该样式

并集选择器：多个标签需要使用同一个样式，多个选择器使用“,”分开。

后代选择器：缩小选择器所能选择的标签的范围，基于标签的父子关系，指定那个标签后代中的某一个选择器。使用空格分隔

通配符选择器：* 指代所有的标签

css属性

文本属性

字体属性

背景属性

盒子模型

我们把每一个标签都当做一个盒子。

标签中的内容，就是盒子的内容

内容离盒子边框的距离，叫做padding

盒子的宽度，叫做border

盒子离另外一个盒子的距离叫做margin

标准文档流

水流的标准是按照从高处流到低处

文档流的标准是按照标签各自的规则，从上到下，从左到右排列顺序

块元素和内联元素

块元素：独占一行，元素两端不可以有其他元素并列，可以设置宽和高，如果不设置宽度，那么默认设置为父元素的100%，默认没有高度

文本级：p

容器级：div h li dt dd

内联元素：可以与其他元素并列显示在一行，不可以设置宽和高，默认的宽度就是内容的宽度，内敛元素具有默认的高度，默认高度为字号大小

span a b i u em，内联元素一般用来对某些文字进行设置特殊的样式

内联块元素

内联块元素有内联元素和块元素的特点，不会独占一行，可以与其他元素并列显示，但可以设置宽和高

如：img audio video canvas

display

各种元素的特性可以相互变换，给元素设置display属性，可以将元素设置为其他类型

display
block	将元素转换为块元素
inline	将元素转换为内联元素
none	将元素隐藏
inline-block	将元素转换为内联块元素

隐藏元素

display:none

将元素完全隐藏，整体内容和位置全部隐藏起来

visibility: hidden

只隐藏容器的内容，容器的位置被保留。

如何将块元素显示在同一行

inline

使用inline-block可以将块元素显示在同一行

缺点：inline-block本质还是文字的特性，每一个项之间都有字间距，字间距跟随字号增大而增大。元素设置为inline-block后，如果再想设置为隐藏，就会出现冲突

浮动

float: left | right

可以是多个元素并排显示，如果宽度足够，则显示在一行，如果宽度不够，则在第二行显示

浮动元素的脱标(脱离标准文档流)

一、浮动的元素会脱离原来的位置，连占位的东西都没有，后面的元素会挤掉浮动元素的位置。

二、一个span标签不再需要转换成块级元素就可以设置宽和高，证明：浮动后的元素不分块级元素和内联元素了

一个元素如果浮动， 那么就能够并排了，并且可以设置宽和高，不管是div还是span

浮动元素互相紧靠

    <style>
        .div1{
            width: 200px;
            height: 400px;
            background: red;
            float: left;
        }
        .div2{
            width: 200px;
            height: 100px;
            float: left;
            background: green;
        }
        .div3{
            width: 200px;
            height: 300px;
            float: left;
            background: yellow;
        }
    </style>
    <div class="div1">1号</div>
    <div class="div2">2号</div>
    <div class="div3">3号</div>

浮动后的元素会紧紧的挨在一起，如果有宽度大于600px，3号会紧靠着2号，如果宽度小于600px，大于400px，3号则会紧靠着1号。如果宽度小于400px，则不会显示在一行。

浮动元素有“文字围绕”效果

    <style>
        .div1{
            float:left;
        }
    </style>
    <div class="div1">
        <img src="./image/2.jpg" width="300" alt="">
    </div>
    <p>
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    </p>

图片所属的div浮动，文字所属的p标签不浮动

div浮动后悔遮挡住p标签，但不会被遮挡住文字。这样就形成了"文字围绕"效果

浮动元素的收紧

元素设置浮动后，宽高会被收紧。

浮动小结

浮动的目的：为了使多个元素并排显示

浮动遵循的原则：永远不要一个元素进行浮动，要浮动，就一起浮动，你所想要并排的所有元素都需要浮动。

浮动元素会导致父元素塌陷

在父元素没有设置高度的情况下，高度是由它的子元素撑开的，但它的子元素浮动后，脱离了文档流，父元素内没有元素了，父元素就没有高度了，所以父元素造成了父元素的高度塌陷。会影响到与父元素同级的元素的布局

清除浮动

为了避免父元素高度塌陷，影响布局，需要对浮动进行清除

方法1：给父元素设置高度，撑开父元素的高度

如果一个元素要浮动，它的祖先元素一定要有高度，这样才能管住浮动的元素

缺点：元素的高度不容易把控。

<style>
    *{padding:0;margin:0;}
    body{padding:10px;}
    li{
        list-style: none;
    }
    .div1{
        border:1px solid;
        width: 600px;
        height:40px;
    }
    .div1 li{
        width: 100px;
        height:30px;
        border:1px solid cyan;
        float:left;
    }
</style>
<div class="div1">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Vue</li>
        <li>Node.js</li>
    </ul>
</div>

方法2：clear:both

在浮动元素的后面增加一个空的标签（div），给这个div设置属性clear:both

清除浮动元素两边的浮动，也就是说：浮动元素的左右两边的浮动都清除掉

<div class="div1">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Vue</li>
        <li>Node.js</li>
        <div style="clear:both"></div>
    </ul>
</div>

缺点：会有一个多余的标签div

方法3：overflow:hidden

overflow对容器中超出部分的处理方式，hidden就是隐藏超出部分的内容，可以用来设置清除浮动

给浮动元素的父元素设置overflow:hidden;zoom:1用于兼容IE6
overflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉；
overflow:auto; 溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示

<div class="div1">
    <ul style="overflow: hidden;">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Vue</li>
        <li>Node.js</li>
    </ul>
</div>

方法4：(单)伪元素清除浮动

给浮动元素的父元素设置一个类(clearfix)，用到::after伪对象来处理浮动。

.clearfix:after{
//这个属性是必须设置的
    content: "";
    //转成块元素
    display: block;
    //清除两边浮动
    clear: both;
    height:0;
    visibility: hidden;
}
.clearfix{
	/* 触发 hasLayout */ 
	/*ie6,7 清除浮动的样式*/
  zoom: 1;
}
<div class="div1">
    <ul class="clearfix">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Vue</li>
        <li>Node.js</li>
    </ul>
</div>

浮动使用原则：只要父元素能够确定高度，子元素是否清除浮动无所谓，但父元素不能够确定高度，就只有清除浮动，清除浮动推荐使用方法4：利用(单)伪对象清除浮动

方法5：(双)伪元素清除浮动

/* 声明清除浮动的样式 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ie6 7 专门清除浮动的样式*/
.clearfix {
*zoom:1;
}

伪对象选择器

什么是对象，高级编程语言中说万物皆对象

在HTML中所说的对象其实是指标签(元素)，一个div标签，可以说是div元素，也可以说是div对象。

伪对象并不是一个真是标签，但是它是某一个标签衍生出来的一个对象，这个对象不能实际被选择到，但却可以设置样式

伪对象的特点，能够设置样式，就是不能够被选择

伪对象默认是inline行内元素

.div1::after{
    /*content：在伪对象中添加内容，可以文字，也可以是图片*/
    content: url("image/3.jpg");
    color:red;
}

浮动后盒子间距计算

如果在文档流中垂直方向的margin不叠加，以较大的

脱离标准流后，两个盒子之间是没有塌陷现象的。两个盒子的间距应计算两个和子margin值的之和。

定位

静态定位：position:static

默认定位，不写也是static

相对定位：position:relative;

相对定位是相对于盒子本身去进行定位的，盒子本身不脱离标准流，会占有原来的位置，不会影响其他元素，但可能会覆盖其他元素的显示

如果元素设置relative，但不设置偏移量，则对元素没有任何影响，只会对子元素中含有绝对定位的元素有影响

绝对定位：position:absolute;

绝对定位会脱离标准流，元素不占有原来的位置

当不设置偏移量的时候，元素会在原来位置上脱标，下面的元素会直接顶上来。

绝对定位会影响其他元素的位置

绝对定位的元素的祖先元素没有设置定位属性时，元素定位从浏览器边框出发，根据偏移量进行偏移

绝对顶为的元素的祖先元素有设置定位属性时，元素定位从最近设置定位属性的盒子边框出发，进行偏移

父元素设置非static定位，子元素设置绝对定位，子元素的定位根据父元素的边框来偏移

给行内元素设置绝对定位之后，将转换为行内块元素(不推荐这种做法)

固定定位：position:fixed;

固定定位会脱离标准流，元素不占有原来的位置

偏移位置从浏览器边框出发

页面布局遵循的原则

尽量使用标准流

标准流解决不了，使用浮动

浮动解决不了，使用定位

大范围的布局使用浮动，小范围的挪移使用定位，绝对定位一般来说不单独使用，必须配合相对定位来使用，子绝父相

关于水平居中的问题

text-align:center;

针对内联元素和内联块元素来使用，需要在被居中元素的父元素中设置text-align:center;，才能对内部的内联元素进行居中设定

注：你可以将内联元素和内联块元素看成是文字来处理

margin:0 auto;

针对块元素设置居中，不能对内联块来使用

要设置元素居中，首先得给设置居中的元素设置宽度，并且宽度必须小于父级元素的宽度

如果要设置垂直局中，需要使用到弹性布局