【CSS】【8】CSS盒子距离计算-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

【CSS】【8】CSS盒子距离计算

阅读量：5963 次

发布时间：2019-06-19

本文共 724 字，大约阅读时间需要 2 分钟。

一、看如下例子：

（1）HTML部分内容

<body>

<ul>

<li>复仇时刻</li>

<li class="widthborder">莫罗请求布雷斯把小孩丹尼带来神殿以避免恶魔夺取他的灵魂，作为回报他将驱除布雷斯身上的诅咒。</li>

</ul>

<ul>

<li>源代码</li>

<li class="widthborder">科尔突然惊醒发生自己在一辆高速行驶的列车上，他的身边坐着一个素不相识的女子正在与自己讲话。</li>

</ul>

</body>

（2）CSS内容

ul

{

backgroud:#ddd;

margin:15px;

padding:5px;

}

li

{

color:black;

background:#aaa;

margin:20px;

padding:10px;

list-style:none;

}

li.widthborder

{

border-style:dashed;

border-width:5px;

border-color:black;

margin-top:20px;

}

（3）计算下图的距离：

（4）解释：

在标准流中：I、行内元素之间的水平margin是累加的 II、块级元素之间的竖直margin是塌陷的 III、嵌套盒子若父亲没有指定大小，则默认设置其父盒子是恰好包含子盒子的大小；若父盒子指定了大小，当父盒子大小小于子盒子时，IE6会自动调整其父盒子的大小以适应包含关系，而firefox则不会自动调整。

本文转自qingkechina 51CTO博客，原文链接：http://blog.51cto.com/qingkechina/1261740，如需转载请自行联系原作者

你可能感兴趣的文章

有关Kali更新问题的解决方法。

[摘录]验证视图MAC失败 Validation of ViewState MAC Failed

[Python] numpy.random.rand

在澳大利亚为Mini团队实施Scrum2年总结

HDU Problem 5395 Gym Class 【拓扑排序+优先队列】

ExtJs combobox模糊匹配

线程中断、线程让步、线程睡眠、线程合并

Codeforces Round #532(Div. 2) A.Roman and Browser

bupt summer training for 16 #4 ——数论

【leetcode】145. Binary Tree Postorder Traversal

[CodeForces - 296D]Greg and Graph（floyd）

微信开发准备(四)--nat123内网地址公网映射实现

EasyUI Calendar 日历

26.Extjs 部门列表信息展示页面

maven学习手记 - 3

Window 命令行神器：cmder

数据库复习

unix 环境高级编程

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2024-12-29 01:37:39 当前IP: 3.15.144.186 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我