【HTML5学习笔记】21:CSS盒模型 上

时间:2022-11-11 08:46:29

本节学习元素的尺寸、元素的边距以及内容溢出等问题。

元素尺寸
①weight宽度。②height高度。③min-width最小宽度。④min-height最小高度。⑤max-width最大宽度。⑥max-height最大高度。
最大最小主要是应对可能动态产生元素尺寸变大变小的问题,从而限制它的最大和最小。

元素内边距(会扩充总长度,而不是向内缩)
①padding-top向上。②padding-bottom向下。③padding-left向左。④padding-right向右。
简写形式,只写一个padding。则一个参数表示上下左右,两个参数表示上下和左右,三个参数表示上和左右和下,四个参数表示上和右和下和左。

元素外边距
①margin-top上边。②margin-bottom下边。③margin-left左边。④margin-right右边。
简写形式,只写一个margin。则一个参数表示上下左右,两个参数表示上下和左右,三个参数表示上和左右和下,四个参数表示上和右和下和左。

处理溢出
①overflow-x设置水平方向溢出。②overflow-y设置垂直方向溢出。③overflow简写属性。
溢出的处理主要由四种处理值:①auto如有溢出显示滚动条,否则不显示。②hidden如有溢出直接减掉。③scroll不管是否溢出都显示滚动条。④visible不管是否溢出都显示,亦是默认。

*测试代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS盒模型 上</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div>我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,我是html5,</div>
</body>
</html>
@charset "utf-8";
div{
background: silver;

width: 200px;
height: 200px;
min-width: 100px;
min-height: 100px;
max-width: 300px;
max-height: 300px;

/*padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;*/

/*padding: 10px;*/
/*padding: 10px 20px;*/
padding: 10px 20px 30px;

margin-top: 50px;
margin-bottom: 50px;
margin-left: 50px;
margin-right: 50px;

/*overflow-y: scroll;*/
overflow-y: auto;
/*overflow-y: hidden;*/
overflow-x: scroll;
}

运行结果:
【HTML5学习笔记】21:CSS盒模型 上