css部分基础知识点合集float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。 positi

一、元素分类

1.1 块元素

代表：

div、p、h1~h6、ul、ol等

特点：

独占一行
可以设置宽高、内外边距
默认宽度为父元素的宽度

1.2 内联元素

代表：

a、span、i、lable、strong、em等

特点：

和其他非块级元素在一行之内逐个显示
不可设置宽高、上下的margin，可设置padding、左右的margin
内容的宽高即为元素的宽高

1.3 内联块元素

代表:

img、input

特点：

和其他非块级元素在一行之内逐个显示

可设置宽高、内外边距

1.4 元素类型转换

对块元素设置display: inline，可把块元素转换为内联元素
对内联元素设置display: block，可把内联元素转换为块元素
对块元素、内联元素设置display: inline-block，可把块元素、内联元素转换为内联块元素
对元素使用float: left/right，相当于把元素转换为内联块元素
对元素使用position: absolute/fixed，相当于把元素转换为块元素

二、盒模型

2.1 标准盒模型(W3C盒模型)

box-sizing: content-box

元素的宽高大小表现为内容的大小

元素的实际宽高：内容宽高 + padding宽高 + border宽度

2.2 怪异盒模型(IE盒模型)

box-sizing: border-box

元素的宽高表现为：内容宽高 + padding宽高 + border宽度

三、css选择器和优先级

!important
内联样式(1000)
ID选择器(0100)
类选择器/属性选择器/伪类选择器(0010)
关系选择器(0002)
元素选择器(0001)
通配符选择器(0000)

四、浮动

float 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。

注意： 绝对定位的元素忽略float属性！

元素的浮动是水平方向的
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
浮动元素之前的兄弟如果是块元素，那么浮动元素会另起一行进行浮动
浮动元素之前的兄弟如果是内联元素，那么浮动元素不会另起一行进行浮动
浮动元素允许其后的兄弟块元素的文本和其前后的内联元素环绕它

float的属性值有以下几种：

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

五、清除浮动的几种方式

父元素设置高度

.floatParent {   height: 50px;}

父元素利用伪元素

.clear::after {      content: "";      display: block;      height: 0;      clear: both;      visibility: hidden;}
.floatParent {    /* IE专有属性，解决ie6、7浮动问题 */    zoom: 1;}

父元素利用BFC

.floatParent {    overflow: auto;    /* IE专有属性，解决ie6、7浮动问题 */    zoom: 1;}

在浮动元素后面加上一个空元素

.temp {    clear: both;}

六、定位

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

position的属性值有以下几种：

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置，此时它相当于父元素进行定位。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性使用其默认值，position的默认值为static，若设置position: initial，则position取值static

七、让一个元素居中的n种办法（定位的运用）

absolute + margin auto

.center {    width: 100px;    height: 50px;    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;}/* 优点兼容性好，缺点需要设置宽高 */

absolute + 负margin

.center {    width: 100px;    height: 50px;    position: absolute;    top: 50%;    left: 50%;    margin-left: -50px;    margin-top: -25px;}/* 优点兼容性好，缺点需要设置宽高 */

absolute + calc

.center {    width: 100px;    height: 50px;    position: absolute;    top: calc(50% - 25px);    left: calc(50% - 50px);}/* 缺点需要设置宽高、依赖calc的兼容性 */

absolute + transform

.center {    width: 100px;    height: 50px;    position: absolute;    top: 50%;    left: 50%;    transform: translateX(-50%) translateY(-50%);}/* 优点不需要设置宽高，缺点依赖translate2d的兼容性 */

flex

.parent {  display: flex;  justify-content: center;  align-items: center;}
/* 优点不需要设置宽高，缺点移动端完全支持，PC端并没有完全支持 */

八、浮动与定位（绝对定位和固定定位）的异同点

8.1 相同点

都是相对于其父元素的
都会脱离文本流

8.2 不同点

定位元素不会影响到其前后的兄弟元素；如果定位元素有多个，在默认情况下会重叠在一起，后面的覆盖前面的
浮动元素不仅受到其前面的兄弟元素的影响，还会影响其后面的兄弟元素；多个浮动元素会排在一行（如果空间足够）
具体影响如下：

浮动元素之前的兄弟元素如果是块元素，那么浮动元素会另起一行浮动；如果是内联元素，则不会另起一行浮动，并且其前面的兄弟内联元素会环绕浮动元素
浮动元素允许其后的兄弟块元素的文本和其前后的内联元素环绕它

8.3 验证

源代码

<style>    * {         margin: 0;         padding: 0;    }    .container {        width: 600px;        height: 400px;        background-color: pink;        position: relative;        margin: 10px auto;    }    .position, .float {        width: 100px;        height: 50px;    }    .position {        position: absolute;    }    .float {        float: left;    }    .box1, .box3 {        background-color: red;    }    .box2, .box4 {        background-color: yellow;    }</style>

<div class="container">     <div>before div</div>     <span>before span</span>     <div class="position box1"></div>     <div class="position box2"></div>     <div>after</div></div><div class="container">     <div>before div</div>     <span>before span</span>     <div class="float box3"></div>     <div class="float box4"></div>     <div>after</div></div>

效果图

说明：

从谷歌浏览的截图当中我们可以看到：

