css tips: 清除float影响,containing的div跟随floated sub等
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
} .cf:after {
clear: both;
} /**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom:;
}
z-index只能在被position为: aboslute, fixed, relative的元素生效
不能对一个元素既设置float,又设置positioning,因为这会产生positioning歧义。当然特别需要时也是可以同时设置这两者的。比如被float的元素本身又作为container,希望他作为子元素定位的参考点,则可以设置float:left;position:relative
默认情况下:任何元素都有默认的background属性:transparent,元素的border以内都认为是background的涵盖范围。一旦设置了brackground,它就称为背景色,可以由border,content来“覆盖”。
.background{
background-image: url(imag/background.jpg);
background-color: blue; //作为fallback
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll//默认;fixed;local:指示content是否和background一起scroll
}
background-gradient color generator: http://www.colorzilla.com/gradient-editor/
inline-block元素的上下对齐可能是一个问题,可行的办法是设置vertical-align: top
另外在使用两个inline-block A:60%,B:40%的情况下,可能会出现A+B>100%从而B被挤下来的问题,产生这个问题的原因是浏览器会将A和B之间的whitespace空白或者tab键渲染为1px左右的内容,解决方案要么A+B<100%,要么:设置B margin-right: -5px就解决了。
另外一个常见的bug是:如果网页内容不是很饱满,footer就孤零零在网页中间而不是在网页的底部,解决办法就是将main layout component设置height:100%
css tips: 清除float影响,containing的div跟随floated sub等的更多相关文章
- CSS 之 清除 float 常用的方法
大多数前端使用.clearfix:after{ .....} 和 .clearit{....}的组合来清除浮动. 前端开发经常用到浮动 float:left; float:right; 有浮动就需要 ...
- 清除float影响
条件: 父元素中有子元素float的话,可能就会影响父元素的高度,从而影响布局: 解决方案: 1.直接给父元素定高: 弊端:必须知道父元素的高: 2. 父元素使用overflow属性值为hidden解 ...
- 【转】CSS清除浮动_清除float浮动
CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...
- CSS清除浮动_清除float浮动
2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此di ...
- CSS清除float浮动
一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ...
- <转载>如何解决子级用float浮动父级div高度不能自适应的问题
转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...
- css 清除float的方法
首先我们要理解这个flaot 为什么要清除,作为小白来说直接颠覆了我之前学的内容,因为之前学的东西虽然碰到float后,脱离文档流后给兄弟元素或者父元素造成影响,但是都是通过option来定位 要么绝 ...
- 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...
随机推荐
- 换个角度看Salesforce之基础配置学习笔记(一)
1. Salesforce.com与force.com的关系: Salesforce.com is build on the force.com platform seamlessly.That is ...
- 剑指offer等算法总结归类
从数据结构分 一.链表: 3.题目描述:输入一个链表,从尾到头打印链表每个节点的值(递归) 思路:递归调用,调一次,加一次到list中 14.题目描述:输入一个链表,输出该链表中倒数第k个结点 两个指 ...
- (转)python collections模块详解
python collections模块详解 原文:http://www.cnblogs.com/dahu-daqing/p/7040490.html 1.模块简介 collections包含了一些特 ...
- C++析构函数(转)
创建对象时系统会自动调用构造函数进行初始化工作,同样,销毁对象时系统也会自动调用一个函数来进行清理工作(例如回收创建对象时消耗的各种资源),这个函数被称为析构函数. 析构函数(Destructor)也 ...
- unity 解决与永久解决行尾不一致报警
虽然不影响使用,但一堆警告信息着实让人不爽,继续往下看. 用Notepad2的“查看->显示换行编码"查看发现通过Unity3D编辑器创建的脚本文件是以"LF"结尾 ...
- springboot使用Freemarker继承
最近需要用到Freemarker的继承.但是发现没有关于springboot配置Freemarker的继承的.所以趁现在有时间写个博客. 1. Freemarker继承介绍 Freemarker 通过 ...
- javascript进行base64加密,解密
function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqr ...
- Echarts 修改折线的颜色和折线的点的大小方法
series: [{ type: 'line', smooth:true,//折点是圆弧状的 showSymbol: true, ...
- IDEA创建一个Spring MVC 框架Java Web项目,Gradle构建
注:此篇有些细节没写出,此文主要写重要的环节和需要注意的地方,轻喷 新建项目 选择Gradle , 勾选java 和 web.之后就是设定项目路径和名称,这里就不啰嗦了. build.gradle文件 ...
- IE11 F12 开发人员工具 查看 Cookie
参考网址:Using the F12 developer tools in IE11 Step1 : IE11 => F12 打开 开发人员工具 Step2:开发人员工具 => 网络F5 ...