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

标题: css基础郑强20230208 [打印本页]

---

作者: 郑强    时间: 2023-2-8 23:42
标题: css基础郑强20230208

• CSS的三大特性
  
  • 层叠性
    
    • 如果选择器相同，此时新的样式会覆盖掉旧的样式
      
    • 层叠性的原则
      
      • 样式冲突，遵循就近原则，哪个样式距离结构更近，就执行哪个样式
        
      • 样式不冲突，不会出现层叠问题
        
    • 例
      
  • 继承性
    
    • 子元素会继承父元素的某些样式，比如文本或者字体相关样式等。
      
    • 子元素能继承的父元素的样式：text-、font-、line-等属性 以及 color属性。
      
    • 例
      
  • 优先级（权重问题）
    
    • 如果为同一个元素指定多个选择器时，就会出现优先级的情况。
      
      • 如果选择器相同，执行层叠性
        
      • 如果选择器不同，按照权重来执行
        
    • 各种情况的权重表
      
      • 继承 或者 *
        
        • 权重是 0,0,0,0
          
      • 元素选择器
        
        • 权重是 0,0,0,1
          
      • 类选择器/伪类选择器
        
        • 权重是 0,0,1,0
          
      • ID选择器
        
        • 权重是 0,1,0,0
          
      • 行内样式
        
        • 权重是 1,0,0,0
          
      • !important
        
        • 权重是 ∞（无穷大）
          
    • 判断优先级的注意点：
      
      • 1、权重是由4组数字来组成的，不会有进位的情况出现，意思就是类选择器永远比元素选择器的权重高
        
      • 2、继承的权重是0 ，不管父元素的权重多高，对于子元素来说权重都是0
        
      • 3、如果有出现了复合选择器，那么权重是多个选择器权重相加
        
    • 权重叠加：
      
      • div ul li   权重是  0,0,0,3
        
      • .nav ul li 权重是 0,0,1,2
        
      • a:hover 权重是 0,0,1,1
        
      • .nav a  权重是  0,0,1,1
        
    • 例
      
• CSS的盒子模型
  
  • 盒子模型的组成
    
    • 边框
      
      • 属性名：border
        
      • 常用的写法：
        
        • border: border-width  border-style border-color；（属性是没有顺序的，推荐这样去写）
          
        • border-style的值
          
          • dotted：点线边框
            
          • dashed：虚线边框
            
          • solid：实线边框
            
        • 例
          
        • 注意点
          
          • 边框会影响盒子的大小
            
          • 如果想要解决这个问题，设置盒子宽高的时候要将边框的宽度减去即可
            
      • 表格的细线边框
        
        • border-collapse: collapse;
          
        • collapse是合并的意思，表示相邻的边框合在一起。
          
        • 例
          
    • 内边距
      
      • 盒子的内容和盒子边框之间的距离
        
      • 属性
        
        • padding-left  左内边距
          
        • padding-right 右内边距
          
        • padding-bottom 下内边距
          
        • padding-top 上内边距
          
      • padding的复合属性
        
        • 例
          
      • 注意点：
        
        • 内边距会影响盒子的实际大小，如果想加内边距但不想扩大盒子，那么就在设置盒子尺寸是将内边距的尺寸减掉即可
          
        • 如果盒子没有指定宽度，那么padding值不会撑开盒子
          
    • 外边距
      
      • margin属性控制盒子和盒子之间的距离
        
      • 属性
        
        • margin-top   上外边距
          
        • margin-left  左外边距
          
        • margin-right 右外边距
          
        • margin-bottom 下外边距
          
      • margin的复合属性（和padding完全一致）
        
        • margin：10px;  上下左右的外边距都是10px
          
        • margin: 20px 30px;  上下外边距是20px  左右的外边距是30px
          
        • margin: 30px 40px 50px；  上外边距是30px  左右是40px  下是50px
          
        • margin:10px 20px 30px 40px;  上右下左外边距分别是  10px 20px 30px 40px
          
      • 外边距的典型应用
        
        • 块级盒子的水平居中（盒子必须有宽度，左右外边距设置成auto即可）
          
          • 行内元素水平居中 就给父盒子增加 text-align:center样式即可。
            
      • 外边距合并
        
        • 相邻的块元素垂直外边距会出现合并的情况
          
          • 如果上面块元素有下外边距，下面的盒子有上外边距，那么就使用两者中较大的外边距值。
            
          • 例
            
        • 嵌套块元素外边距塌陷
          
          • 当父元素和子元素都有上外边距，以两者中的较大值为准进行上外边距的调整。
            
          • 解决外边距塌陷的三种方法
            
            • 1、给父元素添加上内边距
              
            • 2、给父元素添加上边框
              
            • 3、给父元素添加overflow:hidden；属性
              
            • 例
              
        • 清除内外边距
          
          • 网页中很多的元素有自己默认自带的内外边距，而且不同浏览器可能不一致，所以要在写网页之前讲元素自带的内外边距给清除掉。
            
          • 清除内外边距的代码
            

---

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

Powered by Discuz! X3.4