CSS盒模型[上]

来源：互联网发布：软件质量分析报告编辑：程序博客网时间：2024/05/17 16:16

效果：

index.html:

<!DOTTYPE html><html lang ="zh-cn"><head>    <meta charset="utf-8">   <title>CSS盒模型[上]</title>   <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</div></body></html>

style.css:

@charset "utf-8";body{margin:0;width:600px;border:1px solid red;}div{background:silver;width:200px;height:200px;width:50%;min-width:100px;min-hight:100px;max-width:500px;max-hight:500px;///元素内边距padding-top:10px;pedding-bottom:10px;padding-left:10px;padding-right:10px;padding:10px;padding:10px 20px;padding:10px 20px 30px;///不常用padding:10px 20px 30px 40px///顺时针方向///元素外边距margin-top:50px;margin-left:50px;///溢出处理overflow-y:visible;overflow-y:auto;overflow-y:hidden;overflow-y:scroll;}

ppt:

0 0