盒子

最新推荐文章于 2019-08-21 20:17:14 发布

weixin_30409849

最新推荐文章于 2019-08-21 20:17:14 发布

阅读量80

点赞数

原文链接：http://www.cnblogs.com/wanglan/p/10186459.html

版权

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素.

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: black; /* 盒子的背景颜色*/
            margin-bottom: 5px; /* 盒子之间的距离 */   
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

盒子的内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 50px;
            height: 50px;
            background-color: black; /* 盒子的背景颜色*/
            margin-bottom: 5px; /* 盒子之间的距离 */
            padding-top: 10px; /* 上边距 */
            padding-right: 10px; /* 右边距 */
            padding-bottom: 10px; /*下边距 */
            padding-left: 10px; /* 左边距 */
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

原图: 添加边距后的图

盒模型的边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 50px;
            height: 50px;
            background-color: white; /* 盒子的背景颜色*/
            margin-bottom: 5px; /* 盒子之间的距离 */
            border-style: solid; /*边框 */
            border-width: 5px; /* 边框的宽度 */
            /*border-width: medium; !*边框默认宽度*!*/
            border-color: red; /*边框颜色 */
            /* 单独设置属性*/
            border-top-style: dotted ;
            border-right-style: solid;
            border-bottom-style: double ;
            border-left-style: dashed;
             /*border-top-color: transparent; !* 穿透色,只穿透一层 *!*/
            border-radius: 30%; /*盒子角的角度 */
　　　    
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

盒模型的外框:值可以是负数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            border: 0;
        }
        .box{
            width: 100%;
            height: 50px;
            background-color: red; /* 盒子的背景颜色*/
            /*margin-bottom: 5px; !* 盒子之间的距离 *!*/
            margin-top: 100px;
            /*margin-bottom: 200px;*/
            margin-right: 200px;
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>

浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

转载于:https://www.cnblogs.com/wanglan/p/10186459.html

weixin_30409849

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素.不同部分的说明：Margin(外边距)- 清除边框外的区域，外边距是透明的。Border(边框)- 围绕在内边距...
复制链接

扫一扫