1、BFC(Block Formatting Contexts),块级格式化上下文
-
规则
- 内部的块级box会在垂直方向,一个个地放置
- 属于同一个BFC的两个相邻BOX的上下margin会发生重叠
- 计算BFC的高度时,浮动元素也参与计算
- 盒子中每个块级元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此
- BFC的区域不会与float重叠
-
触发
- body根元素
- 浮动元素:float不为none的属性值
- 绝对定位元素:position(absolute、fixed)
- display为:inline-block、table-cell、flex
- overflow除了visible以外的值(hidden、auto、scroll)
-
作用
- 解决margin重叠问题(属于同一个BFC的两个相邻BOX的上下margin会发生重叠)
- 解决浮动高度塌陷问题(浮动子元素没有参与计算父元素的高度)
- 解决侵占浮动元素(浮动、定位脱离了文档流)
2、隐藏页面中某个元素的方法
- display:none;
- visibility:hidden;
- opacity: 0;
- position移动到外部
- z-index遮盖
3、CSS优先级
!important > 内联style属性 > id > class、伪类、属性名 > 标签名、伪元素 > 通配符(*)
-
权重值
- 内联style属性 (1000)
- id (100)
- class、伪类、属性名 (10)
- 标签名、伪元素(1)
-
其它规则
- !important声明的优先级最高。冲突则计算。
- 优先级相同时,就近原则
- 继承的样式,其优先级最低(嵌套子类>单个子类)
4、兼容性问题:CSS浏览器私有属性
-moz- => firefox
-webkit- => Chrome
-ms- => IE
-o- => opera
// 通过自动化插件来处理这些兼容问题
Autoprefixer、webpack、gulp、grunt都有相应的插件
5、响应式布局
-
无device 设置针对电脑浏览器(screen and可省略)
@media screen and (min-width:200px) and (max-width:400px){ /* 代表 200 <= screen <=400 触发 */ }
-
device 设置针对手机宽度
@media (min-device-width:200px) and (max-device-width:400px){}
-
媒体查询其它引入方式
-
<style media="(min-width:600px)"> // style
-
<link rel="stylesheet" href="" media="(min-width:600px)"> // link
-
-
其它属性
-
only (限定某种设备)
@media only screen and 。。。
-
screen 是媒体类型里的一种
-
媒体类型
all 所有设备 braille 盲文 embossed 盲文打印 handheld 手持设备 print 文档打印或打印预览模式 projection 项目演示,比如幻灯 screen 彩色电脑屏幕 speech 演讲 tty 固定字母间距的网格的媒体,比如电传打字机 tv 电视
-
6、属性选择器
-
简易
h1[class] h1[class="person2"]
-
部分属性值选择器
[class~="bar"] => 有class属性,有个空白符隔开 如:class ="bar",字符串有有包含bar[class*="bar"] => 有class属性,所有包含 bar字符 的元素[class^="bar"] => 有class属性,且开头为bar[class$="bar"] => 有class属性,且结尾为bar[class | ="bar"] => 有class属性,值为 bar 或者 以-分隔开,如 bar-haha
-
后代选择器 和 子选择器
div h3 {} /* div 后代以及子孙节点的 h3 全部拥有 */div>h3 {} /* 只有div 后代的 h3 */
-
相邻兄弟选择器 + ; 一般兄弟选择器 ~
h1+p {} /* h1后面的p元素获取该样式 */h1~p {} /* h1后面所有的p元素都获取该样式 */
7、伪类伪元素
-
伪类选择器
:root 根元素:nth-child() 、 :nth-last-child():nth-of-type() 、 :nth-last-of-type():first-child 、 :last-child:first-of-type 、 :last-of-type:only-child(子元素只能为一个) 、 :only-of-type(子元素可以有多个,但选择的元素只能有一个):empty 没有子节点(不只元素)
-
额外:
:nth-of-type(odd){ 奇数行 } :nth-of-type(even){ 偶数行 }
-
伪类
-
点击/状态前
1 :link 未点击时2 :hover 鼠标悬停状态3 :focus 获得焦点时4 :enabled/disabled input、textarea、select专用,可输入为真假时
-
点击/状态后
:active 点击之后:visited 访问过之后:checked 选中的元素 一般用于checkbox、select:not(s) 反向选择,一般配合其它伪类选择器
-
-
伪元素
::first-line 元素第一行内容::first-letter 元素第一个字符::after 插入到子元素之后,类似appendChild::before 插入到父元素第一个子元素的前面,类似insertBefore(a, firstChild)
8、flex弹性盒
-
flex-direction => 主轴方向与换行
/* 1 flex-direction => 主轴方向与换行 *//* 1.1 默认是 行排序 */flex-direction: row;/* 1.2 反转行排序 */flex-direction: row-reverse;/* 1.3 列排序 */flex-direction: column;/* 1.4 反转列排序 */flex-direction: column-reverse;
-
flex-wrap => 子元素在父元素盒子中是否换行(列)
/* 2 flex-wrap => 子元素在父元素盒子中是否换行(列) */width: 200px;/* 2.1 默认是 不换行(列)*/flex-wrap: nowrap;/* 2.2 换行后,不会根据父元素宽度进行压缩子元素大小了,默认就是100了 */flex-wrap: wrap;/* 2.3 反转换行 */flex-wrap: wrap-reverse;
-
两者合并简写:
flex-flow: <flex-direction> || <flex-wrap>
/* 3 两者合并简写:flex-flow: <flex-direction> || <flex-wrap> */flex-flow: row wrap;
-
justify-content => 用来在存在剩余空间时,设置为间距的方法
/* 1 默认值,从左到右,挨着行的开头 */justify-content: flex-start;/* 2 从右到左,挨着结尾 */justify-content: flex-end;/* 3 居中 */justify-content: center;/* 4 平均分布在该行上,两边不留空间 */justify-content: space-between;/* 5 平均分布在该行上,两边留有每个元素间隔空间的一半 */justify-content: space-around;
-
align-items => 交叉轴的对齐方式
/* 默认主轴方向为行,此时交叉轴方向为列 *//* 5.1 位于容器的开头 */align-items: flex-start;/* 5.2 位于容器的结尾 */align-items: flex-end;/* 5.3 居中显示 */align-items: center;/* 5.4 默认值,子元素自适应flex盒子高度,默认高度需要添加align-items: flex-start */align-items: stretch;
-
flex 其它属性(给子对象使用)
/* 6.1 flex-basis => !“主轴”!伸缩基准值,子对象宽度设置为50px */ flex-basis: 50px;/* 6.2 flex-grow => 扩展比率,父对象还有空间 计算方式:父元素宽(400)-设置的子元素宽(50+100)= 250 250/2 = 125 px flex-grow 1 => width: 120px + 子元素设置的基准值(50px) flex-grow 1 => width: 120px + 子元素设置的基准值(100px)*/ flex-grow: 1;/* 6.3 flex-shrink => 缩小比率 *//* 计算方式跟扩展差不多 *//* 6.4 flex flex-grow、flex-shrink、flex-basis三者合并 */
-
特殊写法
flex: auto => flex: 1 1 auto => (因为1 1 =将剩余空间自动平分完)flex: none => flex: 0 0 auto => 自身width值flex: 0% => flex: 1 1 0% => 自身width值 = 设置的百分比值(会自动填充)flex: 100px => flex: 1 1 100px => 至少为100px,在100以上进行加减flex: 1 => flex: 1 1 0%
编辑 | sishen
来源 | 前端兔
公众号 | 前端兔
关注公众号查看更多前端知识分享~~