VUE
2022-07-21 17:30:30 0 举报AI智能生成
css
作者其他创作
大纲/内容
盒模型 boxModel
content
padding
margin
border
padding
margin
border
overflow:
子元素大小超过父元素发生溢出, 处理溢出的选项
visible: 默认值, 溢出
hidden: 隐藏
scoll: 滚动条
auto: 根据需要生成滚动条
子元素大小超过父元素发生溢出, 处理溢出的选项
visible: 默认值, 溢出
hidden: 隐藏
scoll: 滚动条
auto: 根据需要生成滚动条
margin:
垂直方向的相邻盒子, 外边距是会重叠
- 兄弟元素: 上下外边距, 取较大值
- 父子元素: 相邻外边距, 子元素会传递给父元素
父元素加一个上边框, 不相邻了就不
共享外边距了
垂直方向的相邻盒子, 外边距是会重叠
- 兄弟元素: 上下外边距, 取较大值
- 父子元素: 相邻外边距, 子元素会传递给父元素
父元素加一个上边框, 不相邻了就不
共享外边距了
border-width
border-color
border-style
border-color
border-style
flex
父属性
flex-dirction: 主轴方向
row/row-reverse & column/column-reverse
justify-content: 主轴元素排列方式
flex-start: 默认值, 头部开始
flex-end: 尾部开始
center: 居中
space-around: 平分空间(item左右间隙相等)
space-between: 两边贴边, 剩余平分
flex-end: 尾部开始
center: 居中
space-around: 平分空间(item左右间隙相等)
space-between: 两边贴边, 剩余平分
flex-wrap: 子元素是否换行
默认子元素不换行, 分摊一行面具
设置wrap后, 自动换行
设置wrap后, 自动换行
align-content: 侧轴元素排列方式(多行)
适用于子元素有换行的情况下, 单行无效
flex-start: 默认值, 头部开始
flex-end: 尾部开始
center: 居中
space-around: 平分空间(item左右间隙相等)
space-between: 两边贴边, 剩余平分
stretch: 子元素高度平分父元素高度
flex-start: 默认值, 头部开始
flex-end: 尾部开始
center: 居中
space-around: 平分空间(item左右间隙相等)
space-between: 两边贴边, 剩余平分
stretch: 子元素高度平分父元素高度
align-items: 侧轴元素排列方式(单行)
flex-start: 默认值, 头部开始
flex-end: 尾部开始
center: 居中
streth: 伸缩, 子元素没有height的话, 侧轴拉满
flex-end: 尾部开始
center: 居中
streth: 伸缩, 子元素没有height的话, 侧轴拉满
flex-flow: flex-direction + flex-wrap
原理
父盒子flex, 子元素的float, clear, vertical-align属性都失效
父成为容器, 子元素都为容器成员(item)
子属性
flex: 1, 权重
align-self: 控制子项自己在侧轴的对齐方式
order: 默认0, 数值越小排的越靠前
选择器
选择器
# div元素且类名red
div.red
div#green
div.red
div#green
.a.b.c # 同时包含a, b, c的class
.a, .b # 逗号分隔, a & b类
.a, .b # 逗号分隔, a & b类
关系选择器
一层嵌套: 父子选择器
div.box > span
div.box > span
多层嵌套: 后代选择器, 空格隔开
div span # div下的所有后代span
div span # div下的所有后代span
同层最近: 兄弟选择器
div + span # div最近的同级span
div + span # div最近的同级span
同层所有: 兄弟选择器
div ~ span # div最近的同级span
div ~ span # div最近的同级span
伪类选择器:
不存在的类, 描述一个特殊状态的元素
比如: 鼠标选中, 第一个字元素, 被点击
冒号开头
不存在的类, 描述一个特殊状态的元素
比如: 鼠标选中, 第一个字元素, 被点击
冒号开头
ul > li:first_child
:nth-child(3) # 第三个字元素
2n: 偶数
2n+1: 奇数
-n+2: 前两个
2n+1: 奇数
-n+2: 前两个
:first-of-type # 同类型计算
li:not(:last-child) # 最后一个元素不适用
伪元素选择器:
不存在的元素, 特殊的位置的元素
双冒号开头
不存在的元素, 特殊的位置的元素
双冒号开头
::first-letter
div.wrap::first-line
::befer # 元素开始的位置
::after # 元素结尾的位置
布局
水平布局:
等式: margin + border + padding + width = 父元素内容区宽度
- 如果不等于, 会自动调整margin-right区满足等式
- width和margin-left和margin-right可以设置auto, 效果: 自动调整auto使等式成立
等式: margin + border + padding + width = 父元素内容区宽度
- 如果不等于, 会自动调整margin-right区满足等式
- width和margin-left和margin-right可以设置auto, 效果: 自动调整auto使等式成立
元素
块元素
宽度: 父元素宽度, 把父元素完全撑开
高度: 子元素高度, 被子元素撑开
垂直方向相邻块元素会发生margin重叠
行元素
行内元素可以设置margin, padding, border, 但是垂直方向不会影响页面布局
行内元素不支持设置宽高
浮动
属性值
none:
left:
right:
left:
right:
特点
浮动不会覆盖文字, 会造成环绕文字
浮动后脱离文档流
块元素
不会再独占一行
宽高被内容撑开
行元素
特点变成块元素
脱离后不区分块行
clear
不希望某个元素因其他元素浮动而影响, 使用clear清除浮动
浏览器会自动添加一个外边距
: left, right, both
浏览器会自动添加一个外边距
: left, right, both
高度塌陷 & BFC
父元素不设置高度, 高度由子元素撑开
但是子元素如果设置浮动, 脱离文档流
父元素就不会被其撑开, 从而塌陷
但是子元素如果设置浮动, 脱离文档流
父元素就不会被其撑开, 从而塌陷
- BFC(块级格式化环境)
CSS隐藏属性, 一个元素开启bfc后, 该元素变成独立布局
开启方式
- 父元素float: left
- display: inline-block
- overflow: 非visible(推荐), hidden, auto等
CSS隐藏属性, 一个元素开启bfc后, 该元素变成独立布局
开启方式
- 父元素float: left
- display: inline-block
- overflow: 非visible(推荐), hidden, auto等
- 不会被浮动元素覆盖
- 子元素和父元素的margin不会重叠
- 包含浮动子元素, 解决高度塌陷问题
- 父元素写死高度
- clear
box1里面包含box2, box3, box2浮动后
把box3清除浮动, box3就会把父元素撑开
box1::after {
content: '';
display: 'block';
clear: both;
}
把box3清除浮动, box3就会把父元素撑开
box1::after {
content: '';
display: 'block';
clear: both;
}
外边距重叠和清除浮动双重解决方案
.clearfix::after, .clearfix::before {
content: "";
clear: both;
display: table;
}
.clearfix::after, .clearfix::before {
content: "";
clear: both;
display: table;
}
定位
相对定位: relative
top, left, 相对自身当前位置
绝对定位: absolute
脱离文档流, 且行内变成块, 块的宽高被内容撑开
子绝父相: 相对于最近的开启定位的父元素或body
子绝父相: 相对于最近的开启定位的父元素或body
固定定位: fixed
和绝对定位唯一的区别是: 永远相对于根元素, 浏览器的可视窗口, 宽高也不限定于父元素
粘滞定位 :sticky
tips
特点
浮动不会覆盖文字, 会造成环绕文字
浮动后脱离文档流
块元素
不会再独占一行
宽高被内容撑开
行元素
特点变成块元素
脱离后不区分块行
公司外部资源支持
0 条评论
下一页
