1、盒子模型

• padding 【内边距】
• margin 【外边距】

2、盒子边框

• border 【边框】

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线  

dotted：边框为点线

double：边框为双实线

• 圆角（CSS3）

  border-radius:（px、%）

3、盒模型

• content宽度和高度

​ 使用宽度属性width和高度属性height可以对盒子的大小进行控制。

​ width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工 作中最常用的是像素值。

​ 大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  
  /*内盒尺寸计算（元素实际大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

3、如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding 不会影响本盒子大小。

• 标准盒模型

• IE盒模型（怪异盒模型）

image.png

两种盒模型的区别：

image.png

​ 2、IE盒模型

​ 设置的宽高就是页面所占实际宽高，只会挤压内容宽高。

浮动

普通流(normal flow)

• 从上到下，从左到右

浮动(float)

• 选择器{float:属性值;}

缺点：不添加高度，后面的内容会顶上去。

• 清除浮动

​ 选择器{clear:属性值;}

1、额外标签法

缺点： 添加许多无意义的标签，结构化较差。

2、父级添加ov

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3、使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签了

使用方法：

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;（元素不可见）  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

4、使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
}
.clearfix:after {
 clear:both; 
}
.clearfix {
  *zoom:1;
}

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

image.png

定位

• 元素的定位属性

  1、边偏移

  边偏移属性	描述
  top	顶端偏移量，定义元素相对于其父元素上边线的距离
  bottom	底部偏移量，定义元素相对于其父元素下边线的距离
  left	左侧偏移量，定义元素相对于其父元素左边线的距离
  right	右侧偏移量，定义元素相对于其父元素右边线的距离

​ 2、定位类型

​ 选择器{position:属性值;}
position属性的常用值

元素的显示和隐藏

• visibility:hidden（隐藏） ** | display:none（消失，不展示）**

​ 区别：第一种不会改变元素的所占位置，只是隐藏元素的可见性；第二种是直接消失，下面的元素顶上来，不占位置。

• visibility:visible（显示） ** | display:block（显示）**

！！！用哪个隐藏就得用对应的显示出来！！！

元素的溢出

• overflow:值

  visible : 　不剪切内容也不添加滚动条。
  auto : 　 超出自动显示滚动条，不超出不显示滚动条
  hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉
  scroll : 　不管超出内容否，总是显示滚动条
  

• 文字不换行用省略号代替写法：
  

  image.png

鼠标样式cursor

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
</ul>

防止拖拽文本域resize

<textarea  style="resize: none;"></textarea>

去除图片底边的白边

• 给img 添加 **display：block;

弹性盒子

• 三栏平均分配

display : flex;
justify-content : space-between;