【CSS3学习笔记】7：CSS盒模型上

最新推荐文章于 2017-09-01 23:28:26 发布

大桔骑士v

最新推荐文章于 2017-09-01 23:28:26 发布

阅读量516

点赞数

分类专栏： CSS 文章标签： html5 css 盒模型外边距内边距

本文链接：https://blog.csdn.net/SHU15121856/article/details/75091695

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

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