HTML详解连载(8)
- 专栏链接 [link](http://t.csdn.cn/xF0H3)
- 下面进行专栏介绍
- 开始喽
- 浮动-产品区域布局
- 场景
- 解决方法
- 清除浮动
- 方法一:额外标签发
- 方法二:单伪元素法
- 方法三:双伪元素法
- 方法四:overflow
- 浮动-总结
- 特点
- 清除浮动
- 拓展
- Flex-认识
- Flex-组成
- 组成部分:
- 主轴:默认在水平方向
- 侧轴/交叉轴:默认在垂直方向
- Flex布局
- 属性名
- 属性值
- 侧轴对齐方式
- 属性名
- 属性值
- 修改主轴方向
- 属性名
- 属性值
- 弹性伸缩比
- 作用
- 属性名
- 属性值
- 弹性盒子换行
- 属性名
- 属性值
- 行对齐方式
- 属性名
- 属性值
- 注意
专栏链接 link
下面进行专栏介绍
本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记
进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。
开始喽
浮动-产品区域布局
清除浮动
场景
浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度
解决方法
清除浮动(带来的影响)
清除浮动
方法一:额外标签发
在父元素内容的最后添加一个块级元素,设置CSS属性clear:both
方法二:单伪元素法
.clearfix::after {
content:””;
display:block;
clear:both;
}
方法三:双伪元素法
.clearfix::before,.clearfix::after {content: "";display: table;}.clearfix::after {clear: both;}
方法四:overflow
父元素添加CSS属性 overflow:hidden
浮动-总结
浮动属性float,left表示左浮动,right表示右浮动
特点
浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
父级宽度不够,浮动的子级会换行
浮动后的盒子脱标
清除浮动
子级浮动,父级没有高度,子级无法撑开父级高度,影响布局效果
双伪元素法
拓展
浮动本质作用是实现图文混排效果
Flex-认识
flex布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。
flex模型不会产生浮动布局中脱标现象,布局网页更简单,更灵活
Flex-组成
设置方式:给父元素设置display:flex,子元素可以自动挤压或拉伸
组成部分:
弹性容器
弹性盒子
主轴:默认在水平方向
侧轴/交叉轴:默认在垂直方向
flex——沿着主轴方向排列
Flex布局
属性名
justify-content
属性值
属性 | 效果 |
---|---|
flex-start | 默认值,弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从终点开始依次排列 |
center | 弹性盒子沿主轴居中排列 |
space-between | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子之间 |
space-around | 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧 |
space-evenly | 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等 |
侧轴对齐方式
属性名
属性 | 效果 |
---|---|
align-items | 当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置) |
align-self | 单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置) |
属性值
属性 | 效果 |
---|---|
stretch | 弹性盒子沿着侧轴线被拉甚至铺满容器(弹性盒子没有设置侧轴方向尺寸 则默认拉伸) |
center | 弹性盒子沿侧轴居中排列 |
flex-start | 弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从终点开始依次排列 |
修改主轴方向
主轴默认在水平方向,侧轴默认在垂直方向
属性名
flex-direction
属性值
属性 | 效果 |
---|---|
row | 水平方向,从左向右(默认) |
column | 垂直方向,从上到下 |
row-reverse | 水平方向,从右向左 |
column-reverse | 垂直方向,从下到上 |
弹性伸缩比
作用
控制弹性盒子的主轴方向的尺寸
属性名
flex
属性值
整数数字,表示占用父级剩余尺寸的份数
弹性盒子换行
弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示
属性名
flex-wrap
属性值
属性 | 效果 |
---|---|
wrap | 黄行 |
nowrap | 不换行(默认) |
行对齐方式
属性名
align-content
属性值
属性 | 效果 |
---|---|
flex-start | 默认值,弹性盒子从起点开始依次排列 |
flex-end | 弹性盒子从终点开始依次排列 |
center | 弹性盒子沿主轴剧中排列 |
space-between | 弹性盒子沿主轴均匀排列,空白间距均匀分布在弹性盒子之间 |
space-around | 弹性盒子沿主轴均匀排列,空白间距均匀分布在弹性盒子两侧 |
space-evenly | 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等 |
注意
行对其方式堆单行弹性盒子不生效