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

来源:转载

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

元素尺寸
①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;}

运行结果:

分享给朋友:
您可能感兴趣的文章:
随机阅读: