详解CSS应用（二）

三、CSS布局

0x1 常用布局方式

1.表格布局

<table>
        <tr>
            <td class="left">左</td>
            <td class="right">右</td>
        </tr>
</table>

<table>

<tr>

</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>

.table {

margin-top: 20px;

display: table;

width: 800px;

height: 200px;

}

.table-row {

display: table-row;

}

.table-cell {

vertical-align: center;

display: table-cell;

}

左

</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;
}

.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;
  }

.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;
}

.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元素
没有清除浮动等问题
需要处理间隙
间隙是由于元素的字体大小带来的，解决的方法是将父元素的字体置零，子元素字体自定义。

像文本一样排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>

.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>

右

</div>

0x4 响应式布局

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">
当统一width=320（或其他）则会等比例放大界面
或者动态写脚本控制大小。

当统一width=320（或其他）则会等比例放大界面

或者动态写脚本控制大小。

media query

//隐藏式处理不和谐的界面
注意max-width比较大的写在上面，查询是从上往下。
@media (max-width: 640px) {
    .left {
        display: none;
    }
}

//隐藏式处理不和谐的界面

注意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，和盒子同样大。

语法：

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
阴影的模糊程度，值越大，阴影越模糊。

语法：

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)