背景
- background-position
-x y 把背景图片向右向下移动的像素
-x% y%
-[]
-bcc-attachment
背景图片不根据页面的部分滚动
-bcc-size
设置背景的大小
-
bc-repeat
-
no-repeat:没有重复的背景图片
-
repeat-x:图片会横向的重复
-
repeat-y:图片会纵向的重复
-
repeat：图片会一直重复
-
bc-size
-
contain
把背景图片正好包裹起来，而背景图片进行等比的缩放。 -
cover
上下撑满 左右不成忙
-
100px 100px;
-
200px 长宽的最大值为200px
-
-
bc缩写
bc:#f00 url(background.pdf) no-repeat fixed 0 0;
css Sprit（雪碧图，精灵图）
- 将不同的图片或者图标
- 网络请求太多了，需要进行合并
隐藏or 透明
- opacity:0;
- visibility: hidden; 让这个元素看不见
- display:noen 消失，不占用位置
- bcc:rgba(0,0,0,0.2)只是背景色透明。
inline-block
缝隙问题
-
存在空白字符使得空白的
-
vertical-aligin
1.使得行内元素对于顶内对齐
2.使得行内元素对于底线对齐
line-height
-
line-heght:2
-
line-heght:100%;
-
height line-height垂直居中文本
-
line-height:2
是本身的2倍； -
line-height:200%
默认字体的2倍
height=line-height
用来垂直当前文本
盒模型
标准盒模型
- width=contne;
ie模型
- width=bordeg+padding+content
###box-sizing
- box-sizing: content-box;
- box-sizing:border-box IE盒模型
text-shadow
- h-shadow v-shadow blur color
- 水平阴影 垂直阴影 模糊距离 color
-字体图标的原理与使用
ICON的实现方式
1.需求
2.images
3.CSS Sptrits
需求
css转义unicode直接加’’.
SVG
1.合成SVG
##IE 盒模型和W3C盒模型有什么区别?
- IE 模型的width=border+padding+content
- W3C盒模型的width=content
CSS 的属性box-sizing有什么值？分别有什么作用?
- border-box 定义为IE盒模型
- content-box 定义为标准盒模型
line-height: 2和line-height: 200%有什么区别?
- line-height：2 对应的是本身字体的两倍
- line-height:200%对应的是默认字体的两倍
inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐
-
具有行内元素的特性
-
可以设置width和height
-
通过设置父元素的font-size为0，然后再设置自己的font-size回复字体的大小
-
把两个标签连在一起不留空隙
-
设置vertical-algin为top
CSS sprite （雪碧图/精灵图）是什么? 动手实现写一个使用图片sprite实现 icon 的Demo
- css精灵图是一种把多个小图片到一个图片上的性能优化技术，在渲染一个页面时他可以通过减少网络请求来避免拥堵。
- demo
让一个元素"看不见"有几种方式？有什么区别?
- opacity:0 让元素看不见(包括整个内容)
- visibility: hidden; 让这个元素看不见 与opacity：0几乎相同
- display:none 让这个元素消失 会从页面上彻底消失
- background-color:regba(0, 0, 0,0.2)使得元素背景颜色变成透明
简述字体图标的原理，动手实现使用 iconfont 实现字体图标的 demo，回复预览地址
- 浏览器渲染的时候读取HTML文件，会寻找文字的unicode编码，再根据HTML里面设置的font-family去查找对应的字体文件。找到文件后根据unicode编码绘制图片外形，然后绘制到页面上.
- demo
sprit图片制作流程
- 登录地址
- 拷贝他的css文件复制到代码上
- 然后利用class来进行调用.
字体图标制作流程
- 登录地址
- 获取unicode编码或者class文件中
- 添加到style样式中去