CSS总结
2016-01-20 14:14
627 查看
1.清除浮动
老生常谈的话题,面试经常问的问题解决方法有很多种,这里讲几种
1.1 子元素加clear
<div class="news"> <p>Some Text</p> <br class="clear"> </div>
.news{ background: gray; border: solid 1px black; } .news p{ float: right; } .clear{ clear: both; }
这种方法可以扩展出很多种不同的方法,如JS动态添加,设置一个公共的类然后添加,或者直接就是一段内联style的html代码,但是原理都是用到了
clear这个属性
1.2 父元素BFC化
HTML文档流是盒子模型的,BFC就是组织盒子模型的形式,当元素的类型如标签(p和span)不一样的时候,其表现出来的样子是不一样的。所以BFC就是让这个元素看起来像盒子的一种代称,BFC全称 Box Formatting Context。CSS2.1还有IFC,即Inline Formatting Context。
BFC布局规则:
内部的Box会在垂直方向,一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
计算BFC的高度时,浮动元素也参与计算
产生BFC的条件:当然普通的块级元素默认呈现块级的样子,但是通过CSS我们可以可以让某些元素呈现BFC的形态(块级形态)
根元素(html元素)
float不为none的元素(包括left,right,inherit三个,因为float只有四个值)
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inline-flex
overflow不为visible(包括hidden,scroll,auto,inherit四个值)
如下面的为在父元素加
float属性使其BFC化
<div class="news"> <p>Some Text</p> <br class="clear"> </div>
.news{ background: gray; border: solid 1px black; } .news p{ float: right; } .clear{ clear: both; }
2.透明度
2.1 opacity
熟悉CSS3的应该很清楚,不就是opacity嘛。但是在那个没有支持opacity的年代又是怎么做的呢。opacity属性设置元素的不透明级别。不会被继承,值为0.0(完全透明)到1.0(完全不透明)。
不会继承父元素的属性,但是可以设置
inherit来继承父元素的值
p{ opacity: 0.5; filter: alpha(opacity=50); /*IE*/ color: #000; }
2.2 RGBA
RGB扩展透明度的一种格式,a代表alpha透明度。p{ background-color: rgba(0,0,0,0.8); color: #fff; }
2.3 PNG图片的问题
png图片的最大优势是支持alpha透明度,但是IE6不直接支持PNG透明度,PNG透明度自IE7才支持。好的是现在已经逐渐淘汰了IE6,
3.拥有布局的问题
默认拥有布局的元素:body/html
table/tr/td
img
hr
input/select/textarea/button
iframe/embed/object/applet/marquee
所以其实
div和
span是没有布局的。
设置以下CSS属性会让元素获得布局。
float: left/right
display: inline-block
width/height
zoom: 任何值(只有IE)
IE7中以下属性也触发布局(下面三个属性只有IE7+才支持)
overflow: hidden/scroll/auto
min-width: 任何值
max-width: 除none之外的任何值
4.条件注释
lt <lte <=
gt >
gte >=
条件注释写法如下,这里的是XHTML写法,所以后面会以
/>结尾,HTML5写法最好是没有反斜杠
<!-- [if IE 6]> <link rel="stylesheet" type="text/css" href="/css/ie6.css" /> <![endif]--> <!-- [if !IE 6]> <link rel="stylesheet" type="text/css" href="/css/ie6.css" /> <![endif]--> <!-- [if gte IE 6]> <link rel="stylesheet" type="text/css" href="/css/ie6.css" /> <![endif]-->
5.IE常见的BUG及其解决方法
下面这些BUG都是很有代表性的,在我做的项目中下面的bug基本都遇到了。-_-!!这运气真不是一般好。当然现在说起IE6兼容很多人可能会嗤之以鼻,但是我觉得在天朝大国这个连学校都在用着XP的地方,身为一名合格的前端,IE6兼容必须要过关。
5.1 双外边距浮动BUG
在元素有外边距且浮动的时候div.someone{ float: left; margin-left: 20px; }
解决方法
对
float的元素设置
display:inline
div.someone{ float: left; margin-left: 20px; display: inline; }
5.2 3像素文本偏移bug
当文本与一个浮动元素相邻时这个bug有可能出现div.myFloat{ float: left; width:200px; } p{ margin-left:200px; }
解决方法(IE6以上)
p{ height: 1%; /*拥有布局*/ margin-left: 0; } .myFloat{ margin-left: -3px; /*重要的一句,等于左边的浮动元素的宽度缩小了3px*/ }
5.3 IE6的重复字符bug
当一系列浮动元素排列在一排,如果最后的元素重复出现则是这个bug。ps:通常是代码有添加注释的情况
解决方法
运用负外边距
清除注释
5.4 IE6的“躲猫猫”bug
当一个浮动元素后面跟着一些非浮动元素,然后是一个清理元素,所有这些元素包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素,那么中间的非浮动元素看起来像消失了,只有在刷新页面的时候才出现。解决方法
去掉父元素上的背景颜色或图像
避免清理元素与浮动元素接触
容器指定行高
将浮动元素和容器元素的position属性设置为relative
相关文章推荐
- CSS选择器
- CSS3 新属性
- css三角原理
- IOS 设置导航栏全局样式
- 自定义样式 实现文件控件input[type='file']
- html定义input type=file 样式的方法
- CSS基础:text-overflow:ellipsis溢出文本的显示样式
- :nth-child(css3的伪类选择器)
- css段落首行缩进,文字间距
- 终于搞懂了CSS实现三角形图标的原理
- css3动画简介以及动画库animate.css的使用
- 利用css中的em实现弹性页面布局
- Css中的px em rem区别
- 页面加载顺序及解析流程分享
- css全局样式覆盖默认的样式
- coocsstudio使用经验,导出资源
- lc_switch插件实现苹果IOS风格单复选框样式按钮
- CSS3中的rem值与px之间的换算
- CSS3网格布局基础知识 - 弹性尺寸的定义单位:fr 简介及实例
- CSS(Cascading Style Shee)