浮动与定位（笔记）

已于 2024-09-02 09:45:07 修改
阅读量953 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： html+css 文章标签： css html
于 2021-12-23 12:57:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_60547084/article/details/122104558

文章目录

浮动

1. CSS布局的三种机制

  • 普通流
    • 块级元素
    • 行内元素
  • 浮动
  • 定位

2. 什么是浮动

  • 浮动的元素会脱离标准流
  • 浮动的元素不会撑开父盒子的高度
  • 浮动的元素一行可以摆放多个，摆放不下会换行

3. 浮动排列

  • 左浮动的盒子靠上靠左排列
  • 右浮动的盒子考上靠右排列
  • 浮动盒子在包含块中排列时，会避开常规流块盒(浮动会飞，但是能看见地下的)
  • 常规流块盒在排列时，无视浮动盒子(块盒在地下，但是看不见会飞的)
  • 行盒在排列时，会避开浮动盒子(文字环绕)
  • 外边距合并不会发生

如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。

4. 高度塌陷

  • 给父盒子设置高度
  • 使用overflow: hidden;
  • 清除浮动
    • 在盒子后面放一个div，这个div设置 clear: both;属性
    • 给高度塌陷的父盒子添加一个伪元素，设置clear: both;属性，伪元素要设置块盒

5. visibility

CSS属性 visibility 显示或隐藏元素而不更改文档的布局

  • visible：默认的
  • hidden：隐藏元素，只是隐藏不会删除
  • collapse：用于table的话是直接删除，相当于display: none; 其他的不是

6. BFC 块级格式化上下文

  • 根元素<html>

  • 浮动元素（元素的 float不是 none）

  • 绝对定位元素（元素的 position为 absolute 或 fixed）

  • 行内块元素（元素的 display 为 inline-block）

  • 表格单元格

  • 表格标题

  • 匿名表格单元格元素

  • overflow不为 visible 的块元素

  • display值为 flow-root 的元素

  • contain 值为 layout、content 或 paint 的元素

  • 弹性元素display为 flex

  • 网格元素display 为 grid

    MDN BFC 上面很详细

定位

1. 定位的属性及特征

  • 静态定位：static

    • 默认的没有特征

  • 相位定位：relative

    • 不会影响页面的布局
    • 设备边偏移是根据自己本身的位置来设置，设置之后保留之前的位置，也不会影响其他元素
    • 会保留原先的位置

  • 绝对定位：absolute

    • 脱离常规流，并且在浮动之上(之上指Z轴)
    • 子绝父相，根据父元素有没有相对定位(除了静态定位的其他定位元素也可以)，一直向上层找看是否有定位元素，如果没有就根据浏览器视口设置边偏移
    • 一般绝对定位的父级为相对定位，根据父级设置边偏移(给第二条概括)
    • 不会保留原先的位置

  • 固定定位：fixed

    • 根据浏览器视口进行设置偏移量
    • 会固定在视口，不管滚轮怎么滚动我就是不改变位置
    • 不会保留原先的位置
    • 如果当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，偏移量由视口改为该祖先。

  • 粘性定位：sticky

    • 和固定定位的特征相似
    • 固定定位是固定在浏览器视口，粘性定位是固定在父元素
    • top、left、right、bottom，必须要设置一个才有效果
    • 但是这四个属性的偏移量还是根据浏览器视口设置的，并且不会溢出父元素
    • 测试中只有top和left有效果，具体原因还不知道
    • 会保留原先的位置

2. 定位元素水平垂直居中

  • 在设置宽高的情况下，top、left、right、bottom都为0，margin为auto，就可以居中
  • 如果没有宽高，固定和绝对定位会撑满父级元素

3. 层叠上下文

  • 创建层叠上下文的元素的背景和边框
  • 层叠级别 z-index 为负值的层叠上下文
  • 常规流非定位的块盒
  • 非定位的浮动盒子
  • 常规流非定位行盒
  • 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的层叠上下文
  • 层叠级别 z-index 为正值的层叠上下文

4. display

浮动和定位默认把元素转换为 display: block

