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

来源：互联网发布：淘宝摄影店编辑：程序博客网时间：2024/06/14 20:11

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

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

运行结果：
这里写图片描述

阅读全文

0 0

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

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