背景图片相当于:图片相当于风景,元素相当于窗口。所以要展示风景,首先必须要有窗口,就是窗口元素得有宽度、高度等
background-attachment 属性:fixed 固定背景图片,只有内容滚动/scroll (默认)
http://www.w3school.com.cn/cssref/pr_background-attachment.asp
如何让并排按钮居中呢?
两种方法:
所有元素display:inline-block,,然后父容器text-align:center;
第二种方法:一个div包裹住这个元素,这些元素本身又是浮动的,水平排列,div设置一个宽度,margin:auto
background-position:设置背景图片的起始位置:
- x y(像素单位,针对左上角做一个位置偏移;)
- x% y%
- [top|center|bottom]垂直方向+[left|center|right]水平方向
background-repeat:
- no-repeat;
- repeat-x
- repeat-y;
- repeat
background-size:拉伸图片size至固定大小
- contain:正好图片可以塞进去的尺寸
- cover:上下撑满,水平只展现一部分,当宽度变化,展现部分随之变化。
line-height:2 等于本身文本高度的2倍
line-height:200% 父容器文字高度的2倍
作业:
- text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中
text-align: center 作用于行内元素上;
能让这行内的内容水平居中。
IE 盒模型和W3C盒模型有什么区别?
IE盒模型width包括content 尺寸+padding+border;
而W3C标准中的padding、border所占的空间不在width、height范围内。
*{ box-sizing: border-box;}的作用是什么?
即为IE 盒模型,当设置了box-sizing: border-box之后,元素的border 和 padding 就不再增加content的size了。
line-height: 2和line-height: 200%有什么区别?
line-height: 2 等于本身文本高度的2倍
而line-height: 200%则是父容器文字高度的2倍
inline-block有什么特性?如何去除缝隙?高度不一样的inline-block元素如何顶端对齐?
inline-block 既有inline的特性,不占据整行,宽度由内容的宽度决定;
又有block的特性,可以设置宽高,但有缝隙问题;
去除缝隙有两种方法:第一种是直接把两个元素之间的空白字符去掉;第二种方式是把所有元素装在一个div元素中,把div元素的font-size设置为0,然后再把单个inline-block元素设置自己的font-size;
行内元素默认对齐方式是基于字体底部基线对齐的,可以vertical-align:top来实现顶端对齐。
CSS sprite 是什么?
是CSS精灵图,通过把网页需要用到的多个图标整合到一张图片上,然后通过CSS背景定位展示其中需要用到的图片部分,这样做可以减少向服务器请求此时,提升网站加载速度,减少服务器开启的线程,从而减轻服务器压力。
让一个元素"看不见"有几种方式?有什么区别?
可以设置透明度为0,opacity:0
visibility:hidden
display:none;消失,不占用位置
代码1:http://js.jirengu.com/zoda/1/edit?html,css
代码2:http://js.jirengu.com/misel/1/edit?html,css,output