定位元素并未影响到其前面的兄弟块元素、兄弟内联元素
定位元素并未影响其后面的兄弟元素，因为定位元素有背景色，所以其后面的兄弟元素被覆盖，但不影响其应该所在的位置
多个定位元素发生重叠，后面的覆盖前面的
浮动元素受到了其前面的兄弟块元素的影响，另起一行进行浮动
浮动元素前面的兄弟内联元素环绕浮动元素（浮动元素允许其后的兄弟块元素的文本和其前后的内联元素环绕它）
浮动元素后面的兄弟块元素的内容环绕浮动元素（浮动元素允许其后的兄弟块元素的文本和其前后的内联元素环绕它）
多个浮动元素排在了一行（如果空间足够）

九、实现两栏布局的几种方法（左侧宽度固定，右侧自适应）

float + BFC

#box {    height: 600px;    background-color: pink;}#left {    width: 200px;    height: 400px;    background-color: red;    float: left;}#right {    height: 500px;    overflow: auto;    background-color: sandybrown;}

<div id="box">    <div id="left"></div>    <div id="right"></div></div>

float +margin

#box {    height: 600px;    background-color: pink;}#left {    width: 200px;    height: 400px;    background-color: red;    float: left;}#right {    height: 500px;    margin-left: 200px;    background-color: sandybrown;}

float +calc

#box {    height: 600px;    background-color: pink;}#left {    width: 200px;    height: 400px;    background-color: red;    float: left;}#right {    width: calc(100% - 200px);    height: 500px;    background-color: sandybrown;    float: left;}

flex

#box {    height: 600px;    background-color: pink;    display: flex;}#left {    width: 200px;    height: 400px;    background-color: red;}#right {    flex-grow: 1;    height: 500px;    background-color: sandybrown;}

position + padding

#box {    height: 600px;    background-color: pink;    position: relative;    padding-left: 200px;}#left {    width: 200px;    height: 400px;    background-color: red;    position: absolute;    top: 0;    left: 0;}#right {    height: 500px;    background-color: sandybrown;}
<div id="box">    <div id="left"></div>    <div id="right"></div></div>

十、实现三栏布局的几种方法（左右侧宽度固定，中间自适应）

圣杯

 /* 页面最小宽度：左右固定宽度200 + 150 相对定位移动宽度200 */body {    min-width: 550px;}
.common {    height: 50px;}#header {    background-color: sandybrown;}#footer {    background-color: brown;    clear: both;}.column {    float: left;}#container {    height: 800px;    padding-left: 200px;    padding-right: 150px;}#main {    width: 100%;    height: 100%;    background-color: yellow;}#left {    width: 200px;    height: 500px;    background-color: blue;    margin-left: -100%;    position: relative;    right: 200px;} #right {    width: 150px;    height: 400px;    background-color: red;    margin-right: -150px;}<div id="header" class="common"></div>
<div id="container">    <div id="main" class="column"></div>    <div id="left" class="column"></div>    <div id="right" class="column"></div></div><div id="footer" class="common"></div>

双飞翼

 /* 页面最小宽度：左右固定宽度200 + 150 */
body {
    min-width: 350px;
}.common {    height: 50px;}#header {    background-color: sandybrown;}#footer {    background-color: brown;    clear: both;}.column {    float: left;}#container {    width: 100%;    height: 800px;}#main {    margin-left: 200px;    margin-right: 150px;    height: 100%;    background-color: yellow;}#left {    width: 200px;    height: 500px;    background-color: blue;    margin-left: -100%;}#right {    width: 150px;    height: 400px;    background-color: red;    margin-left: -150px;}


<div id="header" class="common"></div><div id="container" class="column">    <div id="main"></div></div><div id="left" class="column aside"></div><div id="right" class=column aside"></div><div id="footer" class="common"></div>

float + calc

.common {    height: 50px;}#header {    background-color: sandybrown;}#footer {    background-color: brown;    clear: both;}.column {
    float: left;
}#container {    width: 100%;    height: 800px;}#left {    width: 200px;    height: 500px;    background-color: blue;}#right {    width: 150px;    height: 400px;    background-color: red;}#main {    width: calc(100% - 350px);    height: 100%;    background-color: yellow;}


<div id="header" class="common"></div>
    <div id="container">        <div id="left" class="column"></div>        <div id="main" class="column"></div>        <div id="right" class="column"></div>    </div><div id="footer" class="common"></div>

position + padding

.common {    height: 50px;}#header {    background-color: sandybrown;}#footer {    background-color: brown;    clear: both;}
#container {    height: 800px;    position: relative;    padding-left: 200px;    padding-right: 200px;}.aside {    height: 400px;    position: absolute;    top: 0;}#left {    width: 200px;    background-color: blue;    left: 0;}#main {    width: 100%;    height: 100%;    background-color: yellow;}#right {    width: 150px;    background-color: red;    right: 0;}
<div id="header" class="common"></div>    <div id="container">        <div id="left" class="aside"></div>        <div id="main"></div>        <div id="right" class="aside"></div>    </div><div id="footer" class="common"></div>

flex

.common {    height: 50px;}#header {    background-color: sandybrown;} #footer {    background-color: brown;    clear: both;}#container {    width: 100%;    height: 800px;    display: flex;}#left {    flex-basis: 200px;    height: 500px;    background-color: blue;} #right {    flex-basis: 150px;    height: 400px;    background-color: red;}#main {    width: 100%;    height: 100%;    flex: 1;    background-color: yellow;}


<div id="header" class="common"></div><div id="header" class="common"></div>    <div id="container">        <div id="left" class="column"></div>        <div id="main" class="column"></div>        <div id="right" class="column"></div>    </div><div id="footer" class="common"></div>