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之后,没有设置宽度的话,元素的宽度会随内容的变化而变化,并不影响前面和其相邻的元素,影响后面紧邻他的元素以及父元素,会从父元素中跳出来

清楚浮动:overflowhidden;或者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

 

 

 

 

你可能感兴趣的:(css复习重点)