详解CSS应用(二)

三、CSS布局

0x1 常用布局方式

1.表格布局

隐蔽的表格布局

2.盒子模型

display属性:block、inline、inline-block

position属性:static、relative、absolute、fixed
* static
按照文档流静态布局
* relative
偏移是相对于元素本身,不会改变元素的空间
* absolute
脱离文档流,不会对其他元素造成影响
相对于最近的relative或者absolute
* fixed
脱离文档流,相对可视区域
* z-index
层级优先,定位为relative、absolute、fixed可以设置

3.flexbox
弹性盒子
盒子本来就是并列的
指定宽度即可

0x2 float

0x3 inline-block

0x4 响应式布局

在不同设备上正常使用
般主要处理屏幕大小问题
主要方法:
隐藏+折行+自适应空间
rem/viewport/media query
* viewport

四、CSS效果

0x1 效果属性

1.box-shadow

作用:
* 营造层次感(立体感)
* 充当没有宽度的边框
* 特殊效果

2.text-shadow

作用:
* 立体感
* 印刷品质感

3.Border-radius
* 圆角矩形
* 圆形 50%
* 半圆/扇形一些奇怪的角角

4.background
* 纹理、图案渐变
* 雪碧图动画 改变背景图片在雪碧图中的位置再加上动画效果
* 背景图尺寸适应
* 当图片比容器大时居中
background-position: center center;
* 保持长宽比不变图片覆盖容器
background-size: contain(左图)/cover(右图);

0x2 clip-path

原理:clip-path 属性为我们提供了一系列的坐标来创建路径也就是我们常常说的X,Y。当创建完一个闭合的路径时,位于路径内部的区域就可见,而路径外的区域就不可见。这样就实现了裁剪效果。我们可以用这个属性来创建各种图形,如圆形,多边形,三角形,椭圆形等等,没有你做不到,就怕你没想到。
查看我博客里面的介绍
* 对容器进行裁剪
* 常见几何图形
* 自定义路径

0x3 变换

transform

0x4 面试真题

1、如何用一个div画XXX
* box-shadow 无限投影
* ::befor / ::after

2、如何产生不占空间的边框
* Box-shadow 不给模糊值
* Outline

3、如何实现圆形元素(头像)
* border-radius:50%

4、如何实现 iOS 图标的圆角
* clip-path: (svg)

5、如何实现半圆、扇形等图形
* border-radius组合:
* 有无边框、边框粗细、圆角半径

6、如何实现背景图居中显示/不重复/改变大小
* background-position
* background-repeat
* background-size(cover/contain)

7、如何平移/放大一个元素
* transform: translateX (100 px)
* transform: scale (2)