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