CSS篇|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第二天

css选择器

单选择器

()内表示选择器的权重大小，不可跨级

• id选择器(0100) #id
• 类选择器(0010) .class
• 属性选择器(0001) [props]
• 伪类选择器 :

1. 状态选择器 a:hover、a:visited、a:active、 a:link
2. 结构选择器 #id:first-child

复合选择器

• 且选择器(权重相加，不可跨级) div.class
• 选择器组 #id,.class
• 后代选择器(权重相加) .class dv
• 子代选择器(权重相加) .class>div
• 兄弟选择器(权重相加).class~div
• 下一个兄弟选择器(权重相加) .class+div

重要属性

颜色值

• rgb(0--255,0--255,0--255)
• hsl(0--360,0--100%,0--100%) hsl的三个为色相，饱和度，亮度

rgba与hsla:多了第四个属性透明度alpha，大小为0--1

字体(font)

font:font-style font-weight font-size/line-height font-family 后两者必写

• font-style:字体风格，可选值为 normal,italic
• font-weight:字体粗细，可选值为 normal | bold | bolder | lighter | 100~900
• font-size:字体大小
• line-height:行高，用数字表示字体大小的倍数，推荐1.6
• font-family:字体族，可写多个，用逗号隔开，以通用字体结尾，用来兜底

white-space(处理空白)

常用可选值：normal，pre(保留空白)，nowrap(换行)

超出长度的文本可变为省略号的搭配： #id{ white-space:nowrap; width:100px;(必须设置width属性) overflow:hidden; text-overflow:ecllipsis; }

布局

相关技术

浮动

绝对定位

常规布局

1、 行级(IFC)

1. text-align决定水平对齐
2. vertical-align决定竖直对齐
3. 避开浮动元素

2. 块级(BFC)

1. 解决外边距折叠问题
2. 不会被浮动元素覆盖
3. 可以包含浮动元素的子元素不会高度塌陷

3. 表格布局

4. FlexBox

1. justify-content:决定主轴方向的对齐
2. align-item:决定副轴方向的对齐
3. align-self:弹性盒中某个子元素的对齐
4. flex-direction:决定主轴的方向
5. flex-grow:剩余空间的放大,默认0，不放大
6. flex-shrink:不够空间缩小，默认1，不缩小
7. flex-basis:最小的大小，默认auto，本身大小
8. flex简写：flex-grow flex-shrink flex-basis

5. Grid布局

盒子模型

四部分

• content:盒子的内容
• border:盒子边框
• padding:内容与边框的距离
• margin：盒子之间的距离
• width与height所修饰的都是content的大小

外边距折叠

• 相邻兄弟盒子的在垂直方向的外边距会发生重叠
• 父子元素边框重叠时，移动子元素动的是父元素

小技巧

1. 只对块级元素水平居中对齐有效: 必须指定宽度，margin:0 auto

2. 解决子元素浮动后父元素高度塌陷与父子边框重叠问题

clearfix::before,
clearfix::after{
    content:"";
    clear:both;
    display:table;该伪元素默认是行内块元素
}