详解CSS应用(二)
三、CSS布局
0x1 常用布局方式
1.表格布局
1 2 3 4 5 6 7 |
<table> <tr> <td class="left">左</td> <td class="right">右</td> </tr> </table> |
隐蔽的表格布局
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.table { margin-top: 20px; display: table; width: 800px; height: 200px; } .table-row { display: table-row; } .table-cell { vertical-align: center; display: table-cell; } <div class="table"> <div class="table-row"> <div class="left table-cell"> 左 </div> <div class="right table-cell"> 右 </div> </div> </div> |
2.盒子模型
display属性:block、inline、inline-block
position属性:static、relative、absolute、fixed
* static
按照文档流静态布局
* relative
偏移是相对于元素本身,不会改变元素的空间
* absolute
脱离文档流,不会对其他元素造成影响
相对于最近的relative或者absolute
* fixed
脱离文档流,相对可视区域
* z-index
层级优先,定位为relative、absolute、fixed可以设置
3.flexbox
弹性盒子
盒子本来就是并列的
指定宽度即可
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.flex1{ flex:1/2/3; } .flex2{ width:50px; flex:none; } .left { background: red; display: flex; width: 200px; } .right { background: blue; display: flex; flex: 1; } |
0x2 float
- 特性
元素“浮动”脱离文档流但不脱离文本流。
- 对自身的影响
形成“块” BFC
例:span标签由于float可以设置宽和高,对比上图。
位置尽量靠上、左、右 - 对兄弟的影响:
上面贴非float元素,旁边贴float元素
不影响其它块级元素位置,影响其它块级元素内部文本 - 对父级元素的影响
从布局上“消失”
高度塌陷
注意:高度塌陷的解决方式
1.父元素设置overflow:auto/hidden
2.伪元素将父元素撑开
1 2 3 4 5 6 7 8 |
.container2::after { content: 'aaa'; clear: both; display: block; visibility: hidden; height: 0; } |
- 浮动实现三栏布局
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.left { background: red; float:left; height:100%; width: 200px; height: 200px; } .right { background: blue; float: right; width: 200px; height: 100%; } .middle { margin-left: 200px; margin-right: 200px; } |
0x3 inline-block
1 2 3 4 5 |
像文本一样排block元素 没有清除浮动等问题 需要处理间隙 间隙是由于元素的字体大小带来的,解决的方法是将父元素的字体置零,子元素字体自定义。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.container { width: 800px; height: 200px; font-size: 0; } .left { font-size: 14px; background: red; display: inline-block; width: 200px; height: 200px; } .right { font-size: 14px; background: blue; display: inline-block; width: 600px; height: 200px; } <div class="container"> <div class="left"> 左 </div> <div class="right"> 右 </div> </div> |
0x4 响应式布局
在不同设备上正常使用
般主要处理屏幕大小问题
主要方法:
隐藏+折行+自适应空间
rem/viewport/media query
* viewport
1 2 3 4 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 当统一width=320(或其他)则会等比例放大界面 或者动态写脚本控制大小。 |
- media query
1 2 3 4 5 6 7 8 |
//隐藏式处理不和谐的界面 注意max-width比较大的写在上面,查询是从上往下。 @media (max-width: 640px) { .left { display: none; } } |
- rem
1 rem = font-size
四、CSS效果
0x1 效果属性
1.box-shadow
1 2 3 4 5 6 7 8 9 10 11 12 13 |
语法: box-shadow:inset offset-x offset-y blur-radius spread-radius color,....; @1:inset 有inset 则为内阴影,没有insert 则为外阴影,默认为外阴影。 @2:offset-x 横向阴影的大小,正值阴影在右边,负值阴影在左边,0的时候阴影中盒子后面,看不见的,如果有blur-radius值会有模糊效果。 @3:offset-y 纵向阴影的大小,值同offset-x。 @4:blur-radius 阴影的模糊程度,值越大,阴影越模糊。 @5:spread-radius 阴影的扩大缩小,正值时,阴影扩大;负值时,阴影缩小,默认为0,和盒子同样大。 |
作用:
* 营造层次感(立体感)
* 充当没有宽度的边框
* 特殊效果
2.text-shadow
1 2 3 4 5 6 7 8 9 |
语法: text-shadow: offset-x offset-y blur-radius color; @2:offset-x 横向阴影的大小,正值阴影在右边,负值阴影在左边,0的时候阴影中盒子后面,看不见的,如果有blur-radius值会有模糊效果。 @3:offset-y 纵向阴影的大小,值同offset-x。 @4:blur-radius 阴影的模糊程度,值越大,阴影越模糊。 |
作用:
* 立体感
* 印刷品质感
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)