盒子模型相关知识点(补充)

4.

    面试题   

         第一种解决抖动的方法 

         border:  10px solid transparent; 

         第二种解决抖动的方法  

        box-sizing 控制盒子width和height组成部分

           可选值：

             content-box  默认情况下， 盒子width指的内容区宽度

             border-box    盒子的width和height指的是内容区，内边距，边框的大小  

        margin  外边距   指的是当前盒子和其他盒子之间的距离

          margin-top    上外边距    盒子正值向下移动，负值向上移动

          margin-right  右外边距    默认情况，设置margin-right是没有效果

          margin-bottom  下外边距   盒子自己不动，挤下面的盒子移动，正值向下，负值向上

          margin-left    左外边距   盒子正值向右移动，负值向左移动

         margin:;

            后也可跟多个值，4个，3个，2个，1个皆可，规则跟padding一样

2.水平布局

   面试题：简单跟我说一说什么是过度约束，如何调整

 水平方向有七个值

margin-left+border-left+padding-left+width+padding-right +border-right+ margin-right

   浏览器规定：

   水平方向的七个值相加必须等于其父元素内容区的宽度，如果不等于，

   那么浏览器就会自动调整七个值中的某值，让其成立，这就叫过度约束

10+10+20+100+20+10+10  ==600   ？？

   如何调整：

     1、七个值中如果没有auto，那么浏览器默认调整的是margin-right

     10+10+20+100+20+10+ 430 ==600

     2、七个值中如果有auto，则浏览器就会调整auto

       可以设置auto大小的属性，是margin-left  width  margin-right  

       (1)1个auto，谁是auto，浏览器就调整谁

      （2）2个auto

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

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

          margin-left  margin-right  auto   width 固定值  左右外边距平分，盒子会居中显示

      （3）3个auto

      margin-left  width  margin-right  调整width  

      总结：

        浏览器调整

           width>margin

3.默认样式

默认样式：

           浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，

           所以为很多的元素都设置了一些默认的margin和padding，

         而它的这些默认样式，正常情况下我们是不需要使用的。

           所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉

        重置样式表，专门用来对浏览器的样式进行重置 

            <link rel="stylesheet" href="./reset.css" />

            <link rel="stylesheet" href="./index.css" />

        注意：

            1、link引入css文件，前提css必须要有

            2、reset.css必须要在你写的css前引入,否则将会覆盖你写的.css文件

4.盒子的大小

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

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

                可选值：

               content-box 内容区 默认值

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

5.阴影和圆角

box-shadow

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

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

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

                第三个值：模糊半径

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

知识点2:

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

             borde-top-right-radius

             border-top-left-radius

             border-bottom-left-radius

             border-bottom-right-radius

             border-radius: 50%;