三、CSS布局
0x1 常用布局方式
1.表格布局
<table>
<tr>
<td class="left">左</td>
<td class="right">右</td>
</tr>
</table>
隐蔽的表格布局
.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
弹性盒子
盒子本来就是并列的
指定宽度即可
.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.伪元素将父元素撑开
.container2::after {
content: 'aaa';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
- 浮动实现三栏布局
.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
像文本一样排block元素
没有清除浮动等问题
需要处理间隙
间隙是由于元素的字体大小带来的,解决的方法是将父元素的字体置零,子元素字体自定义。
.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
<meta name="viewport" content="width=device-width, initial-scale=1.0">
当统一width=320(或其他)则会等比例放大界面
或者动态写脚本控制大小。
- media query
//隐藏式处理不和谐的界面
注意max-width比较大的写在上面,查询是从上往下。
@media (max-width: 640px) {
.left {
display: none;
}
}
- rem
1 rem = font-size
四、CSS效果
0x1 效果属性
1.box-shadow
语法:
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
语法:
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)