目录

• 1. CSS盒模型
  • 1.1 元素的尺寸
  • 1.2. 元素内边距 padding
  • 1.3. 元素外边距 margin
  • 1.4. 处理溢出overflow
  • 1.5. 元素的可见性Visibility
• 2. CSS元素的盒类型
  • 2.1. 块级元素(区块)
  • 2.2. 行内元素
  • 2.3. 行内-块元素
  • 2.4. 盒类型元素转换dispaly
• 3. CSS盒元素的浮动float

1. CSS盒模型

元素的尺寸

1.1 元素的尺寸

用于可能动态产生元素尺寸变大变小的问题，来限制最大最小值

div{
  background: silver;
  width: 200px;
  height: 200px;

  min-width: 100px;
  min-height: 100px;
}

<div>HTML5</dive>

1.2. 元素内边距 padding

div{
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  /*上下各空出10,20px*/
  padding: 10px 20px;
  /*上,右，下，左*/
  padding: 10px, 20px,10px,10px;
}

1.3. 元素外边距 margin

1.4. 处理溢出overflow

溢出的参数值

div{
  overflow-y: auto;
}

1.5. 元素的可见性Visibility

div{
  background: silver;
  width: 200px;
  height: 200px;
  visibility: visible;
}

2. CSS元素的盒类型

CSS盒模型中的display属性，可以更改元素本身盒类型，那么有哪些盒类型呢？

2.1. 块级元素(区块)

• 能够设置元素尺寸，隔离其他元素功能（有换行功能）的元素<div>, <p>

2.2. 行内元素

• 不能设置元素尺寸，它只能自适应内容、无法隔离其他元素，其他元素会紧跟其后:<span>, <d>

2.3. 行内-块元素

• 可以设置元素尺寸，但是无法隔离其他元素<img>

2.4. 盒类型元素转换dispaly

div{
  background: silver;
  width: 200px;
  height: 200px;
  /*转成了行内元素*/
  display: inline;

  /*转成了行内-块元素*/
  display: inline-block
}

3. CSS盒元素的浮动float

#a{
  background: maroon;
  float: left;
}
#b{
  background: green;
  float: right;
}
#c{
  background: blue;
  float: left;
}

原文地址：https://www.cnblogs.com/haochen273/p/10306653.html