复习CSS - 五

简介

• 实际上这次涉及到一些ps 相关的知识点

PS 基本操作

• PS基本操作：

  
  
  image.png

常规通用css

• 大多数CSS都需要包含如下通用属性：

* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}

image.png

圆角矩形 border-radius

• 比如 border-radius: 10px; 直接指定 px 或者用百分比均可，例如 ： border-radius: 10%
  
  image.png
• 实际上可以顺时针分别改变四个角的值：border-radius: 10px 20px 30px 40px
  
  image.png

盒子阴影 box-shadow

• CSS 中新增盒子阴影，可以使用 box-shadow 属性进行设置。
• 写法box-shadow: h-shadow v-shadow blur spread color inset ，inset 可以省略表示外阴影。
  
  image.png

文字阴影 text-shadow

• 通过属性text-shadow: h v blur color
  
  image.png

浮动 （float）

• 一个网页布局通常通过三种布局方式组成：标准流、浮动、定位
• 浮动可以改变元素标签默认的排列的方式。

• 多个块元素纵向排列用标准流，多个块级元素横向排列用浮动。

  
  
  image.png
  
  
  image.png

浮动的特性（脱标）

• 1、浮动元素会脱离标准流（脱标）
• 2、浮动的元素会一行内显示并且元素顶部对齐。
• 3、浮动的元素会具有行内块元素的特性。（也就是说如果给span加上float，那么他就变成行内块的特性了。）
• 浮动经常和标准流的父级元素配合使用。

常见的网页布局

• 基础性

  
  
  image.png

• 常规形

  
  
  image.png

• 通过标准流和浮动实现下面的例子（不能用flex，或者grid）

  
  
  image.png
• 实现参考代码：

    
    
    
    
    


Header

    
Banner
    

        

            
1
            
2
            
3
            
4
        
    
    

        

            
1
            
2
            
3
            
4
        
    

Footer

• 浮动只会压住后面的标准流，而不影响之前的标准流。

为什么清除浮动

• 由于父级盒子很多情况下，不方便给高度，但是子盒子又不占有位置，最后父级盒子高度为0时，就会影响下面标准流的盒子。

  
  
  image.png

• 清除浮动

  
  
  image.png

• 清除浮动的四种方法

  
  
  image.png

清除浮动的额外标签法，也成为隔墙法（W3C推荐）

• 额外标签法会在浮动元素末尾添加一个空的标签，例如：
  
  
  image.png

清除浮动的 overflow 法。

• 找到父级元素添加overflow: hidden 即可。
  
  image.png

清除浮动的 :after 伪元素法

• 给父元素添加:after 伪类并写入如下代码：

  
  
  image.png
• 测试代码如下：

    
    
    
    
    



    
Cell1
    
Cell2
    
Cell3

Footer

• 原理上类似额外标签法，优点是不会影响原有标签结构。
• 缺点是需要照顾低版本浏览器，大厂都会参考这种方法，是一种高级的处理方式。

双伪元素清除浮动

• 闭合浮动的精髓就是赌门，那么最好的方式就是前后都堵门，也就是双伪元素清除浮动。

  
  
  image.png

• 详情：

  
  
  image.png
• 测试代码：（clearfix 注意需要应用到父元素中）

结束

• 感谢阅读