详解CSS应用（二）

Myth丶恋晨 2022-05-19 01:07 264阅读 0赞

## 三、CSS布局 ##

### 0x1 常用布局方式 ###

1.表格布局

隐蔽的表格布局

.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.盒子模型  
![20180716133226.png][]  
display属性：block、inline、inline-block  
![20180716133756.png][]  
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;
    }

![20180716142039.png][]

### 0x2 float ###

*  特性  
    元素“浮动”脱离文档流但不脱离文本流。  
    ![20180716142549.png][]
 *  对自身的影响  
    形成“块” BFC  
    例：span标签由于float可以设置宽和高，对比上图。  
    ![Image 1][]  
    位置尽量靠上、左、右
 *  对兄弟的影响：  
    上面贴非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;
    }

![20180716150816.png][]

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

*  media query

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

*  rem  
    1 rem = font-size

## 四、CSS效果 ##

### 0x1 效果属性 ###

1.box-shadow  
![20180717094554.png][]

语法：
    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（右图）;  
![20180717104832.png][]

### 0x2 clip-path ###

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

### 0x3 变换 ###

transform  
![20180717112801.png][]

### 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)

[20180716133226.png]: /images/20220519/f56fb8f5041f4f4a9066935717946c5b.png
[20180716133756.png]: /images/20220519/cb01b031921b40d0b2d7a4e5adb07225.png
[20180716142039.png]: /images/20220519/ce54b459f9ec4e928ef9c7d0ac9a1a70.png
[20180716142549.png]: /images/20220519/ba231d9adffe4b7c9d3aeaa6dc542aac.png
[Image 1]: 
[20180716150816.png]: /images/20220519/a206fa7924c54640acbd38d757df1cd5.png
[20180717094554.png]: /images/20220519/1cbc533018c14b3b9e5adfeea26c581e.png
[20180717104832.png]: /images/20220519/e66cbfb4317a45c2a5978f129ad1b94e.png
[Link 1]: https://geekmubai.com/template/718.html
[20180717112801.png]: /images/20220519/d0731e2c1fb447dfbe7d13d8643dd2dd.png