CSS小结

盒模型的组成是什么？box-sizing有什么作用？

盒模型由margin（外边距），padding（内边距），border（边框），content（内容）

box-sizing包括：content-box，border-box，inherit

当box-sizing：content-box时，这种盒子模型成为标准盒子模型

当box-sizing: border-box时，这种盒子模型称为IE盒子模型。

1、标准盒模型中 width 和 height 对应的是内容区域 content 的宽度和高度。

2、怪异盒模型中的 width 和 height 对应的是内容区域、边框、内边距总的宽度和高度（content + border + padding）。

当box-sizing：inherit时，从父元素继承

CSS隐藏元素的方式有哪几种？

display：none；visibility：hidden；opacity：0；

如何实现盒子在页面水平居中和垂直居中？

水平居中：

行内元素：设置text-align：center；

块内元素，行内块元素：设置margin：0 auto；

垂直居中：

在使用margin进行垂直方向上的居中时，至少要满足三个条件中的一条才能达到垂直居中的效果，否则子元素和父元素会一同被带下来。这涉及到margin的合并，三种前提条件分别是：
1）为父元素设置border；
2）为父元素设置padding；
3）在父元素中添加overflow：hidden的样式。（在标准盒子模型中前两种会将盒子模型的既定尺寸扩充，在没必要设置padding和border时不建议使用前两种方法。）。

子绝父相

弹性盒

详细描述position，display：

position

position：absolute； 绝对定位，相对于父元素；

position：fixed；绝对定位，相当于窗口

position：relative；相对定位；

position：static；默认值；

position：inherit；继承父元素的定位属性

display

display：none；不会被显示；

display：inline；行内元素；

display：block；块级元素；

display：inline-block：行内块元素

浮动引起的问题以及解决方案：

浮动元素以及脱离标准流，父元素无法被撑开，会影响与父元素同级的元素。

清除浮动的方法：

额外标签法；使用伪类；浮动外部元素；设置高度或者用overflow：hidden；

Link与@import引入CSS的区别：

适用范围不同：@import可在网页页面中使用，也可在css文件中使用，用来将多个css文件引入到一个css文件；而link只能将css文件引入到网页页面中

功能范围不同：link属于HTML标签，除了能加载CSS外，还可以定义RSS，定义rel链接属性；而@import是CSS提供的一种方式，只能加载CSS

加载顺序不同：当页面被加载，Link引入的CSS同时被加载；而@import引用的CSS页面全部加载完才会被加载

兼容性差别：@import老浏览器不支持

三栏布局：

圣杯布局/双飞翼/Flex布局

CSS中选择器优先级关系：

行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性