CSS基础笔记

引入方法

行内样式、文件引入、style标签

选择器以及权重

类型	示例	权重
行间样式	<p style="…" ></p>	1000
ID选择器	#id {}	100
类选择器	.class {}	10
伪类选择器	#id:hover {}	10
属性选择器	[type=“text”]	10
标签选择器	div	1
伪元素选择器	p:first-line	1
后代(直接)选择器	div p，div>p（直接）	0
兄弟(直接)选择器	div~p，div+p（直接）	0

通配符权重也为0，继承的样式没有权重。

选择器可以进行分组h1,p1{}，也可以进行嵌套h1.class1{}

小知识：伪类和伪元素很相似，但是不一样的，一个在于特定状态(动态)，一个在于本体

盒子模型

基本要素：内边距，外边距，宽高，边框（CSS3中有圆边框），轮廓（outline）

常用尺寸：height，width，line-height(文字)，最大/最小宽高（用于避免自适应导致的变

形），text-align

小知识：外边距margin取负值可用于复杂布局，取auto可以自适应长度，可用于居中

显示方式display

flex(重点)，用好flex，float就基本可以不用了，要用float一般要配合clear:both使用

inline(行内)，block(块级)，inline-block(内联块级)，none(相当于元素消失，与hidden不同，hidden是隐藏)

grid(重点)，还有个column

定位

绝对定位absolute，脱离文档流，相对于最近已定位祖先元素进行定位

相对定位relative，不脱离文档流，相对与自身原本位置进行定位

固定定位fix，脱离文档流，相对于窗口进行定位

黏性定位sticky ，在relative与fix间切换

常见问题

垂直水平居中：水平居中让margin为auto即可，垂直居中用50%加相对定位可以做到。

气泡的写法：利用大小为0边框不为0的div进行上色可以构建三角形，然后想办法各种拼接

双飞翼等布局：利用flex可以轻松解决，或者利用float结合margin取负值进行拼接

移动端自适应：设置viewport，然后用媒体查询，rem，vw等等单位，详情看自适应篇章

兼容问题：主要是要兼容IE，主要解决各种显示有问题的情况，所以用CSS3的话要对浏览器进行判断，最好写多套代码。