css笔记4： CSS 的布局的三种机制（标准流、浮动、定位）之浮动
小黄呀呀呀的博客
04-29 269
1. 浮动(float) 目标 记忆 能够说出 CSS 的布局的三种机制 理解 能够说出普通流在布局中的特点 能够说出我们为什么用浮动 能够说出我们为什么要清除浮动 应用 能够利用浮动完成导航栏案例 能够清除浮动 能够使用PS切图工具 1.1 CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通...
css：transform的3D变换属性
YangLu888
04-10 1108
css:transform的3D变换
CSS学习笔记 04、浮动与定位
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
05-06 990
文章目录前言一、浮动1.1.1、浮动的基本概念1.1.2、浮动的顺序贴靠特性1.1.3、右浮动效果1.1.4、案例：使用浮动设计网页布局(分析及源码)1.1.5、BFC规范与浏览器差异认识overflow属性介绍overflow属性介绍hiddle值认识BFC原则(包含没有形成该原则案例)解决盒子没有形成BFC情况(4种)BFC的其他作用(解决另外两个问题：①margin塌陷；②元素浮动覆盖)浏览器差异1.1.6、清除浮动没有实现BFC规范带来的浮动问题其他四种解决方案(非div设置height)方式一：给
transform定位
zhanglongdream的博客
07-20 1513
以前我们使用居中的时候都是使用 margin-top 和margin-bottom 这种当我们给宽度和高度定死的时候是能用的例如： width:100px; height:100px; 但是如果宽高是百分比呢？ 所以这里我推荐使用transform当我们的宽高不知道的时候我们就能使用它 .center{ position: absolute;
css transform定位,css transform（）弹出窗口问题的中心定位
weixin_29348211的博客
08-03 383
HTMLSome headerSome bunch of content etcCSS.__holder {position: fixed;z-index: 15000;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.5);}.__box {position: abso...
使用transform使定位元素居中
神膘护体小月半的博客
11-16 1万+
1.1水平居中 下面举一个例子，父元素里面有一个子元素。 子元素相对于父元素定位时，如果不写left和top，默认定位在父元素的左上角。 子元素加上left:50%之后，此时的50%是指父元素宽度的50%，也就是100px，也就是子元素以它自己的左边为基准，平移了100px的距离。 因为是以子元素的左边为基准，不算是完全的水平居中，需要再让子元素向左平移一丢丢(子元素宽度一半的距离)。如果前期不知道子元素的宽度，就可以用transform的translate属性了。transfo..
【CSS3定位、变形transform、文字居中、区块元素居中】06
mango660的博客
11-24 3448
文章目录22. 定位22.1 相对定位22.2 绝对定位22.3 粘性定位23. 变形24. 居中 22. 定位 position_MDN static：无定位(默认值) 元素出现在正常的流中(忽略偏移值样式：top, bottom, left, right 和层级样式：z-index样式) 按照文档的流式(flow)定位，将元素放到一个合适的地方。流式定位能很好的自适应各种布局，取得相对较好的布局效果 inherit：继承父元素的定位方式 22.1 相对定位 relative：相对定位 仍然
请和我分享一些有关html的浮动和定位的笔记
05-12
下面是一些有关浮动和定位的笔记： 浮动（float）： - 浮动的元素会脱离文档流，并且可以向左或向右浮动。 - 浮动元素会导致其父元素高度塌陷，需要清除浮动（clearfix）来避免这种情况。 - 浮动的元素可以通过...
css基础笔记十五, css布局样式大全.详细篇 包含浮动,定位,弹性盒子,栅格,网格等布局方式
qq_55006020的博客
07-09 1527
html+css布局汇总 .不使用框架的情况下.有传统布局方案,浮动布局方案,定位布局方案,弹性和值布局方案,栅格系统布局方案,网格布局方案使用
CSS样式技巧：浮动与定位实现容器居右
在CSS中，将一个容器元素居右有多种方法，其中最常见的两种是通过浮动和定位。首先，我们可以使用浮动方式，设置元素的`float`属性为`right`，例如： ```css .peotry-box { float: right; } ``` 这种方法会使元素...
实例讲解CSS3中Transform的perspective属性的用法
09-24
主要介绍了CSS3中Transform的perspective属性的用法,文中详细讲解了使用perspective属性对图片进行3D变换的操作,需要的朋友可以参考下
CSS【详解】变换 transform（含位移 translate，缩放/翻转 scale，旋转 rotate，CSS 的角度单位，斜切skew，透视 perspective，变换类型和原点等）
最新发布
朝阳39的博客
07-10 3668
变换是缩放、位移、旋转、透视、斜切等的总称。
transform: perspective 和 perspective 的区别
热门推荐
worm_IT的博客
05-19 1万+
transform：perspective 和 perspective的区别   我们平时给元素设置视距，增加其3D效果。但是给父元素设置perspective属性和给自身直接设置transform：perspective属性有时候效果一样，有时候效果差别却很大。下面我根据自己的经验来浅谈一下自己的认识。  如果页面中只有一个元素的时候，给父元素加perspective：800px；（此处设置的值...
css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin
zyz00000000的博客
09-30 8090
1. transform-style：preserve-3d，该属性设置在父级元素中，它的子级元素具有3d效果 注意：设置了该属性，就不能防止子级元素溢出，即不能设置overf：hidden属性；如果设置了overflow：hidden，那么transform-style：preserve-3d就无效。 2. transform：perspective；景深，观察者到物体的距离；单位：px，比...
Transform-style和Perspective属性
mychirs的专栏
09-25 1289
在《CSS3 Transform——transform-origin》一文中主要介绍了CSS3 Transform属性中的transform-origin属性的使用，其实在transform属性中，transform-origin属性仅是其中之一，要彻底理解transform属性，这是不够的，必须的理解其他属性的应用。今天将和大家一起探讨transform中transform-style和pers
transform的perspective属性
linggty的博客
10-10 584
CSS3 Transform的perspective属性 以下两行语句有什么区别？Css <div id=”animateTest” style=”-webkit-transform: perspective(400px) rotateY(40deg);”> Css <div id=”animateTest” style=”-webkit-t
backdrop-filter,让你的网站熠熠生”毛’
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
05-13 8538
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！ 原文链接 ==>http://sylblog.xin/archives/42 前言 不知道大家有没有经常看到这种设计。 这种效果我们称之为毛玻璃效果。相信使用苹果的同学会很熟悉这种设计。 backdrop-filter 可以说是 CSS 中为毛玻璃量身定制的一.
CSS 3D transform 之 perspective 属性
weixin_30872867的博客
08-08 332
perspective的中文意思是：透视，视角！ perspective属性的是否存在 决定了你所看到的是2次元的还是3次元的。 perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 这里就有坑了！ 比如，当你的元素有动画属性tran...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值