自学前端之CSS知识点回顾盒子模型的范围包括 margin、border、padding、content，和标准 W3C

盒模型

ie和标准浏览器盒模型的区别

盒子模型的范围包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

弹性盒

弹性盒模型：display：flex；加在父元素上

属性
- flex-direction：主轴方向
  - row：从左往右（默认）
  - column：从上到下
  - row-reverse：从右到左
  - column-reserve：下上
- justify-content：主轴排列方式
  - flex-start：顶端对齐（默认）
  - center：中间对齐
  - flex-end：尾部对齐
  - space-around：两端对齐，最两端是中间空隙的一半
  - space-between：两端对齐，两端无空
  - space-evenly：两端对齐，空隙都一样
- align-items：侧轴排列方式
  - flex-start：顶端对齐（默认）
  - center：中间对齐
  - flex-end：尾部对齐
  - baseline：顶端对齐
- flex-wrap：换行
  - nowrap:不换行（默认）
  - wrap：换行
  - wrap-reverse：反向换行
- align-content:行与行的排列方式
  - flex-start：侧轴顶端对齐
  - center：侧轴居中对齐
  - flex-end：侧轴尾部对齐
  - space-around，space-between，space-evently：与上同
- order：子元素排列顺序
  - 整数，order值越大排在越后面
- align-self：子元素侧轴排列方式
  - 属性值于align-ltems同
- flex：1（放大倍数） 1（缩小倍数）

css单位

在css中, 长度单位分为以下几种
- 绝对单位: px、in、cm、mm、pt、pc
- 百分比单位: vw、vh、vmin、vmax、%
- 相对单位: em、rem、ex、ch
各单位介绍

px

不用过多介绍, 精确像素

in

寸

cm

厘米

mm

毫米

pt

大约1/72寸

pc

大约1/6寸

vw

以窗口宽度为参照, 1vw为窗口宽度的1%

vh

窗口高度为参照, 1vh为窗口高度的1%

vmin

窗口的宽度和高度中较小的一个为参照

vmax

窗口的宽度和高度中较大的一个为参照

%

以父节点为基准的百分比

em

以父节点字体大小为基准值

rem

以根节点字体大小为基准值

ex

当前字体x的高度为基准

ch

以当前字体0字符为基准值

css选择器

基本选择器：
- 标签选择器：选择器的名字代表html页面上的标签
- ID选择器：规定用#来定义（名字自定义）
- 类选择器：规定用圆点.来定义
- 通配符*：匹配任何标签
高级选择器：
- 后代选择器：用空格隔开
```
<style type="text/css">
        .div1 p{
            color:red;
        }
</style>
```
- 交集选择器：用.隔开
```
<style type="text/css">
h3.special{
    color:red;
}
</style>
```
- 并集选择器（分组选择器）：用逗号隔开、
```
p,h1,#mytitle,.one/*定义了一个并集选择器，带有p,h1,id="mytitle",class="one"的标签都内容会显示红色*/{
    color:red;
}
```
- 伪类选择器
  
  对于``标签，其对应几种不同的状态：
  - link：超链接点击之前
  - visited：超链接点击之后
  - focus：是某个标签获得焦点的时候（比如某个输入框获得焦点）
  - hover：鼠标放到某个标签上的时候
  - active：点击某个标签没有松鼠标时

bfc 清除浮动

BFC的特性
- 1、BFC会阻止外边距叠加：一般情况，两个相邻的块级框，它们之间的垂直方向的外边距会发生叠加。如果这两个相邻的块框不属于同一个BFC就不会叠加！ BFC不会重叠浮动元素
- 2、一个BFC的边框不能和它里面的元素的margin重叠。这意味着浏览器将会给BFC创建隐式的外边距来阻止它和浮动元素的外边距的叠加。当给一个挨着浮动的BFC添加负得外边距不会起作用！
如何触发BFC?
- float除了none以外的值
- overflow除了visible之外的值
- display(table-cell table-caption,inline-block)
- position(absolute,fixed)
清除浮动
1. 父元素也添加一个浮动
  
  产生弊端就是：margin 不能使用
2. 给父元素添加一个:display:inline-block
  
  弊端同1一样：无法使用margin
3. 给父元素添加高
  
  弊端：扩展性不好，我们无法随意再添加元素
4. clear样式：规定元素的那一侧不允许其他元素浮动
5. 伪类清浮动
```
clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
lineheight:
0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
```

层叠上下文

普通文档流中遵循：“后来者居上”。

当两个元素都为块元素时，默认越后面的元素层级越高，但是背景的层级比文字小。后来的块元素也盖不住前面的文字。

