HTML和CSS前端教程05-CSS盒模型

目录

• 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 元素的尺寸

属性	值	说明
width	auto、长度值或百分比	元素的宽度
height	auto、长度值或百分比	元素的高度
min-width	auto、长度值或百分比	元素的最小宽度
min-height	auto、长度值或百分比	元素的最小高度
max-width	auto、长度值或百分比	元素的最大宽度
max-height	auto、长度值或百分比	元素的最大高度

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

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

溢出的参数值

值	说明
auto	浏览器自动处理溢出内容，用滚动条
hidden	有溢出，直接剪掉
scroll	不管是否溢出，都有滚动条
visible	默认值，不管是否溢出，都显示

div{
  overflow-y: auto;
}

1.5. 元素的可见性Visibility

属性值	说明
visible	默认值，元素在页面上可见
hidden	元素不可见，但会占据空间
collapse	元素不可见，隐藏表格的行列。如果不是表格，则和hidden一样

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

值	说明
block	盒为块级元素
inline	盒为行内元素
inline-block	盒为行内-块元素
none	盒子不可见，不占位

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

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

3. CSS盒元素的浮动float

值	说明
left	浮动元素靠左
right	浮动元素靠右
none	禁止浮动

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