布局相关、盒子模型、边框、内边距、外边距

一、文档流（normal flow）

     网页是一个多层的结构，

css可以给每一层设置样式，我们看到的是最上面一层

     文档流是网页最下面的一层

      最终元素分为两种状态：在文档流中，脱离文档流

      之前将元素分为三类，块元素、行内元素、行内块元素

      分别具有一些特点，这些特点都是元素在文档流中的特点

    注意：

       1.一旦元素脱离文档流，三种分类的特点都不复存在

       2.我们创建的元素默认是在文档流中

二、布局相关的样式

文档流默认的布局方式，浮动，定位，弹性盒子等

三、盒模型、盒子模型、框模型(box model)

    网页中也有很多的元素,将各种元素摆放在合适的位置，

    盒模型将页面所有元素的形状都统一了，

    你在布局时,只需要考虑到元素的大小即可

      盒模型             快递

   内容区  content        冰箱

   内边距  padding        泡沫

   边框    border       快递盒子

   外边距  margin     快递离你的距离

盒子的大小：跟内容区、内边距、边框有关系，跟外边距没关系

四、边框(border)  用来隔开盒子内部和盒子外部

    设置边框三要素：边框的宽度、颜色、样式

• 边框宽度

    border-width: 10px 20px 30px 40px;

  1、可以设置多个值，

    4个值  从上面顺时针方向四个边的边宽

    3个值  第二个值表示左和右边宽

    2个值  第一个值上下，第二个左右

  2、单独设置一边边宽

    上边宽border-top-width: ;

    下边宽border-block-width: ；

    左边宽border-left-width: ;

    右边宽border-right-width: ;

  3、border width有默认值，默认大小1-3px

  ② 边框颜色

    border-color: green;

  1、可以设置多个值

     规则跟border-width是一样

  2、单独设置某一边的颜色

     border-XXX-color: ;

     XXX:top、right、bottom、 left

  3、小箭头的写法

     border-color: 除了需要方向的，其他三个方向的都改为transparent

  4、border-color：有默认值，默认黑色

  ③ 边框样式

     border-style: solid;

  1.、边框样式的种类

    solid实线

    dotted点状的虚线

    dashed虚线

    double双线

  2、可以写多个样式

    规则跟border-width一样

  3、单独设置某一边样式border-XXX-style: ;

    XXX:top、right、bottom、left

1. border-style

简写语法：

border

边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色

而且没有任何的顺序要求

一指定就是同时指定四个边不能分别指定

border-left：设置某个边框的样式，宽度，颜色

border：none  不要边

五、内边距 padding 内容与边框之间的宽度

  1、可以单独设置某一边的内边距

    padding-top: ;

    padding-right:

    padding-bottom:

padding-left:;

2、内边距padding简写

可以写多个值，规则跟border-width是一样

/* 创建一个子元素box2占满box1，box2把box1内容区撑满了*/

      .box2 {

        width: 100%;

        height: 100%;

        background-color: red;

      }

六、外边距  margin  不影响盒子的大小，可以改变盒子的位置

margin-top设置元素上外边距,如果正值,元素向下移动,如果负值，元素向上移动margin-right 设置元素右外边距，元素没有效果

margin-botoom设置元素下外边距，正值，元素自己不动，会挤下面的元素向下移动

margin-left设置元素左外边距，正值，元素向右移动，负值，元素向左移动

简写margin：上右下左，同边框border一样

水平方向能影响到一个块所占位置的因素有哪些？

面试题:什么是过度约束，浏览器是如何调整水平方向值?

水平方向能影响到盒所占位置的因素有哪些？

margin-left

border-left

padding-left

width

padding-right

border-right

margin-right

过度约束:

浏览器规定，元素水平方向7个值相加，必须要等与其父元素内容区的宽度，如果不等于，浏览器就会进行调整，让等式成立

margin-left+border-left+padding-left + width + padding-right +border-right+ margin-right=父元素内容区的宽度

浏览器如何调整

1、如果水平方向7个值当中没有auto，浏览器会自动调整margin-right的值

2、7个值当中，有3个值可以设置auto，margin-left  width  margin-right

①设置1个auto

margin-left

auto+20+0+100+0+20+0=600auto=460

width

margin-right

②设置2个auto

margin-left width       调整width

width margin-right      调整width

margin-left margin-righto同时调整margin-left margin-right

③设置3个auto

margin-left width margin-right    调整的就是width

总结:

1、如果7个值当中有auto，调整的顺序

width > margin-left margin-right

2、如果想让块元素水平方向居中，必须要width为固定值，左右外边距为auto