CSS 笔记

是否占据空间的隐藏

display : none			不占空间的隐藏
visibility：hidden		占空间的隐藏
opacity:0；				将透明内容，占空间的隐藏

float属性的注意点

只会影响后面的元素
内容默认提升半层（文字也是半层）
默认宽度（也可以手动设置）根据内容决定
换行排序
主要给块元素添加，但也可以给内联元素添加

relative:

1、如果没有定位偏移量，对元素本身没有任何影响
2、不是元素脱离文档流
3、不影响其他元素布局
4、left、top、right、bottom时相对于当前元素自身进行偏移的

absolute:

1、使元素完全脱离文档流
2、使内联元素支持宽高（让内联具备块特性）
3、使块元素默认宽度根据内容决定（也可以手动设置）（让快具备内联的特性）
3、如果有定位祖先元素相对于定位祖先元素发生偏移，如果没有定位祖先元素相对于整个文档发送偏移（绝对、相对、固定）

position: fixed;：

1、使元素完全脱离文档流
2、使内联元素支持宽高（让内联具备块特性）
3、使块元素默认宽度根据内容决定（让块具备内联的特性）
4、相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

position: sticky;（粘性定位）

1、在指定位置，进行粘性操作
例如：一个导航栏在一开始在上面，但是如果窗口往下滑动的时候就看不见了，那么如果给导航栏加上“粘性定位：top: 0px;”那么窗口下滑时，也能看到导航栏。

transform的注意事项：

1、变形操作不会影响到其他元素。
2、变形操作只能添加给块元素，但是不能添加给内联元素。
3、符合写法，可以同时添加给多个变形操作。
	执行时由顺序的，先执行后面的操作，在执行前面的操作。
	translate会受到rote、scale、skew的影响
4、transform-origin：基点的位置
	x   y   z(3D)

分栏布局

column-count：分栏个数
column-width：分栏的宽度
column-gap：分类的间距
column-rule：分类的边线
column-span：合并分类

注：column-width和column-count不能一起设置，不然会由一个不生效。

伪类与伪类元素概念

伪类本质上是为了弥补常规css选择器的不足，以便获取到更多的信息通常表示获取不存在与DOM数中的信息，或获取不能被常规CSS选择器获取的信息。
例	:hover、:focus、:empty
伪类元素本质上式创建了一个内容的虚拟容器。这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪类元素定制样式。
例	::selection、::first-line	/	::first-letter、::before	/	::after在这里插入代码片

CSS Hack

CSS Hack用来解决浏览器的兼容性问题，为了不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器显示的样式。

Hack分类

1、CSS属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的Hack前缀，以达到预期的页面展现效果。
前缀表示			兼容浏览器
_						IE6
+、*					IE6、IE7
\9						IE6、IE7、IE8、IE9
\0						IE8、IE9、IE10、IE11

2、选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
前缀标识					兼容浏览器
*html						IE6
*+html						IE7
:root							IE9以上及现代浏览器

3、IE条件注释法

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。
	前缀标识									兼容浏览器
	<!--[if IE]>...<!--[endif]-->					IE
	<!--[if IE 7]>...<!--[endif]-->				IE7
	<!--[if lte IE 7]>...<!--[endif]-->			IE7以下
	<!--[if ! IE 7]>...<!--[endif]-->			非IE7