盒子模型笔记

1 、盒子模型的组成：border、content、padding、margin

• border 边框（边框宽度 样式 颜色）

  border-width：50px;

  border-style ：solid ; (solid:实线边框 dashed：虚线边框 dotted：点线边框、框 重点记忆这三个即可 )

  border-color：red;

  *** 边框的复合写法：border：50px solid red ;

  *** 边框分开写法：top /bottom/left/right

  border-top:50px solid red ;

  border-bottom:50px solid red ;

  ***合并相邻的边框：border-collapse：collapse；

  边框会影响盒子的大小：定义了盒子宽度高度以后，在加边框，盒子就会变大。

• content 内容

• padding 内边距：内容和边框的距离 ( top /bottom/left/right )

  padding-top:20px;

  ***padding的复合写法：

  • padding：5px; 代表上下左右的内边距都是5px

  • padding :5px 10px ; 代表上下内边距为5px ,左右内边距为10px

  • padding:5px 10px 20px ;代表上是5px,左右为10px,下为20px

  • padding:5px 10px 20px 30px ;代表上5，右10 ，下20，左30

    ***padding 也会影响盒子的大小。定义padding以后盒子会变大。

• margin 外边距：top /bottom/left/right

  • margin-top:20px；

    margin的复合写法和padding一样。

    ***外边距可以让块级盒子水平居中：

    1.盒子必须指定宽度（宽度可以为0）

    2.盒子左右外边距指定为auto

    margin：10px,auto ;

***行内元素或者行内块元素水平居中只需要给其父元素添加 text-align:center即可

• 嵌套块元素垂直外边距的塌陷：

  解决塌陷：1.为父元素定义边框

  border：1px solid transparent；（父元素设置一个1px 透明颜色的边框）

  2.为父元素定义内边距

  ***3.为父元素添加 overflow：hidden

• 清除内外边距：

  *{

  margin：0px;

  padding:0px；

  }

• 如何去除无序列表前边的小圆点：

  list-style : none;

圆角边框

语法：border-radius：20px; (20px为半径 可以为像素，也可以为百分比 )

• 可以跟4个值 顺序为从左上开始顺时针

• 可以只定义某一个角变化：border-top-left-radius (顺序不能变)

  盒子阴影

影子颜色的常用写法：rgba(0,0,0,.3) 0,0,0,0 是黑色，他相当于黑色的百分之3

*** 原先盒子没有阴影，当鼠标经过时添加影子

div:hover {

box-shaddow:10px 10px 10px -4px rgba(0,0,0,.3) ;

}

***文字阴影 text-shadow:10px 10px 6px rgba(0,0,0,.3) ;

浮动

1、标准流（普通流、文档流）：标签按照规定好的默认方式排列

• 块级元素独占一行div hr p h1 ol dl form table

• 行内元素：按顺序，从左到右比如span 、a、em、i

2、浮动：float

3、浮动特性：* 脱离标准普通流的控制移动到指定位置，俗称脱标

*浮动的盒子不再保留原先的位置

*浮动的盒子具有行内块元素的特点 （比如宽高）

如果行内元素有了浮动，就不需要再转化成块、行内块元素就可以直接给高和宽

*浮动的盒子之间没有缝隙

4、清除浮动：

• 额外标签法（隔墙法）

  在浮动元素末尾添加一个空标签，如<div style="clear:both"></div> ( 空标签必须为块级元素或者br 也可以)

• 父级添加overflow属性（hidden auto scroll）

  overflow：hidden

• 父级添加after 伪元素

  只需要复制这块代码，然后给父元素加上clearfix

  .clearfix:before,

  .clearfix:after {

      content: "";

      display: table;

  }

  .clearfix:after {

      clear: both;

  }

  .clearfix {

      *zoom: 1;

  }

• 父级添加双伪元素(同样复制)