菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 复习css [打印本页]

---

作者: 仁4308    时间: 2023-2-28 22:26
标题: 复习css

• CSS的盒子阴影
  
  • CSS中使用box-shadow属性
    
    • 属性值：
      
      • h-shadow 必须值 水平阴影位置
        
      • v-shadow 必须值 垂直阴影位置
        
      • blur  可选  模糊距离
        
      • spread 可选 阴影尺寸
        
      • color 可选  阴影颜色
        
      • inset  可选 将外部阴影改为内部阴影   默认值是outset 但是outset不能写在box-shadow中，否则阴影失效。
        
    • 注意：盒子阴影不会占用空间， 不会影响其他盒子的排列
      
• CSS的浮动
  
  • CSS的传统布局方式
    
    • 普通流（标准流）
      
      • 比如说块级盒子自己占一行，行内元素一行会显示多个，标准流就是最基本的布局方式。
        
    • 浮动
      
    • 定位
      
  • 浮动
    
    • 为什么需要浮动？
      
      • 可以让多个盒子水平排列成一行，而且中间没有空白间隙
        
    • 浮动的属性
      
      • float
        
        • 属性值
          
          • none 元素没有浮动（默认值）
            
          • left 左浮动
            
          • right 右浮动
            
    • 注意点
      
      • 在网页布局时，纵向找标准流，横向找浮动。
        
    • 浮动的特性
      
      • 浮动的元素会脱离标准流（脱标）
        
      • 浮动的元素一行内显示并且沿元素顶部对齐
        
      • 浮动的元素会行内块元素的特定
        
      • 浮动的盒子会压住后面的标准流盒子，但是不会压住文字（原因是：浮动的技术研发之初就是为了实现文字环绕的）
        
      • 浮动的盒子只会影响它后面的标准流，不会影响前面的标准流。
        
    • 浮动的注意点
      
      • 1、浮动的盒子和标准流盒子搭配的方法
        
        • 父级盒子用标准流进行上下排列，子盒子采用浮动来进行横向排列
          
      • 2、一个元素浮动了，理论上其余的兄弟元素也都需要浮动
        
        • 因为浮动的盒子会脱标， 如果兄弟盒子只浮动了一个，那么会影响后面的其他兄弟盒子。
          
  • 清除浮动
    
    • 1、额外标签法
      
      • 额外标签法也称为隔墙法，是W3C推荐的做法。
        
      • 在浮动元素的末尾添加一个空标签，这个空标签要求必须是块级元素。
        
    • 2、给父级添加overflow:hidden属性
      
    • 3、给父级添加after伪元素
    • 4、给父级添加双伪元素
      

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4