码迷,mamicode.com
首页 > 其他好文 > 详细

盒子模型

时间:2020-09-17 18:15:29      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:form   bre   ott   浮动   style   20px   mon   透明   取值   

HTML每个元素都可以看做一个盒子,

盒子包括 content,padding,border,margin

方向 :top, right, bottom, left

内容相关属性:

  1. width:宽度
    1. min-width :最小宽度,浏览器窗口小于最小宽度是,可以滚动查看
    2. max-width : 最大宽度
  2. height:高度
    1. min-height : 最小高度
    2. max-height: 最大高度

内边距相关padding:

  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left
  5. 缩写属性:padding: 10px,20px,30px,40px(顺时针,上右下左)
    1. 四个值: 顺时针,上右下左
    2. 三个值 :  上右下,没有左,左边跟随着右边的值
    3. 两个值:   上和右(下跟随上,左跟右)
    4. 一个值: 全部方向都是相同的值

外边距相关margin:

  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left
  5. 缩写属性:margin: 10px,20px,30px,40px(顺时针,上右下左)
    1. 四个值: 顺时针,上右下左
    2. 三个值 :  上右下,没有左,左边跟随着右边的值
    3. 两个值:   上和右(下跟随上,左跟右)
    4. 一个值: 全部方向都是相同的值
  6. 上下margin传递->父子:
    1. margin-top传递 
      1. 如果块级元素的顶部线父元素顶部线层叠,那么这块级元素的margin-top的值会传递给父级元素
    2. margin-bottom传递
      1. 如果块级元素的低部线和父元素的低部线层叠,那么这块级元素的margin-bottom的值会传递给父级元素
    3. 解决:
      1. 父元素设置padding-top/padding-bottom
      2. 给父元素设置border
      3. 触发BFC: 设置一个元素的overflow为auto/hidden (常用)
        1. BFC:(block format context 块级格式化上下文)
        2. 类似结界

        3. 如何触发BFC

          1. 浮动可以触发
          2. 设置一个元素的overflow为auto/hidden
  7. 上下margin折叠->兄弟:
    1. 垂直方向上相邻的2个margin(margin-top, margin-bottom) 有可能会合并成1一个margin,这种情况叫做折叠(collapse)
    2. 水平方向上margin永远不会折叠
    3. 折叠后最终值计算规则
      1. 两个值进行比较,取最大值
    4. 防止折叠
      1. 只设置一个元素的margin
    5. 上下margin折叠的用处
      1. 比如连续段落之间的margin,恰好需要这种折叠
      2. 技术图片

border(边框)

  1. 边框宽度
    1. border-top-width ,border-right-width .border-bottom-width .border-left-width 
    2. 简写:border-width 
  2. 边框颜色
    1. border-top-color....
    2. 简写:border-color  
  3. 边框样式
    1. border-top-style.....
    2. 简写 border-style
    3. 取值
      1. none 无样式
      2. dotted 点
      3. dashed 虚线
      4. solid 实线
      5. double  双线
      6. groove
      7. ridge
      8. inset
      9. outside
      10. 技术图片 
  4. border -top/border -right/border -bottom/border -left: 1px red solid
  5. 全部简写: border :1px red solid

边框的形状:

  1. 矩形:
    1.   .box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            border-top: 20px orangered solid;
            border-left: 20px red solid;
          }
      技术图片

       

  2. 三角形
    1. /* 上箭头三角形 */
          .box3 {
            width: 0px;
            height: 0px;
            border-top: 100px solid orangered;
            /* transparent 透明 */
            border-left: 100px solid transparent;
            
            /* 旋转 transform: rotate(角度deg);*/
            transform: rotate(-45deg);
          }
      技术图片



圆角效果:

  1. radius 半径,周围
  2. border-* -*-radius: 20px  10px
    1. * :方向 top,left.bottom.right
    2. 后面设置两个参数,第一个是水平方向的半径,第二个是垂直方向的半径
    3. 还可以设置百分比
  3. border-radius 参考的是当前元素的border+padding+content
  4.  border-top-left-radius: 50px 25;
    技术图片
     /* 圆角 */
        .box4 {
          width100px;
          height100px;
          background-colorred;

          /* border-top-left-radius: 50px;
          border-bottom-left-radius: 50px;
          border-top-right-radius: 50px;
          border-bottom-right-radius: 50px; */
          /* 简写   圆形*/
          border-radius50px;
           /* 等同 */
          /* border-radius: 50%; */
        }
     
    技术图片
    
    

     

  5. 技术图片

     

     

行内非替换元素注意点

  1. 在行内非替换元素 width, height, margin-bottom, margin-top 不起作用
  2. 在行内非替换元素作用特殊: padding-top, padding-bottom 上下会多出来区域,但是这个区域不占空间
  3. 在行内非替换元素作用特殊: border-top, border-bottom 上下会多出来区域,但是这个区域不占空间  
    1.   解决: display: inline-block
      • 1

 

 

word-break:  让单词可以断开

 

 

技术图片

 

盒子模型

标签:form   bre   ott   浮动   style   20px   mon   透明   取值   

原文地址:https://www.cnblogs.com/chunying/p/13631870.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!