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

标题: 前端基础第六天-范建荣-20230417 [打印本页]

---

作者: °荣    时间: 2023-4-17 23:15
标题: 前端基础第六天-范建荣-20230417
一 学习内容

• 盒子模型
  
  • 什么叫盒子模型
    
    • 就是将HTML页面中的布局元素看做是一个矩形的盒子，盒子的内容包括边框、外边距、内边距和实际内容。
      
  • 边框
    
    • border属性可以设置边框样式，属性值由三部分组组成：边框的粗细、边框的样式、边框的颜色
      
    • 语法：border: border-width border-style border-color;
      
      • border-style常用属性：solid（实线、最常用）、dashed（虚线）、dotted（点线）。
        
    • 例
      
    • 表格的细线边框
      
      • 使用border-collapse:collapse； 来设置表格的细线边框，collapse是合并的意思
        
    • 边框对于盒子大小的影响
      
      • 边框会影响盒子的实际大小，加了边框盒子会变大，我们可以在设置盒子大小的时候将边框的宽度加上，即可。
        
      • 例
        
  • 内边距
    
    • padding属性可以控制内边距，就是边框和盒子内容之间的距离
      
      • padding-left  左内边距
        
      • padding-right 右内边距
        
      • padding-top 上内边距
        
      • padding-bottom 下内边距
        
      • 复合属性
        
        • padding: 10px;  上下左右内边距都是10px
          
        • padding: 10px 20px; 上下内边距是10px 左右内边距是20px
          
        • padding: 10px 20px 30px; 上内边距是10px 左右是20px 下是30px
          
        • padding: 10px 20px 30px 40px; 上右下左内边距分别是10px 20px 30px和40px ，顺时针方向从上内边距开始
          
    • 例
      
    • 内边距的特殊情况
      
      • 没有宽度的盒子，padding不会撑开盒子的宽度
        
      • 例
        
  • box-sizing（怪异盒模型）
    
    • 属性值
      
      • content-box（默认值）
        
        • 默认的盒子模型的设置，盒子的整个大小是宽度+padding+border
          
      • border-box
        
        • 怪异盒模型，盒子宽度和高度设定好之后不会随着padding和border的变化而变化，前提是padding和border的值不要超过盒子的大小。
          
      • 例
        
  • 外边距
    
    • margin属性来控制盒子的外边距，就是盒子和盒子之间的距离
      
    • 属性
      
      • margin-left 左外边距
        
      • margin-right 右外边距
        
      • margin-top 上外边距
        
      • margin-bottom 下外边距
        
      • 复合属性
        
        • margin: 10px;  上下左右外边距都是10px
          
        • margin: 10px 20px; 上下外边距是10px 左右外边距是20px
          
        • margin: 10px 20px 30px; 上外边距是10px 左右是20px 下是30px
          
        • margin: 10px 20px 30px 40px; 上右下左外边距分别是10px 20px 30px和40px ，顺时针方向从上内边距开始
          
      • 例
        
    • 外边距的典型应用
      
      • 块元素盒子水平居中
        
        • 使用方法：
          
          • 1、盒子必须有宽度
            
          • 2、盒子的左右外边距设置为auto
            
        • 例
          
      • 行内元素的水平居中
        
        • 行内元素或者行内块元素水平居中就给父元素加text-align-center;即可
          
      • 外边距的合并问题
        
        • 相邻块元素垂直外边距合并
          
          • 当上面的盒子有下外边距，下面的盒子有上外边距，两个盒子之间的垂直距离会采用较大的外边距值。
            
        • 嵌套块元素的上外边距塌陷
          
          • 对于嵌套的块元素，父元素和子元素都有上外边距，实际的上外边距采用它们之间的较大的上外边距值。
            
          • 解决方案
            
            • 1、可以给父元素定义上边框
              
            • 2、给父元素定义上内边距
              
            • 3、给父元素添加overflow:hidden;
              
          • 例
            
        • 清除内外边距
          
          • 网页很多的元素的都有默认的内外边距，所以我们一般会在通配符选择其中将这些样式给清除掉。
            
          • 例
            
          • 注意点：行内元素一般不要设置上下的内外边距，进行只设置左右的，如果想设置就将该行内元素转化为行内块元素或者块元素。
            
        • 
          

二 学习问题
三 解决方案

---

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

Powered by Discuz! X3.4