1.CSS的版本
CSS, 全称Cascading Style Sheets, 意思是”层叠样式表”. 层叠是指样式层叠, 选择器层叠, 文件层叠.
CSS, 1994年由Hakon Wium Lie提出.
CSS 1, 1996由Hakon Wium Lie发明.
CSS 2, 1998年发布.
CSS 2.1, 是2004-2011年开始起草的, 是使用最广泛的版本, 支持IE.
CSS 3, 是1999年开始起草的. 这是一个比较新的版本, 它是分模块的；升级也是分模块, 比如字体自己升级，颜色也自己升级， 各部分分开升级. IE8部分支持.
查看各个浏览器支持哪些CSS特性的网站, www.caniuse.com
2.CSS的语法
2.1样式语法
选择器{
属性名: 属性值;
/注释/
}
注意: 没有 // 注释.
语法写错了浏览器不会报错, 它会直接忽略. 在Chrome浏览器的”检查”项(即开发者工具)可以查看错在哪里.
2.2 @ 语法
@charset “UTF-8”;
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px){
语法一
}
第一行, 声明文件的编码;
第二行, 意思是引入一个额外的css文件;
第三行, 意思是媒体查询.
注意: @charset 必须放在第一行;
@charset “UTF-8”; 和 @import url(2.css); 都必须以英文分号; 结尾.
charset是字符集的意思, 但UTF-8是字母编码encoding.
3.border调试法
步骤:
1)怀疑某个元素有问题, 就给这个元素加border;
2)border没有出现, 说明选择器错了或语法错了;
3)border出现了, 看看边框是否符合预期;
4)bug解决了之后, 才可以把border删掉.
4.文档流
4.1流动方向
inline元素从左到右, 到达最右边才换行;
block元素从上到下,每一个都独占一行;
inline-block也是从左到右.
4.2 宽度
inline元素的宽度, 为内部inline元素的和, 不能用width指定;
block元素, 默认自动计算宽度, 可用width指定;
inline-block结合前两者特点, 可用width指定. nline-block元素不会跨两行.
注意: 在CSS中, 永远不要设置”width:100%;”, 除了某些特殊情况.
4.3 高度
inline元素的高度, 由line-height间接确定, 跟height无关.
block高度由内部文档流元素决定, 可以设height.
inline-block跟block类似, 可以设置height.
5.脱离文档流
浮动(float)、绝对定位（position: absolut;）、固定定位（position: fixed;）可以使元素脱离文档流. 语法如下:
5.1 float: left;
5.2 float: right;
5.3 position: absolute;
left/right/top/bottom: 值;
5.4 position: fixed;
left/right/top/bottom: 值;
6.overflow溢出
当内容大于容器, 即内容的宽度或高度大于容器时, 内容会溢出. 这时可用overflow来设置是否显示滚动条. overflow可以分为overflow-x和overflow-y.
6.1 overflow: auto;
作用: 灵活设置滚动条, 即当内容溢出就显示滚动条, 当内容不溢出, 则不显示滚动条.
6.2 overflow: scroll;
作用: 如果内容溢出, 会永远显示滚动条. 比较少用. 这个语法有个bug, 就是有时不会溢出, 也会显示滚动条. 解决这个bug的办法是改用overflow: auto.
注意: overflow: scroll的左右滚动条, 默认只在第一屏显示内容, 后面(即第一屏的右边)留空(没有内容).
6.3 overflow: hidden;
6.4 overflow: visible
作用: 显示溢出的内容.
7.盒模型
盒模型有两种, content-box、border-box.
content-box 内容盒, 内容就是盒子的边界;
border-box 边框盒, 边框才是盒子的边界.
注意:
content-box width = 内容宽度
border-box width= 内容宽度 + padding +border.
border-box盒模型更好用.
备注: content是内容, padding是内边距, border是边框, margin是外边距.
8.关于margin合并
8.1 哪些情况会合并
1)父子元素的margin合并;
2)兄弟元素的margin合并.
即父子元素、兄弟元素的margin-top和margin-bottom会合并, 但是margin-left和margin-right不会合并.
8.2 阻止合并的方法
父子合并用padding/border挡住;
父子合并用overflow: hidden挡住;
父子合并用display: flex;
兄弟合并可以用inline-block消除.
9.长度单位
px 像素
em 相对于自身font-size的倍数
百分数
整数
10.颜色
10.1十六进制
10.2 RGBA颜色
举例: rgb(0, 0, 0)或rgba(0, 0, 0, 1).
rgba的a是指透明度. a取1时, 指不透明, 0.5指半透明, 0是透明.
10.3 hsl 颜色
举例: hsl(360, 100%, 100%).
其中h是指色相(即颜色), s指饱和度, l指亮度.
色相(hue) 是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
饱和度(saturation)是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。
亮度(lightness)也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。
若有收获，就点个赞吧
0 人点赞
