CSS学习和总结

发布时间：2022-09-29 08:55:26 作者：佚名

本文是小编日常整理了关于css学习和总结相关知识，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧

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的形态（块级形态）
1.根元素(html元素)
2.float不为none的元素(包括left,right,inherit三个，因为float只有四个值)
3.position为absolute或fixed
4.display为inline-block,table-cell,table-caption,flex,inline-flex
5.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属性会让元素获得布局。
1.float: left/right
2.display: inline-block
3.width/height
4.zoom: 任何值（只有IE）
IE7中以下属性也触发布局(下面三个属性只有IE7+才支持)
1.overflow: hidden/scroll/auto
2.min-width: 任何值
3.max-width: 除none之外的任何值
4.条件注释
•lt <
•lte <=
•gt >
•gte >=
条件注释写法如下，这里的是XHTML写法，所以后面会以/>结尾，HTML5写法最好是没有反斜杠

复制代码

代码如下:

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：通常是代码有添加注释的情况
解决方法
1.运用负外边距
2.清除注释
5.4 IE6的“躲猫猫”bug
当一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来像消失了，只有在刷新页面的时候才出现。
解决方法
1.去掉父元素上的背景颜色或图像
2.避免清理元素与浮动元素接触
3.容器指定行高
4.将浮动元素和容器元素的position属性设置为relative

Tag：css总结

简要总结CSS编程中的响应式设计
这篇文章主要介绍了CSS编程中的响应式设计,是CSS入门学习中的基础知识,需要的朋友可以参考下
2015-08-03
CSS的一些编程规范总结
这篇文章主要介绍了CSS的一些编程规范总结,文中所列基本上得到多数开发者的共识,树立统一规范有助于debug等工作的进行,因而强烈推荐此文!需要的朋友可以参考下
2015-07-09
10个必备的CSS技巧总结
这篇文章主要介绍了10个必备的CSS技巧总结,随看随记,敬请收藏~需要的朋友可以参考下
2015-06-29
CSS清除浮动方法总结
在阿里云首页看到很多div都有加上:before和:after的属性.但是大都只是做了类似的如下处理,请问这样的意义是什么呢?研究了一番，原来是清除浮动用的，下面来总结下清除浮动
2014-06-17
css 调试方法与经验总结
主要记录本人调试过程中所终结的经验与方法，css关系到界面的美观，有时候功能实现了。界面确丑到没人用，终归还是一件失败的产品
2014-06-15
CSS多浏览器兼容总结(个人经验)
多浏览器兼容一直都是前端开发者需要考虑的重要问题之一，由于一直困扰着大家，因此本文整理了一些个人的实战经验与大家分享下，看过之后感觉不错的可以收藏哦
2013-10-30
CSS样式的基础学习总结
进行css布局的同时，没有足够的基础知识是不可能的，本文为初学者整理了一些，经常使用的css属性，感兴趣的朋友可以参考下，或许有所帮助
2013-10-05
深入CSS3 动画效果的总结详解
本篇文章是对,CSS3中的动画效果进行了详细的分析介绍。需要的朋友参考下
2013-05-09
IE下css常见问题总结及解决
本文整理了ie中div的垂直居中问题、margin加倍的问题、ie6下页面min-width/height与max-width/height问题、ie6 3px bug及ie6捉迷藏的问题等等，感兴趣的朋友可以参考下哈
2013-04-01
CSS(Cascading Style Sheet)级联样式表常用术语总结
CSS（Cascading Style Sheet ）级联样式表总结,如果使用CSS不要忘记写DOCTYPE等文档类型定义,接下来详细为您介绍，需要了解的朋友可以参考下
2013-01-03

CSS学习和总结

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容