css盒子模型

文档流

元素转成块标签

display:block;

元素转成行内标签；

display:inline;

元素转成行内块标签

display：inline-block；

隐藏元素；

display:none;

文档流：

      网页是一个多层的结构，一层叠着一层，网页的最底层，我们叫文档流

      我们所创建的标签,默认都是在文档流中，

      标签特点的分类前提条件：标签必须在文档流中

        块标签，行内标签，行内块标签，

      一旦标签脱离文档流，

          就不在区分块、行内、行内块标签了，各自的特点也就不存在了

          也就是说块标签不会独占一行了，行内标签也可以设置宽高了，行内块标签三像素问题也没有了

      标签如何脱离文档流

          设置标签浮动、绝对定位、弹性盒子等等  

元素之间的转换

      display：；

        可选值：

          block  将元素转成块标签

          inline-block   将元素转成行内块标签

          inline  将元素转成行内标签

          none

盒子模型

把元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里

       所以我们把所有的元素都想成盒子，矩形

    盒模型、盒子模型、框模型（box model）             空调快递

      内容区（content）   放内容的区域                      空调

      内边距（padding）   内容区与边框之间的距离              泡沫

      边框（border）      边框分割开盒子里面和外面            纸箱子

      外边距（margin）   控制盒子的位置                    快递的位置描述

      影响盒模型大小的部分：内容区，内边距，边框

      跟外边距无关  

1:内容区(content)  元素中所有的子元素和文本内容都在内容区中排列

            设置width，height  是内容区的大小

            不能说是整个盒子的大小

盒子模型-边框

设置边框：简写

        1、单独设置一边的边框

          border-XXX:宽度  颜色  样式 ;

          xxx:left,right,top,bottom

        2、去除某一边的边框

          border-xxx:none;

    设置边框的宽度

        1、可以写个值

              4个值    上  右  下  左

              3个值    上  左右  下

              2个值    上下  左右

              1个值     上下左右

        2、可以单独设置某一边的宽度

        border-XXX-width: 40px;

        XXX:top、right、bottom、left

        3、边框大小设置  可选   默认是1-3px

       

 设边框的颜色

        1、也可以写多个值，规则跟border-width一样

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

        3、border-color  可选值  默认颜色黑色

        4、自制小箭头  

  

      border-color: green; 

       border-color: transparent transparent green transparent; 

       border-color:  rgba(0,0,0,0)  rgba(0,0,0,0) green rgba(0,0,0,0) ; 

       border-top-color: red;

        border-bottom-color: blue;

        border-left-color: black;

        border-right-color: pink; 

     设置边框的样式

         border-style: ;

            可选值：

              none   没有边框线， 默认值

              solid  实线

              double  双线

              dashed  虚线

              dotted  点状的虚线

       

       

      border-style: dotted; 

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

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

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

1:border-width  默认值一般是3px

使用border-width可以分别指定四个边框的宽度

除了border-width，CSS中还提供了四个border-xxx-width

  xxx的值可能是top right bottom left

专门用来设置指定边的宽度  

2:border-color  设置边框的颜色  默认值是黑色

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

border-xxx-color

3:border-style

* 设置边框的样式

*   可选值：

*     none，默认值，没有边框

*     solid 实线

  double 双线

  dashed [dæʃt] 虚线

*     dotted ['dɔtid] 点状边框

* style也可以分别指定四个边的边框样式，规则和width一致，

*   同时它也提供border-xxx-style四个样式，来分别设置四个边

* border

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

*   - 而且没有任何的顺序要求

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

*

* border-top border-right border-bottom border-left

*   可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

盒子模型-内边距

设置内边距

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

        padding-XXX: ;

          xxx:top,bottom,right,left

        2、padding后也可以跟多个值，规则跟border-width一样

        3、内边距是盒子内部的，会影响到盒子的大小

外边距

设置外边距

      1、  margin-top:;   正值，元素会向下移动，负值：元素向上

        margin-left:50px ;正值，  元素会向右移动  负值：元素向左

        margin-bottom: ;  正值， 元素本身不动，其下方元素向下移动，负值，其下方元素向上移动

        margin-right: ;   块元素独占一行，设置右外边距是没有效果的

      2、margin  同时设置

        后面也可以跟多个值，规则跟border-width一样

水平布局

 水平方向能够影响元素大小和位置的构成是哪些

元素水平方向7个值相加，浏览器规定必须等于其父元素内容区的宽度 ,如果等式不成立

浏览器会自动调整其值，使其相等  ，这个过程叫过度约束

margin-left  border-left  padding-left  width  padding-right border-right marign-right

0px 0px 0px 100px 0px 0px 0px  ！= 600px

浏览器如何调整？

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

    0px 0px 0px 100px 0px 0px  500px == 600px

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

      1个auto   ==>谁是auto，浏览器就调整谁

          auto 0px 0px 100px 0px 0px 0px  == 600px  auto=500px=margin-left

          0 0px 0px 100px 0px 0px auto  == 600px    auto=500px=margin-right

          0 0px 0px  auto  0px 0px 0px  == 600px    auto=600px=width

      2个auto

        margin-left width  

          auto 0px 0px auto 0px 0px 0px  == 600px  调整width

        width margin-right

          0px 0px 0px auto 0px 0px auto  == 600px  调整width

        margin-left  margin-right

          auto 0px 0px 100px 0px 0px auto  == 600px  同时调整margin-left  margin-right

      3个auto

          auto 0px 0px auto 0px 0px auto  == 600px  调整width

      总结：

         margin-left  margin-right   width 三个中中，如果width是auto，只调整width

         如果width如果固定值，margin-left  margin-right为auto，则元素会水平居中

设置圆

设置圆角

            border-radius: 10px;  

            border-radius: 50%; 设置圆形

设置某一个角的圆角效果 

   border-top-left-radius:50px ;

            border-bottom-right-radius: 50px;

            border-top-right-radius: 50px;

            border-bottom-left-radius: 50px;