当两个元素都为行内块和行内元素时，也是后来的元素比前面的元素层级高，但是与块元素不同的是行内块元素的背景层级比文字高。

行内元素和行内块元素的层级比块级元素高。
浮动系列：

浮动和浮动比，后一个比前一个层级高

浮动和块元素比，浮动层级高

浮动和行内块比，行内块层级高

浮动和行内比，行内层级高
定位的元素：

都为定位元素时，也遵循后一个元素比前一个元素高。

绝对定位和块元素比，绝对定位层级高

绝对定位和行内块元素比，绝对定位层级高

绝对定位和行内元素比，绝对定位层级高

绝对定位和浮动，绝对定位层级高。

常见页面布局

固定布局（最基本的布局）
流式布局也叫百分比布局

把元素的宽,高,margin,padding不再用固定数值,改用百分比,这样元素的高,margin,padding 会根据页面的尺寸随时调整，已达到适应当前页面的目的.

百分比是基于元素父级的大小计算得来的；

元素的水平或者竖直间距都是相对于父级的宽度计算的.(margin&padding)

边框不能用百分比设置
弹性布局（伸缩布局）

CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的
浮动布局(float)
定位布局

position: fixed;固定布局

position: relative;相对定位，相对于元素自身定位，不脱离文档流

position: absolute;绝对定位，脱离文档流
grid布局

响应式布局

css预处理，后处理

animation和transiton的相关属性

animate和translate

display哪些取值

none 此元素不会被显示，并且不占据页面空间，这也是与visibility:hidden不同的地方，设置visibility:hidden的元素，不会被显示，但是还是会占据原来的页面空间。
inline 行内元素元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。

示例元素：span,b,i,a,u,sub,sup,strong,em
block 块级元素会独占一行，如果不设置宽度，其宽度会自动填满父元素的宽度，可以设置宽高，即使设置了宽度，小于父元素的宽度，块级元素也会独占一行。

示例元素：div,h1-h6,ul,ol,dl,p
inline-block 行内块元素与行内元素一样可以再一行内显示，而且可以设置宽高，可以设置margin和padding。

示例元素：input,button,img
list-item 列表元素

示例元素：li
table 会作为块级表格来显示(类似于
)，表格前后带有换行符。
inline-table 会作为内联表格来显示(类似于

flex 多栏多列布局，火狐可以直接使用，谷歌和欧朋需要在属性值前面加-webkit-前缀，比较适合移动端开发使用。

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。

伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。

相邻的两个inline-block节点为什么会出现间隔，该如何解决

inline-block为什么会有间距？

它由空格、换行或回车所产生空白符所致

解决方案

给父级元素设置font-size： 0；子元素设置相应的font-size

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
           font-size: 0;
        }
        span{
            display: inline-block;
            background: #000;
            width: 50px;
            height: 50px;
            word-wrap: 0;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

改变书写方式，元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就消失了
```
<body>
    <div>
        <span></span><span></span><span></span>
    </div>
</body>
```
margin负值

margin负值的大小与上下文的字体和文字大小相关，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。

设置父元素，display:table和word-spacing（亲测火狐不可用）

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
           display: table;
           word-spacing: 0; 
        }
        span{
            display: inline-block;
            background: #000;
            width: 50px;
            height: 50px;
            word-wrap: 0;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

meta viewport 移动端适配

viewport设置移动端自适应的方法：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

meta viewport 的6个属性：
- widtn：设置layout viewport的宽度，为一个正整数，或字符串"width-device"
- initial-scale：设置页面的初始缩放值，为一个数字，可以带小数
- minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
- maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数
- height：设置layout viewport的高度，这个属性并不重要，很少使用
- user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

CSS实现宽度自适应100%，宽高16:9的比例的矩形

<div class="box">
  <div class="scale">
    <p>这是一个16：9的矩形</p>
  </div>
</div>

.box {
  width: 80%;
}

.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
}

rem布局与@media的优缺点

画三角形

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

#blue:after {
content: "";
position: absolute;
top: 2px;
left: -38px;
border-width: 0 38px 38px;
border-style: solid;
border-color: transparent transparent #fff;
}

自学前端之CSS知识点回顾

盒模型

ie和标准浏览器盒模型的区别

弹性盒

属性

css单位

css选择器

bfc 清除浮动

层叠上下文

常见页面布局

响应式布局

css预处理，后处理

animation和transiton的相关属性

animate和translate

display哪些取值

相邻的两个inline-block节点为什么会出现间隔，该如何解决

解决方案

meta viewport 移动端适配

CSS实现宽度自适应100%，宽高16:9的比例的矩形

rem布局与@media的优缺点

画三角形