css复习重点

 css复习要点

 

1.float浮动塌陷

父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零

解决“塌陷”问题有以下三个方法

1.在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div

2.在使用float元素的父元素添加overflow:hidden;

3 .使用after伪对象清除浮动

详细可以看这个网址：http://blog.haohtml.com/archives/8125

 

2.transform/transition

http://blog.iwege.com/posts/the-different-between-transform-transition-animation.html

http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms-animation-introduction/

 

3.css性能优化

http://www.cnblogs.com/dolphinX/p/3508657.html

https://www.ibm.com/developerworks/cn/web/1109_zhouxiang_optcss/

 

4.图片缩放/占格、

实现图片的等比例缩放

http://www.topcss.org/?p=526

 

5.margin垂直合并

margin垂直合并的简单介绍：http://www.w3school.com.cn/css/css_margin_collapsing.asp

解决办法：http://blog.sina.com.cn/s/blog_601b97ee0101b94c.html

 

6.flex

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

 

7.垂直居中

常用的css技巧：

http://www.ruanyifeng.com/blog/2010/03/css_cookbook.html

 

8.media query

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

http://www.w3cplus.com/content/css3-media-queries

 

9.盒子模型

http://www.cnblogs.com/hh54188/archive/2010/12/28/1919078.html

网页可以自适应宽度

高度没有限制

一般使用混合布局

 

 

一列布局不适合存放文本 宽度过长容易看走眼，

通常作为网站首页，一般都是固定宽度高度设为自动的

 

两列布局：做到宽度自适应使用百分比；

 

 

三列布局：左右固定宽度，中间不定义，

left{width:200px; height:500px; position:absolute;left :0;top :0;}

right{width:200px; height:500px;position:absolute;right :0;top :0;}

middle{height:500px; margin:0 200px  200px;}

 

css的三种定位机制：标准文档流，浮动，绝对定位

标准文档刘：特点：从上到下，从左到右，输出文档内容

由块级元素及内联元素组成

块及元素和行级元素都是盒子模型

盒子模型：边框，内边距，外边距，内容

盒子模型的三维立体结构：从上到下分别为：border，内容以及内边距，背景图片，背景颜色，外边距

 

auto:自动设置元素的外边距，用于居中，算法是浏览器总宽度-已经设定的元素块宽度之后除以二

当想让页面居中的时候，一旦margin设置了居中，就不能在使用浮动属性以及绝对定位属性

 

 

float:元素会左移或者右移，直到碰见容器为止，仍然处于标准文档刘当中，当元素设置了float之后，没有设置宽度的话，元素的宽度会随内容的变化而变化，并不影响前面和其相邻的元素，影响后面紧邻他的元素以及父元素，会从父元素中跳出来

清楚浮动：overflow：hidden；或者clear:both;

 

10.inline-block/float的区别

http://www.w3cplus.com/css/inline-blocks.html

 

11.定位问题

float   position

http://www.cnblogs.com/coffeedeveloper/p/3145790.html

http://www.cnblogs.com/dolphinX/archive/2012/10/13/2722501.html