要理解的基本概念：

文档流Normal Flow
块、内联、内联块
margin合并
两种盒模型（border-box更符合人类的思维）

css的牛逼之处在于：

层叠样式表
可以多次对同一选择器进行样式声明
选择器层叠
可以用不同选择器对同一个元素进行样式声明
文件层叠
可以用多个文件进行层叠
这些特性使得CSS极度活跃
这也为CSS后来被吐槽留下隐患
世界上使用最广泛的CSS版本是2.1；从3开始就是每个模块自己升级

查看模块是否适配游览器： caniuse.com/

CSS的语法1：

选择题{

属性名：属性值;

}

注意事项：

所有符号都是英文
区分大小写，a和A是不同的东西
最后的分号可以省略，但是不建议
写错了不会报错，游览器会忽略

CSS语法2：at语法

@charset "utf-8";

@import url(2.css);

@media (min-width:100px) and (max-width:200px) {

语法一

}

注意事项：

@charset必须放在第一行
前两个at都必须以分号;结尾
@media语法会单独教学
charset是字符集的意思，但UTF-8是字符编码encoding，这是历史遗留问题

如何调试：

border调试大法：
怀疑某个元素有问题
就给这个元素加border
border没出现，说明选择器错了或者语法错了
border出现，看看边界是否符合预期
bug解决了才可以吧border删除

在哪查资料：

谷歌搜索关键词时加mdn
CSS tricks(英文)
张鑫旭的博客

在哪练习：

PSD：

freepik搜索PSD web www.freepik.com/search?quer…
365PSD里的UI套件还行 cn.365psd.com/free-psd/ui…

效果图（不提供下载）：

dribbble.com 顶级设计师社区
可以用肉眼模仿它

商业网址：

直接模仿你常去的网站

标准制定者：w3c

搜索CSS spec可以找到CSS最新标准
还有看CSS2.1标准的中文版 www.ayqy.net/doc/css2-1/…

文档流

文档流指的是文档中元素的流动方向

一次写多个的方式：span{第$个元素}*8

一次简写：span.ib{第$个inline-block元素}*8就会等于8个

什么是inline，什么是block呢？

流动方向：

inline元素从左到右，到达最右边才会换行
block元素从上到下，每一个都另起一行
inline-block也是从左到右（但是不会跨两行分开）
不要在inline元素里面写block元素（没人会这样做）

宽度：

inline宽度为内部inline元素的和，不能用width指定。
block默认自动计算宽度（不是占满屏），可用width指定。（永远不要写宽度100%）
inline-block结合前两者特点，可用width（宽度是自适应的）。

高度：

inline高度有line-height（行高）间接确定，跟height无关
block高度由内部文档流元素决定，可以设height
inline-block跟block类似，可以设height

overflow 溢出

当内容的宽度或者高度大于容器的，就会溢出，可用overflow来设置是否显示滚动条

auto是灵活设置
hedden是直接隐藏溢出部分
visible是直接显示溢出部分
scroll是永远显示（不好用）
overflow可以分为overflow-x和overflow-y

脱离文档流

用float、position：absolute/fixed这两个可以脱离

盒模型

分别是：

content-box内容盒-内容就是盒子的边界
border-box边框盒-边框才是盒子的边界
就是以宽度来区分

公式：

content-box 的宽度 width ：表示内容区的宽度，不包含 padding 和 border；

border-box 的宽度 width ：表示内容区 + padding + border 的总和。一般优先使用后者。

同时指定这三个padding、width、border就知道为什么了

margin 合并

哪些情况会合并

父子margin 合并
兄弟margin 合并

只会在上下重叠合并，不会在左右重叠合并

合并的前提是他们中间什么都没有，所以以下加了东西就可以阻止合并

如何阻止合并

父子合并用padding/border挡住
父子合并用overflow：hidden挡住
父子合并用display：flex，不知道为什么
兄弟合并是符合预期的
兄弟合并可用inline-block消除
每条都死记，CSS的属性逐年增多，每年都可能有新的

基本的单位

长度单位：

px像素
em相对于自身font-size的倍数
百分数
整数
rem:等你把em滚瓜烂熟了再问rem
vw和vh
其他长度单位都用的少，不用了解

颜色：

十六进制#FF6600或者#F60
RGBA颜色rgb（0,0,0）或者rgb（0,0,0,1）
hsl颜色hsl（360,100%,100%）

请简述 CSS 盒模型是什么

参考答案

CSS 盒模型有两种，一种是 content-box 一种是 border-box。 content-box 的宽度 width 表示内容区的宽度，不包含 padding 和 border； border-box 的宽度 width 表示内容区 + padding + border 的总和。一般优先使用后者。

其他回答

CSS3 box-sizing 属性分为content-box和border-box

content-box：在该盒属性下，对元素设定的width和height会被应用到元素内容框，在内容框宽高之外绘制元素的内边距和边框。

border-box：在该盒属性下，对元素设定的width和height会被应用到元素边框盒，为元素设置的的任何padding和border都将在已设定的width和height内进行绘制。通过从已设定的宽高分别减去padding和border得到内容框的宽高。

display:block：block元素会独占一行，默认情况下宽度会自动填满父级元素的宽度；可以手动设置width和height属性，也可设置padding和margin属性。

display:inline：inline元素在有多个的情况会自动排列填满一行后换行，宽度是由元素内容决定，设置width、height属性无效，设置竖直方向的padding、margin属性无效。

display:inline-block：inline-block元素是借鉴了以上两种元素的特性，在有多个该元素的情况时会保持同行排列，同时也可以对其中每一个元素设置宽高、间距属性。

CSS基础概念