发表于: 2016-03-30 21:27:25
2 1828
http://kkkchen.github.io/
今天完成的事情:
1 完成了视差效果的新主页;
2 在看精通css;
3 修改了一下task5-2;
明天计划的事情:
1 开始task6
遇到的问题:
1 什么是栅格?
答:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布,通常分成12等分或者24等分;
2 什么是补差等高法(正内负外补丁)?
答:先将padding-bottom:10000px,再margin-bottom:-10000px,再将他们的父元素设为overflow:hidden即可;
3 偶尔看到css属性里有写成这样的属性: *display,什么作用?
答:这是为了兼容ie6和ie7,*代表是专给ie6/7写的;
4 当子元素的line-height大于父元素的height时?
答:会超出父元素,并将同行字体带走;
收获:
1 HTML 标签的嵌套规则:
a. 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素;
b. 块级元素不能放在<p>里面:
c. 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:
h1、h2、h3、h4、h5、h6、p、dt
d. 块级元素与块级元素并列、内嵌元素与内嵌元素并列;
2 注意,line-height使用相对单位,百分比时,其子元素继承的是父元素计算值;
3 要实现高度不固定的文字垂直居中使用padding就好了;
4 css sprite
一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等DIVCSS布局。
优缺点:
优点:利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能;
缺点:
1 通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;
2 要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;
3 维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。
评论