CSS盒模型使用技巧及相关问题

最新推荐文章于 2021-05-31 18:13:39 发布

小飞侠v科比

最新推荐文章于 2021-05-31 18:13:39 发布

阅读量152

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/kai46385076/article/details/100837820

版权

前端开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

盒模型使用技巧及相关问题

margin相关技巧

1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并

理解练习

1、制作一个600*100的盒子，边框1像素黑色，距离浏览器顶部100px，水平居中。
2、制作下面的菜单效果：
在这里插入图片描述

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位

理解练习
使用div标签制作如下布局:
在这里插入图片描述

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

.clearfix:before{
    content: '';
    display:table;
}

理解练习
分别使用margin间距和padding间距制作下面的例子：
在这里插入图片描述

盒模型的实际尺寸

按照下面代码制作页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的真实尺寸</title>
    <style type="text/css">
        .box01{width:50px;height:50px;background-color:gold;}
        .box02{width:50px;height:50px;background-color:gold;border:50px
         solid #000}
        .box03{width:50px;height:50px;background-color:gold;border:50px
         solid #000;padding: 50px;}
    </style>
</head>
<body>
    <div class="box01">1</div>
    <br />
    <div class="box02">2</div>
    <br />
    <div class="box03">3</div>
</body>
</html>

页面显示效果如下：
在这里插入图片描述
通过上面的页面得出结论：盒子的width和height设置的是盒子内容的宽和高，不是盒子本身的宽和高，盒子的真实尺寸计算公式如下：

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
理解练习
通过盒子模型的原理，制作下面的盒子：
在这里插入图片描述

小飞侠v科比

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型使用技巧及相关问题

盒模型使用技巧及相关问题margin相关技巧1、设置元素水平居中： margin:x auto;2、margin负值让元素位移及边框合并理解练习1、制作一个600*100的盒子，边框1像素黑色，距离浏览器顶部100px，水平居中。2、制作下面的菜单效果：外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的...
复制链接

扫一扫

专栏目录