盒子模型

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

 盒子尺寸box-sizing

1. content-box 内容盒子,指设置宽高指的是内容的宽高
2. border-box    指设置宽高指的是内容+内边距+边框的宽度

outline  表示元素的外轮廓

1. 不占据空间, 默认显示在border的外面
2. outline相关非属性有:
   1. outline-width
   2. outline-style :取值和border一样,比如solid, dottedd等
   3. outline-color
3. 应用实例 :
   1. 去除a元素, input元素, textarea元素的focus轮廓效果
   2. 

       

       

元素的阴影:shadow

盒子阴影box-shadow

box-shadow: offset-x offset-y [blur [spread]] [color] [inset]

1. box-shadow 属性用于向盒子添加一个或多个阴影效果
2. offset-x: 阴影的水平方向偏移量.正数向右偏移,负数向左偏移.
3. offset-y: 阴影的垂直偏移量,正数向下偏移,负数向上偏移.
4. blur:模糊半径, 阴影模糊度,不能取负数.
5. spread:阴影大小.正数阴影扩大(阴影盒子大小小于盒子大小),负数阴影缩小
6. color: 颜色
7. inset: 表示添加内阴影,默认为外阴影 

   •   .box {
           width: 200px;
           height: 200px;
           background-color: #ffffff;
     
           border: 1px solid #ffffff;
           margin: 0 auto;
     
           /* 设置多个阴影 */
           /* 方法一 */
           /* box-shadow: 5px 5px 10px ,
                       -5px 0 10px ; */
           /* 方法二 */
             box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.5);
         }

     

      

文字阴影 text-shadow

text-shadow: h-shadow v-shadow blur color;

1. h-shadow： 设置水平阴影的位置（x轴方向），必需要设置的参数；允许负值。
2. v-shadow ： 设置垂直阴影的位置（y轴方向），必需要设置的参数，允许负值。
3. blur： 阴影模糊的距离（半径大小），可选择设置的参数。
4. color ： 阴影的颜色，可选择设置的参数。

注释：text-shadow 属性可以向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

水平居中

1. text-align :

   1. 

2. margin : 0 auto

   1. 原理: margin-left/ margin-right初始值为0 ,设置为auto,会平分/占据剩余的空间

   2. 

 

 

word-break:  让单词可以断开