6、盒模型和文本溢出

作者: calvinbj | 来源:发表于2019-02-25 20:52 被阅读0次

第一节盒模型

1、盒模型的概念

2、盒模型的组成

3、盒模型的相关属性

边框样式：solid/dashed/dotted/double

下面示例采用double（双线）展示：（border-width至少为3px）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box{width: 600px;height: 300px;background: #f00;border: 10px #000 double;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

示例：其他三个方向都有边框，只有顶端的方向没有边框。
代码里，先把四个方向的边框线都写上，然后去掉其中一个边框线。

<style type="text/css">
    .box{border: 10px #000 double;border-top: none;width: 600px;height: 300px;background: #f00;}
</style>

示例：设置不同颜色的边框线。

<style type="text/css">
    .box{border: 10px #000 solid;border-color: #0ff #0f0 #00f #ff0;width: 600px;height: 300px;background: #f00;}
</style>

示例：上下两边实线，左右两边虚线。

<style type="text/css">
    .box{border: 10px #000 solid;border-style: solid dashed;width: 600px;height: 300px;background: #f00;}
</style>

总结例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box{width: 960px;background: #eee;border:5px #000 solid;overflow: hidden; }
    .box_l{width: 480px;height: 240px;background: #f00;float: left;}
    .box_c,.box_r{width: 240px;height: 240px;float: left;}
    .box_c{background: #f1f1f1;}
    .box_r{background: #fbfbfb url(images/2.jpg) no-repeat right bottom;}
    </style>
</head>
<body>
    <div class="box">
        <div class="box_l"></div>
        <div class="box_c"></div>
        <div class="box_r"></div>
</div>
</body>
</html>

下面的padding例子，要想把每个子div设置padding值，那么相应的要缩小子div的宽和高的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box{width: 960px;background: #eee;border:5px #000 solid;overflow: hidden; }
    .box_l{width: 440px;height: 200px;background: #f00;float: left;padding: 20px;}
    .box_c,.box_r{width: 200px;height: 200px;float: left;padding: 20px;}
    .box_c{background: #f1f1f1;}
    .box_r{background: #fbfbfb url(images/2.jpg) no-repeat right bottom;}
    </style>
</head>
<body>
    <div class="box">
        <div class="box_l">中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。</div>
        <div class="box_c">中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。</div>
        <div class="box_r">中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。</div>
</div>
</body>
</html>

同理，如果给子div加边框border，也要相应的减去宽和高的值。

{margin:0 auto;}使<h1>标签在浏览器中横向居中。
其中，关于居中，还有两个属性：text-align：center和line-height：
下面是例子代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box1{width: 100px;height:100px;background: #f00; margin-bottom: 50px;}
    .box2{width: 200px;height:200px;background: #0f0;}
    h1{width: 800px; height: 200px;background: #0ff;text-align: center;line-height: 200px;margin: 0 auto;}
    </style>
</head>
<body>
        <div class="box1"></div>
        <div class="box2"></div>
        <h1>北京欢迎你！</h1>
</body>
</html>

注意事项1（例子）
*{margin: 0;padding: 0;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    .box1{width: 100px;height:100px;background: #f00; margin-bottom: 50px;}
    .box2{width: 200px;height:200px;background: #0f0;}
    h1{width: 800px; height: 200px;background: #0ff;text-align: center;line-height: 200px;}
    </style>
</head>
<body>
        <div class="box1"></div>
        <div class="box2"></div>
        <h1>北京欢迎你！</h1>
</body>
</html>

注意事项2（例子）
*相邻兄弟元素在垂直方向上的margin值会出现融合的情况，融合后会取两个元素里较大的值作为融合后的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box1{width: 100px;height:100px;background: #f00; margin-bottom: 50px;}
    .box2{width: 200px;height:200px;background: #0f0;margin-top: 100px;}
    h1{width: 800px; height: 200px;background: #0ff;text-align: center;line-height: 200px;}
    </style>
</head>
<body>
        <div class="box1"></div>
        <div class="box2"></div>
        <h1>北京欢迎你！</h1>
</body>
</html>

上面的代码中，我们可以看到两个兄弟元素之间出现：
.box1的属性margin-bottom:50px;
.box2的属性margin-top:100px;
结果如下：

注意事项3（例子）
当父级子级元素都设置了margin时，子级的margin值会传递到父级。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box1{width: 100px;height:100px;background: #f00; margin-bottom: 50px;}
    .box2{width: 200px;height:200px;background: #0f0;margin-top: 100px;}
    h1{width: 800px; height: 200px;background: #0ff;text-align: center;line-height: 200px;}
    .box3{width: 300px; height: 300px;background: #ff0;}
        .box4{width: 100px;height: 100px;background: #00f;margin-top: 20px;}
    </style>
</head>
<body>
        <div class="box1"></div>
        <div class="box2"></div>
        <h1>北京欢迎你！</h1>
        <div class="box3">
            <div class="box4"></div>
        </div>
</body>
</html>

margin传递解决方法：给父级使用overflow：hidden属性

.box3{width: 300px; height: 300px;background: #ff0;overflow: hidden;}
        .box4{width: 100px;height: 100px;background: #00f;margin-top: 20px;}

总结

以上各种情况示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .box{width: 200px;height:300px;border: 1px #000 solid;float: left;margin-right: 10px;}
    .vi{overflow: visible;}
    .hi{overflow: hidden;}
    .sc{overflow: scroll;}
    .au{overflow: auto;}
    .box_zi{width: 170px;height: 250px;border:1px #f00 solid; }
    .in{overflow: inherit;}
    </style>
</head>
<body>
        <div class="box">中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。中国是个多民族的国家。在从上古至近代的悠久岁月中，各族人民共同创造了祖国的优越的文字文化。
        关于汉字的起源，中国古代文献上有种种说法，如“结绳”、“八卦”、“图画”、“书契”等，古书上还普遍记载有黄帝史官仓颉造字的传说。现代学者认为，成系统的文字工具不可能完全由一个人创造出来，仓颉如果确有其人，应该是文字整理者或颁布者。</div>
        <div class="box vi">中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。中国是个多民族的国家。在从上古至近代的悠久岁月中，各族人民共同创造了祖国的优越的文字文化。
        关于汉字的起源，中国古代文献上有种种说法，如“结绳”、“八卦”、“图画”、“书契”等，古书上还普遍记载有黄帝史官仓颉造字的传说。现代学者认为，成系统的文字工具不可能完全由一个人创造出来，仓颉如果确有其人，应该是文字整理者或颁布者。</div>
        <div class="box hi">中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。中国是个多民族的国家。在从上古至近代的悠久岁月中，各族人民共同创造了祖国的优越的文字文化。
        关于汉字的起源，中国古代文献上有种种说法，如“结绳”、“八卦”、“图画”、“书契”等，古书上还普遍记载有黄帝史官仓颉造字的传说。现代学者认为，成系统的文字工具不可能完全由一个人创造出来，仓颉如果确有其人，应该是文字整理者或颁布者。</div>
        <div class="box sc">中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。中国是个多民族的国家。在从上古至近代的悠久岁月中，各族人民共同创造了祖国的优越的文字文化。
        关于汉字的起源，中国古代文献上有种种说法，如“结绳”、“八卦”、“图画”、“书契”等，古书上还普遍记载有黄帝史官仓颉造字的传说。现代学者认为，成系统的文字工具不可能完全由一个人创造出来，仓颉如果确有其人，应该是文字整理者或颁布者。</div>
        <div class="box au">中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。中国是个多民族的国家。在从上古至近代的悠久岁月中，各族人民共同创造了祖国的优越的文字文化。
        关于汉字的起源，中国古代文献上有种种说法，如“结绳”、“八卦”、“图画”、“书契”等，古书上还普遍记载有黄帝史官仓颉造字的传说。现代学者认为，成系统的文字工具不可能完全由一个人创造出来，仓颉如果确有其人，应该是文字整理者或颁布者。</div>
        <div class="box sc">
            <div class="box_zi in">
        中国文字史是中国文字长达数千年的发展和演变的历史过程，依照发展的时间顺序，基本可以分为先秦、秦、汉、唐时期文字、宋元时期、明清文字、中国近代文字和中国现代文字等。中国是个多民族的国家。在从上古至近代的悠久岁月中，各族人民共同创造了祖国的优越的文字文化。
        关于汉字的起源，中国古代文献上有种种说法，如“结绳”、“八卦”、“图画”、“书契”等，古书上还普遍记载有黄帝史官仓颉造字的传说。现代学者认为，成系统的文字工具不可能完全由一个人创造出来，仓颉如果确有其人，应该是文字整理者或颁布者。
            </div>
        </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    p{width: 300px;border: 1px #000 solid;}
    .no{white-space: normal;}
    .pr{white-space: pre;}
    .nowrap{white-space:  nowrap;}
    .pw{white-space: pre-wrap;}
    .pl{white-space: pre-line;}
    .in{white-space: inherit;}
    .box{width: 200px;height: 200px;border: 1px #f00 solid;}
    </style>
</head>
<body>
    <p>中国文字史
    是中国文字长达     数千年的发展和    演变的历史过程。</p>
    <p class="no">中国文字史
    是中国文字长达     数千年的发展和    演变的历史过程。</p>
    <p class="pr">中国文字史
    是中国文字长达     数千年的发展和    演变的历史过程。</p>
    <p class="nowrap">中国文字史
    是中国文字长达     数千年的发展和    演变的历史过程。</p>
    <p class="pw">中国文字史
    是中国文字长达     数千年的发展和    演变的历史过程。</p>
    <p class="pl">中国文字史
    是中国文字长达     数千年的发展和    演变的历史过程。</p>
    <div class="box nowrap">
        <p class="in">中国文字史
    是中国文字长达     数千年的发展和    演变的历史过程。</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{width: 600px;border: 1px #000 solid;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
        .uu li{width: 300px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background: url(images/3.jpg) no-repeat left 50%;padding-left: 20px; font-size: 24px;}
    </style>
</head>
<body>
    <div class="box">寒暑表降到冰点下十八度的时候，我们也是在廊下睡觉。每夜最熟识的就是天上的星辰了。也不过是点点闪烁的光明，而相看惯了，偶然不见，也有些想望与无聊。</div>
    <ul class="uu">
        <li>寒暑表降到冰点下十八度的时候，我们也是在廊下睡觉。</li>
        <li>寒暑表降到冰点下十八度的时候，我们也是在廊下睡觉。</li>
        <li>寒暑表降到冰点下十八度的时候，我们也是在廊下睡觉。</li>
        <li>寒暑表降到冰点下十八度的时候，我们也是在廊下睡觉。</li>
    </ul>
</body>
</html>

6、盒模型和文本溢出

第一节盒模型

1、盒模型的概念

2、盒模型的组成

3、盒模型的相关属性

边框样式：solid/dashed/dotted/double

总结例子

同理，如果给子div加边框border，也要相应的减去宽和高的值。

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

6、盒模型和文本溢出

第一节 盒模型

1、盒模型的概念

2、盒模型的组成

3、盒模型的相关属性

边框样式：solid/dashed/dotted/double

总结例子

同理，如果给子div加边框border，也要相应的减去宽和高的值。

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第一节盒模型