盒模型、边框、内边距、外边距、水平布局、垂直布局 、外边距的折叠 、内联元素的盒子、盒子的大小

一、盒模型

理解：就相当于，买一个家具，安放在合适的位置，需要考虑到这个内容大小，位置，形状。

大小：内容区(content)、内边距（padding）、边框（border）、外边距（margin）

 影响盒模型大小：内容区，内边距，边框。

 1、内容区  用来放具体内容

            默认情况下：width: 设置内容区的宽度;

                                height: 设置内容区的高度;

2:边框（border）元素设置边框

      边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

        2.1设置边框必须指定三个样式

          2.1.1 设置边框大小  (可以设置多个值)

 1、border-width:;
        4个值  上  右  下  左
        3个值  上  左右   下
        2个值  上下  左右
        1个值  上下左右
2、可以单独设置某一边的宽度
       border-xxx-width:;   top  right  bottom  left
 3、 border-width:; 选写的   有默认值：1.5px左右

          2.1.2设置边框样式

border-style:;
      可选值：none    默认值，没有样式
             solid   实线
             dashed  虚线
             double  双线 
             dotted  圆点虚线

          2.1.3设置边框的颜色

 1、 border-color:;  也可跟多个值，规则跟border-width一样
 2、单独设置某一边的边框样式
         border-XXX-color: ;  top  right  bottom  left
 3、自定义小箭头
        border-color:transparent red  transparent transparent; 

三、内边距

padding:指的是盒子的内容区与盒子边框之间的距离

可以单独设置一边内边距

        padding-xxx:  ;    top  right bottom left  

四、外边距

1、
margin-top:;  正值元素向下移动 负值元素向上
margin-left: ;正值元素向右移动，负值元素向左
margin-bottom: ;元素自己不动，正值挤着下面的元素向下，负值下面的元素向上
margin-right:  对于块元素，不生效

2、 margin:; 可以跟多个值，规则跟border-width一样

五、水平布局

  过渡约束：浏览器的一种规则，元素水平方向七个值数值相加，要等于其父元素内容区宽度，

  如果不等于，浏览器会进行强制调整，这个过程就叫过度约束。

  怎么调整：

    5.1七个值当中没有auto，就调整margin-right

      0+0+0+100+0+0+500=600

    5.2如果有auto，margin-left，width，margin-right可以被设置为auto

         1个auto  谁是auto调整谁

            margin-left为auto，width，margin-right为固定值

            margin-right为auto，width，margin-left为固定值

            width为auto，margin-left，margin-left为固定值

             0+0+0+auto+0+0+0=600

       2个auto

          margin-left，width为auto，margin-right为固定值  调整width

          width，margin-right为auto，margin-left为固定值  调整width

         margin-left，margin-right为auto，width为固定值  同时调整margin-left，margin-right 

      3个auto

        margin-left，width，margin-right为auto  调整的width

        总结：如果width为auto，就只调整width

六、垂直布局      

    overflow: ;

          可选值：

                  visible  默认值，文本正常显示

                  hidden  裁剪多余

                  auto  根据需要出现滚动条

                  scroll 双滚动条

七、外边距的折叠

        <!-- 面试题：什么是外边距的折叠，如何处理 -->

 垂直外边距的重叠：

                   7.1兄弟元素：两者正值的话，谁大听谁的

                                       一正一负，两者相加

                                  两者负值的话，谁小听谁的

                    7.2父子元素：

                    如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素从而会影响到整个页面的布局，必须要处理。

    解决方案：

      1、用透明边框隔开两者的外边距

      2、overflow: 非visible的值;(可以开启元素的BFC属性)

      3.用伪类前面加一个display:table;*/

八、内联元素的盒子

 8.1 从这几点分析：

    内容区  无法自定义大小，它的大小是被内容撑开

    内边距  可以设置，而且垂直方向的内边距不会影响其他元素

    边框   可以设置，而且垂直方向的边框不会影响其他元素

    外边距  水平方向可以设置，垂直方向设置不生效的

   

 8.2行内元素的盒模型：

      1: 不能设置width和height，被内容撑开

      2: 可以设置padding，但垂直方向padding不会影响页面的布局，不会挤别人

      3: 可以设置边框，但是垂直的边框不会影响到页面的布局，不会挤别人

      4: 可以设置水平方向的外边距，水平方向的相邻外边距不会重叠，而是求和，但不支持垂直外边距

8.3display 用来设置元素显示的类型

             可选值：

            inline  将元素设置为行内元素

            block   将元素设置为块元素

            inline-block  行内块块元素（即可以设置宽高，又不会独占一行）

            table   将元素设置为一个表格

            none    元素不在页面中显示（隐藏一个元素）

8.4visibility 用来设置元素的显示状态

          可选值：

          visible 默认值  元素在页面中正常显示

          hidden  元素不在页面中显示（隐藏一个元素），位置依然保留

九、默认样式

原因：为了在页面中显示的效果较好，所以把默认样式去掉。

方式一：1:清除浏览器的默认样式
      {
        margin: 0;
        padding: 0;
      }
方式二：2:引入重置样式表

      li {
        list-style: none;
      }
      a {
        text-decoration: none;
      } 

面试题：

       link标签和@import url()两者引入css文件，两者的区别是什么

       1、link是html标签，@import url()是css

       2、引入顺序的不一样，

       link标签是先渲染，是将html文件和css文件联系在一起

       @import url()后渲染 ，是将css文件加载到html文件里

十、盒子的大小

 面试题：

      默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定

      box-sizing  用来设置盒子尺寸的计算方式 width/height 指的是谁

              可选值：

                  content-box 内容区 默认值

                  border-box  宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区

十一、阴影和圆角

 知识点一：box-shadow

             用来设置元素的阴影效果，不会影响到页面布局

                第一个值：水平偏移量  正->左  负->右

                第二个值：垂直偏移量  正->下  负->上

                第三个值：模糊半径   默认值0

                第四个值：颜色   默认值黑色

知识点2:

             border-radius 用来设置圆角  以10px为半径画圆

             borde-top-right-radius   设置右上角

             border-top-left-radius   设置左上角

             border-bottom-left-radius  设置左下角

             border-bottom-right-radius  设置右下角

             border-radius: 50%;  设置圆形