CSS盒子模型

盒子模型

css盒子模型

• 所有的页面元素都可以看成一个盒子，并且占据着一定的页面空间
• 盒子模型是由content(内容)、 padding(内边距)、 margin(外边距)、 border(边框)这四个属性组成的。

border边框

• 复合样式：border:边框大小 类型 颜色;border:5px solid #006633;

• border-width: 5px;        大小
  border-style: solid;  类型
  border-color: red;        颜色
  border-top:0px;       /*去除上边框*/
  border-top:none;      /*去除上边框*/

• border-width 边框大小

  • 四个值：上 右 下 左(顺时针)
  • 三个值：上 左右 下
  • 二个值：上下 左右
  • 一个值：四个方向值相等
  • border-top-width 顶部边框大小
  • border-right-width 右边框大小
  • border-bottom-width 底部边框大小
  • border-left-width 左边框大小

• border-style 边框类型

  • solid 实线
  • dashed 虚线
  • dotted 点线
  • double 双边框
  • border-top-style 顶部边框类型
  • border-right-style 右边框类型
  • border-bottom-style 底部边框类型
  • border-left-style 左边框类型

• border-color 边框颜色

  • 四个值：上 右 下 左(顺时针)
  • 三个值：上 左右 下
  • 二个值：上下 左右
  • 一个值：四个方向颜色一样
  • border-top-color 顶部边框颜色
  • border-right-color 右边框颜色
  • border-bottom-color 底部边框颜色
  • border-left-color 左边框颜色

  border-radius:50% 圆角正方形

  border-radius: 20px 40px

• padding内边距，边框与内容之间的距离

  • 四个值：上 右 下 左(顺时针)
  • 三个值：上 左右 下666
  • 二个值：上下 左右
  • 一个值：四个方向值相等
  • padding-top 顶部内边距
  • padding-right 右内边距
  • padding-bottom 底部内边距
  • padding-left 左内边距
  • span行内元素：加panding，左右有效，上下无效，没有占位置（会盖住div）

  ​

• margin外边距，元素与其他元素的距离（边框以外的距离）

  • margin-top 顶部外边距
  • margin-right 右外边距
  • margin-bottom 底部外边距
  • margin-left 左外边距
  • 自动水平居中

  • margin:auto; 左右居中

  • margin:20px auto; 上下20px 左右居中

  • margin:20px auto 0; 上20px 左右居中 下0

    ​

…垂直方向，取两者较大的margin

…水平，取两个margin的和

overflow:hidden ：解决内边距重叠问题(防止移动里面元素，外面元素边框跟随移动)
给爸爸加(加在浮动元素的父元素上面) 也可以清除浮动

盒子大小的计算

• content+border+padding盒子大小 = 样式宽 + 内边距 + 边框

• 盒子宽度 = 左border+左padding+width+右padding +右border

• 盒子高度 = 上border+上padding+height+下padding+下border

  ​

float浮动

• 浮动的定义：使元素脱离文档流 ，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

• 文档流 是文档中可显示对象在排列时所占用的位置/空间（在页面中占位置）

• 脱离文档流 ：在页面内中不占位置

  ​

• 浮动的一般情况

  • float:left;
  • float:right;

• 清除浮动

  • overflow: hidden;

  • clear:both;

  • .clearfix:after{
        content: "";
        display: block;
        clear: both;
    }
    
    # 有多个浮动的时候，只需加在某元素的class上就行
    
    时下主流

position定位

• 规定元素的定位类型

• static 静态定位（没有定位），默认

• relative 相对定位，相对于其正常位置进行定位

• relative: 给了方向值才有作用，不给值的话相当于没起作用，它占的位置还是原来的位置，不会占用移动之后的位置(元素走了，在原来位置还占一个坑)

  position:relative

  left:50px;

  • 不会脱离文档流
  • 不影响元素本身的特性
  • 如果没有定位偏移量，对元素本身没有任何影响

• absolute 绝对定位，参考最近非static定位的父级进行定位

  • 使元素完全脱离文档流
  • 没有定位父级则相对于body(整个文档)发生偏移
  • 绝对定位一般配合相对定位使用

• fixed 固定定位，相对于浏览器窗口进行定位。可视窗口的固定

• 方位词

  • left: 距离左边的距离
  • right: 距离右边的距离
  • top:距离顶部的距离
  • bottom:距离底部的距离
  • z-index 规定定位的层级（默认0）1
  • 值：number 值越大层级越高