HTML+CSS学习记录09--CSS的布局定位

13 篇文章 0 订阅

1、前置知识

  • 正常元素怎么布局
    -默认,⼀个块级元素的内容宽度就是其⽗元素的100%,他的⾼度和其内容⾼度⼀致

    -⾏内元素它的宽度和⾼度都是根据内容决定的(⽆法设置⾏内元素的宽⾼)
    —可设置display属性,定义元素的类型(css3定义布局)
    在这里插入图片描述
    在这里插入图片描述
    通过display设置行内元素宽高
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 元素之间⼜是如何相互影响的呢
    -正常的⽂档布局流
    —每个块级元素会在上个元素下⾯另起⼀⾏
    -⾏内元素不会另起⼀⾏

2、CSS中必须掌握的float布局

  • 使用
    float: none; //默认值,元素不浮动
    在这里插入图片描述
    在这里插入图片描述
    float: left; //元素像左浮动
    在这里插入图片描述
    在这里插入图片描述
    float: right; //元素像右浮动
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

  • 特点
    浮动元素会脱离⽂档流,不再占据⽂档流空间
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
浮动元素彼此之间是从左往右排列,宽度超过⼀⾏⾃动换⾏
在这里插入图片描述
在浮动元素前⾯元素不浮动时(有margin值,继承父级宽度为整个浏览器宽度),浮动元素⽆法上移
在这里插入图片描述
在这里插入图片描述
块级元素和⾏内元素浮动之后都变成⾏内块级元素
元素不浮动时有margin值,继承父级宽度为整个浏览器宽度。而它自己的宽度值是100px,不够,所以用浏览器的宽度来补
在这里插入图片描述
设置成浮动之后就没有margin值了,只有自己的内容宽度
在这里插入图片描述

span行级元素:
在这里插入图片描述
设置浮动变成行内块级元素:此元素不会独占一行
在这里插入图片描述
在这里插入图片描述
浮动元素不会盖住⽂字,可以设置⽂字环绕效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 清除浮动
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
如果中间蓝色盒子没有设置宽高,由里面的内容撑开,则会出现:
在这里插入图片描述
在这里插入图片描述
但是有时box2中内容宽度不确定
在这里插入图片描述
在这里插入图片描述

3、 CSS中必须掌握的flex布局

flex布局(弹性布局) CSS3知识点

  • ⽗元素容器的属性

在这里插入图片描述

/* 设为 Flex 布局以后,⼦元素的float、 clear和vertical-align属性将失效。 */

display: flex;

在这里插入图片描述

/* 决定主轴的⽅向(即项⽬的排列⽅向) */
flex-direction: row(水平排列) | row-reverse | column (垂直排列)| column-reverse;

reverse 可以理解成镜像处理
在这里插入图片描述
在这里插入图片描述

/* 是否换⾏ */
flex-wrap: nowrap(不换行) | wrap(换行) | wrap-reverse(颠倒换行,上下镜像);

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

/* 定义⽔平⽅向对⻬⽅式 */
justify-content: flex-start(初始状态) | flex-end(与初始状态颠倒--不是镜像) | center | space-between | space-around;

flex-start
在这里插入图片描述
flex-end 不是镜像
在这里插入图片描述
center
在这里插入图片描述
space-between
在这里插入图片描述
space-around
在这里插入图片描述

/* 定义垂直⽅向对⻬⽅式 */⼦元素容器的属性
align-items: flex-start | flex-end | center | baseline | stretch;

flex-start 默认样式
在这里插入图片描述
flex-end
在这里插入图片描述
center
在这里插入图片描述
baseline
在这里插入图片描述
stretch
在这里插入图片描述

/* 定义多个轴线(多⾏/多列)对⻬⽅式 */
align-content: flex-start | flex-end | center | space-between | space-around |
stretch;

对多行或者多列才会生效
在这里插入图片描述
flex-start
在这里插入图片描述
flex-end 不是镜像
在这里插入图片描述
center
在这里插入图片描述
在这里插入图片描述

- ⼦元素容器的属性

/* 定义⼦元素的排列顺序,默认为0 */
order: -10 | -1 | 0 | 1 | 10;

在这里插入图片描述

/* 定义⼦元素的放⼤⽐例,默认为0 */
flex-grow: 0 | 1 | 2 | 3;

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

/* 定义⼦元素的缩⼩⽐例,默认为1 */
flex-shrink: 0 | 1;

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

/* 定义了在分配多余空间之前,项⽬占据的主轴空间 */
flex-basis: <length> | auto;
/* flex-grow, flex-shrink 和 flex-basis的简写 */
flex: 0 1 auto;
flex:1;  // flex-grow为1,占据剩余空间
  • 兼容性
    浏览器ie9及以上
  • 选择float布局 or flex布局?
    推荐是使⽤flex布局
    flex布局易⽤,布局全⾯
    float的创建初衷只是为了达到⽂字环绕的效果,另外需要清除浮动
    现在⼏乎所有公司的产品使⽤场景都在浏览器ie9以上

4、CSS中必须掌握的position定位

  • 也是为布局引⼊的属性
  • position常⽤的⼏个值
position: static (静态定位) ⽗元素
position: relative (相对绝对) ⽗元素
position: absolute (绝对定位)
position: fixed (固定定位) ⽗元素
position: sticky (粘性定位) ⽗元素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 相关的属性
z-index //使⽤场景:当定位的盒⼦重叠在⼀起

层级越高,在视图层就越往上,滑动底层盒子时,上层不会被遮挡

5、经典的三栏布局如何实现

在这里插入图片描述

  • float实现

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
绿色部分随着浏览器宽度变化而变化
在这里插入图片描述

  • position实现
    在这里插入图片描述

  • flex实现
    在这里插入图片描述
    在这里插入图片描述

6、水平垂直居中的常用方法

行内元素不可以设置宽度和高度,所以没有水平垂直居中的说法

  • ⾏内块元素
    在这里插入图片描述
    在这里插入图片描述
  • 块级元素
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  1. position + margin 需要清楚⼦元素(蓝色box1)的宽⾼
    在这里插入图片描述
  2. position + transform 若不清楚⼦元素的宽⾼
    在这里插入图片描述
  3. flex
    在这里插入图片描述
  4. table-cell 兼容性较差
    在这里插入图片描述
    在这里插入图片描述

7、扩展⾼级知识点之BFC

  • 定义
    块格式化上下⽂(Block Formatting Context, BFC)是Web⻚⾯的可视化CSS渲染的⼀部分,是块盒⼦
    的布局过程发⽣的区域,也是浮动元素与其他元素交互的区域。
    即:形成了⼀块封闭的区域,能检测到区域内脱离⽂档流的元素

  • 特点
    CSS中隐含的属性,开启后不会被浮动的元素覆盖
    BFC元素可以包含浮动元素
    BFC元素的⼦元素和⽗元素外边距不重叠

  • 开启(都会有副作⽤)
    设置元素浮动 float: left
    设置为⾏内块元素 display: inline-block
    overflow: hidden(推荐)

  • 作⽤
    清除浮动带来的影响
    解决边距塌陷问题(外边距折叠(Margin collapsing)也只会发⽣在属于同⼀BFC的块级元素之间)

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值