Web前端第三章（清华 2019.2.18）

2023-07-26 18:55| 来源: 网络整理| 查看: 265

Float 父元素围住浮动的子元素 1. 父元素设置为overflow 2. 父元素也浮动 3. 添加一个空的末元素 clear-both 4. clearfix规则:

.clearfix::after{ content:"."; display:block; height:0; visibility:hidden; clear:both; }

布局：微博：左中右三栏固定宽度 div:overflow p1 p2 p3:float-left Google drive:左中右中栏自适应 div:overflow p1 p3 p2: p1 float-left p2 float-right p3:magin-left magin-right width:auto

定位: Relative 层级高于static Z-index Absolute 类似于float 脱离div 位置相对于父元素的定位元素位置若都为static 则相对于坐上开始 Fixed 类似于absolute 但是相对于浏览器适口滚动保持不动

CSS下拉菜单？

固定垂直居中按钮： Fixed top:50% magin-top:-1/2height [拓]弹出窗口？

Order:显示顺序 -1靠前默认0

Flexbox:(container) display:flex

flex-direction(主轴方向):row从左往右（默认） row-reverse:从右往左 column从上往下 column-reverse:从下往上

flex-wrap:自动换行 no-wrap:默认不换行会压缩在一行 wrap:换行

Flex-flow: flex-direction&& flex-wrap组合

Justify-content: Flex-start 默认 Center flex-end space-between 均匀放置 space-around 均匀但没有顶格分散到两侧

Align-content: Stretch 默认撑大 Flex-start 单行 center 侧轴居中 flex-end

Flex-item: Stretch 自动伸展为每一行高度(增量大小相同) 设定的不伸展 Flex-start 对齐每一行上边缘 Flex-start 对齐每一行下边缘 Baseline 基线对齐

Align-items:定义了各flex item在所在line中沿侧轴对齐的方式

Item: Order 默认0 小的靠前 Align-self 自身对齐方式 auto继承 Flex-grow:1（增长因子）抢占剩余空间 Flex-basis(主轴上item的基础大小) 强于width,height Flex:1 1 200px 增长因子缩减因子基础大小

居中布局方式： 1. 弹性盒子 container justify-content:center align-items:center 2. 普通 container absolute div relative top 50% left 50% margin-left:-1/2width margin-top:-1/2height

Autoprefixer css online (添加厂商前缀 flex-box)

Grid 网格布局跨越两行第二行clear-both 跨越两列设置宽度 Bootstrap3 grid

【本文地址】

公司简介

联系我们