float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.

        position: absolute|relative; 要配合top,left等定位;

使用:
  position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index。PS的图层效果就是position: absolute。   float也会导致元素脱离文档流,但还在文档或容器中占据位置,把文档流和其它float元素向左或向右挤,并可能导致换行。图片的文字环绕布局效果就是float。   display的inline-block不脱离文档流,将block元素当作大型字符嵌入文档流内,类似于img或者input默认效果。

CSS布局浮动和定位属性的区别的更多相关文章

  1. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  2. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  3. CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

    ---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...

  4. DIV CSS布局容易忽略的属性

    white-space:pre //保留空格,不然又多个空格值显示一个 white-space:nowrap //强制不换行,知道遇到</br> letter-spacing //字母间的 ...

  5. CSS学习笔记:定位属性position

    目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...

  6. css的浮动与定位

    显示与隐藏 标签 属性 值 效果 区别 css的style display none 元素不可见 不占页面空间 css的style visibility hidden 元素不可见 占页面空间 disp ...

  7. CSS布局(二) 盒子模型属性

    盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...

  8. CSS布局--浮动与清除

    浮动和清除 浮动和清除是页面布局的重要属性.浮动的意思是指将元素从常规的文档流中取出来. 当你浮动一个元素的时候,浮动的元素会被浏览器尽量的往上放,能放多高就放多高,一直到某个元素的边界为止. 浮动元 ...

  9. CSS的浮动和定位

    一.CSS中的浮动 1.定义和用法 float 属性定义元素在哪个方向浮动.在 CSS 中,任何元素都可以浮动.浮动会使原元素变成一个行级元素,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个 ...

随机推荐

  1. Linux 系统故障修复和修复技巧

    我发现Linux系统在启动过程中会出现一些故障,导致系统无法正常启动,我在这里写了几个应用单用户模式.GRUB命令操作.Linux救援模式的故障修复案例帮助大家了解此类问题的解决. 一.单用户模式 L ...

  2. React后台管理手动封装图片上传组件

    分为两个文件夹,index.js(逻辑文件) styled.js(样式文件) index.js文件,编写完成之后在对应的地方引入即可 import React from "react&quo ...

  3. PHP json_encode 中文不转码,低版本处理

    5.4 以上版本可以使用 JSON_UNESCAPED_UNICODE  来解决,但是低版本的,需要用其他方式 需要注意的是,encode_json参数为数组,不能为对象 function encod ...

  4. spring-第十篇之XML Schema的简化配置,p、c、util命名空间

    1.p:命名空间 引入命名空间:xmlns:p="http://www.springframework.org/schema/p" 配置举例: <?xml version=& ...

  5. Python入门习题4.文本进度条

    例4.1.设置一组文本进度条,使之运行效果如下: --------执行开始--------% 0 [->**********]%10 [*->*********]%20 [**->* ...

  6. UVA1626 括号序列 Brackets sequence(区间dp)

    题目传送门(洛谷)   题目传送门(UVA) 解题思路 很显然是一个区间dp,当然记忆化搜索完全可以AC,这里说一下区间dp. 区间dp的重要特征就是需要枚举中间节点k 看一看这道题,用f[i][j] ...

  7. [暑假集训Day4T2]卡拉赞之夜

    抹茶学长给的标程可以被卡到O(N2M2)??? 考虑二分答案+暴力check+离散化+卡常数 首先进行离散化,其实判重的话会更快,但是由于矩阵元素大小太大了,hash判重MLE,所以我就直接记录了NM ...

  8. [fw]Real Mode addressing

    Real Mode 在 real mode 中,memory 的使用被限制在 1 MByte(220 bytes) 內,可用的 address 範圍為 0x00000 ~ 0xFFFFF. 由 mem ...

  9. .ef core 多对对关系的关联方法

    最近在用.net core 重构博客,在使用ef core连表查询时,遇到了一些问题.记录一下. 关系:一个博客可以有多个标签,一个标签可以属于多个博客,博客和标签之间存在多对多的关系 下面是实体代码 ...

  10. 浏览器报406 错误:The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request "accept" headers

    The resource identified by this request is only capable of generating responses with characteristics ...