CSS布局浮动和定位属性的区别
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布局浮动和定位属性的区别的更多相关文章
- 深入css布局篇(2) — 定位与浮动
深入css布局(2) - 定位与浮动 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...
- CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
---恢复内容开始--- 一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...
- DIV CSS布局容易忽略的属性
white-space:pre //保留空格,不然又多个空格值显示一个 white-space:nowrap //强制不换行,知道遇到</br> letter-spacing //字母间的 ...
- CSS学习笔记:定位属性position
目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...
- css的浮动与定位
显示与隐藏 标签 属性 值 效果 区别 css的style display none 元素不可见 不占页面空间 css的style visibility hidden 元素不可见 占页面空间 disp ...
- CSS布局(二) 盒子模型属性
盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...
- CSS布局--浮动与清除
浮动和清除 浮动和清除是页面布局的重要属性.浮动的意思是指将元素从常规的文档流中取出来. 当你浮动一个元素的时候,浮动的元素会被浏览器尽量的往上放,能放多高就放多高,一直到某个元素的边界为止. 浮动元 ...
- CSS的浮动和定位
一.CSS中的浮动 1.定义和用法 float 属性定义元素在哪个方向浮动.在 CSS 中,任何元素都可以浮动.浮动会使原元素变成一个行级元素,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个 ...
随机推荐
- 【Unity渲染】Camera RenderToCubemap 渲染到立方体纹理
Unity圣典 传送门:http://www.ceeger.com/Script/Camera/Camera.RenderToCubemap.html Camera.RenderToCubemap 有 ...
- Bootstrap 学习笔记4 巨幕页头略缩图警告框
- hdu6570Wave (暴力求解)
Problem Description Avin is studying series. A series is called "wave" if the following co ...
- 软件体系结构-分层、代理、MVC、管道与过滤器
什么是软件架构? 程序或计算系统的软件体系结构是系统的一个或多个结构,包括软件元素.这些元素的外部可见属性以及它们之间的关系. ——Software Engineering Institute(SEI ...
- SAP选择屏幕开发(二)(转)
原文链接:https://blog.csdn.net/wtxhai/article/details/90698683 1.2.SAP屏幕框架的创建 SAP页面设计中的框架不但可以保证SA ...
- python获取ip地址
#!/usr/bin/env python # -*- coding: utf-8 -*- import os import socket,fcntl,struct #crontab下shell命令无 ...
- bfs(最短路径)
链接:https://ac.nowcoder.com/acm/contest/993/F来源:牛客网 Farmer John is leaving his house promptly at 6 AM ...
- hdu1394 Minimum Inversion Number (线段树求逆序数&&思维)
题目传送门 Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K ...
- thinkphp开发微信小程序后台流程
thinkphp开发微信小程序后台流程,简单分享一下微信开发流程 1,注册微信小程序账号 2,注册好后,登陆微信小程序,下载微信小程序开发工具 3,用thinkphp开发企业后台,前台数据用json返 ...
- break和continue能否跳出函数
int func() { printf("In func, before continue.\n"); // continue; break; printf("In fu ...