<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:50px;
height:100px;
border: 1px solid red;
overflow: scroll;
}
</style>
</head>
<body>
盒模型:每一个html元素都可以当做一个盒模型
1.一个盒子本身的特点(boder,padding,内容区域)
2.盒子与盒子之间的关系(margin)
盒子的结构:
1.content(内容区域):展示文字或图片的地方
2.padding(内边距):内容与边框线的距离
3.border(边框):元素的边框
4.margin(外边距):元素与元素之间的距离
content特点:
1.width:内容名的宽度
2.height:内容的高度
3.overflower 当内容超出规定的高度后的处理
三个值:
overflower:hidden:超出部分影藏
overflower:srcoll 在水平或垂直产生滚动条
<div>超出部分影藏在水平或垂直产生滚动条</div>
元素宽高的计算:
元素的高度 = border-top+padding-top+height+
padding-bottom+border-bottom
元素的宽度 = border-left+padding-left+width
+padding-right+border-right
</body>
</html>
