引入方法
行内样式、文件引入、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的话要对浏览器进行判断,最好写多套代码。