css定位问题的记录
postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。
float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。
二者之中最大的差别就是位置保留。
包裹性
包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度。哦,举个例子吧,如下测试代码:
.div { padding:20px; margin-bottom:10px; background-color:#f0f3f9; }
.abs { position:absolute; }
html:
<div class="div">
<img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
<p>无absolute</p>
</div>
<div class="div abs">
<img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
<p>absolute后</p>
</div>
结果
css定位问题的记录的更多相关文章
- 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类: HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏
引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...
- CSS样式设置记录
在不懂php和wordpress的情况下,需要按照样式内容用php+wordpress+mysql做个网站,网页上有许多样式需要设置,包括颜色字体等要跟要求一致,记录下今天的结果. <div i ...
- html+css+javascript学习记录1
<p> 最近在学一部分前端,知识点很多,却没怎么系统地应用过,因而理解可能不够深吧.所以我想做点片段似的东西,不懂的再在网上搜一搜,这样可能会更有意思点,所以做了这个记录,希望自己坚持下去 ...
- js,css小知识点记录
JS手册中提到:可以使用任意表达式作比较表达式.任何值为0.null.未定义或空字符串的表达式被解释为 false.其他任意值的表达式解释为 true.也就是说,这里会隐式的转换为布尔值. ...
- html css js 一些记录.
webstorm 的基本使用 webstorm 格式化 html 代码: Ctrl+Alt+L js html css 基本使用 注意 dom 的 innerHTML会刷新dom,所以里面包含的事件绑 ...
- 初识html、css时随笔记录
css部分样式 圆框效果:border-radius:5px; 固定样式:position:fixed;悬浮窗在IE6中position:absolute其余浏览器可以用fixed: 使table中的 ...
- CSS概念【记录】
1.CSS语法 2.@规则 3.注释 4.层叠 5.优先级 6.继承 7.值 8.块格式化上下文 9.盒模型 10.层叠上下文 11.可替换元素 12.外边距合并 13.包含块 14.视觉格式化模型 ...
- CSS选择器【记录】
1.基本选择器 2.组合选择器 3.伪类选择器 4.伪元素选择器 CSS选择器规定了CSS规则会应用到哪些元素上 1.基本选择器 基本选择器:通配选择器.元素选择器.类选择器.ID选择器.属性选择器 ...
- IE CSS Hack【记录】
1.条件hack 2.属性hack 3.选择器hack CSS Hack一般都是利用各浏览器的支持CSS的能力和BUG来进行的 本文只列举了一些常用的CSS Hack,且不考虑IE6以下的版本 尽可能 ...
随机推荐
- Android-bindService本地服务-初步-Service返回对象
在Android开发过程中,Android API 已经有了startService方式,为什么还需要bindService呢? 答:是因为bindService可以实现Activity-->S ...
- Javascript Promises 介绍
什么是 Promises Promises是一种关于异步编程的规范,目的是将异步处理对象和处理规则进行规范化,为异步编程提供统一接口. 传统的回调函数 说到JavaScript的异步编程处理,通常 ...
- 使用Intellij Idea连接Team Foundation Server (TFS)实现代码版本管理
Intellij Idea是一个Java项目开发工具,支持Windows,MAC OS和Linux的跨平台开发环境,具备良好和智能的用户界面,在欧洲市场拥有很多粉丝.https://www.jetbr ...
- easyui datagrid fit 属性
fit:true - 自适应大小,填充容器 fitColumns:true - 自动使列适应表格宽度以防止出现水平滚动.
- ajax +LoadLayer插件实现访问页面跳转loading..
布局页:第一步进行扩展ajax$(function () { $.ajax2 = function (options) {//遮罩 Mask();//jquery 原生ajax $.ajax(opti ...
- java初级易错问题总结
1.什么是变量?变量的定义格式?要使用变量需要注意什么?就是可变的量数据类型 变量名 = 数值;同一范围内不能重复定义不赋值不能使用 2.Java中的数据类型分几类?基本数据类型有哪些?两大类 ...
- P4211[BZOJ 3626] [LNOI2014]LCA
题目描述 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1. 设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先. 有q次询问,每 ...
- 基于scrapy-redis两种形式的分布式爬虫
redis分布式部署 1.scrapy框架是否可以自己实现分布式? - 不可以.原因有二. 其一:因为多台机器上部署的scrapy会各自拥有各自的调度器,这样就使得多台机器无法分配start_urls ...
- Java Web 学习与总结(三)会话跟踪
何为会话跟踪?举个简单的例子,比如登陆到某购物网站后,在一定时间内无论你在这个网站中切换到任意的网页,只要不执行退出操作,一直保持着你账号的登录状态. 那么在Java Web中我们应当如何去实现这一操 ...
- CVE-2017-11882漏洞复现
作者:zero 漏洞信息:CVE-2017-11882 2017年11月14日,微软发布了11月份的安全补丁更新,其中比较引人关注的莫过于悄然修复了潜伏17年之久的Office远程代码执行漏洞(CVE ...