盒子模型

标签：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 {

         width: 100px;

         height: 100px;

         background-color: red;

   
   

         /* border-top-left-radius: 50px;

         border-bottom-left-radius: 50px;

         border-top-right-radius: 50px;

         border-bottom-right-radius: 50px; */

         /* 简写   圆形*/

         border-radius: 50px;

          /* 等同　*/

         /* 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