CSS盒子模型

最新推荐文章于 2022-08-28 15:25:52 发布
最新推荐文章于 2022-08-28 15:25:52 发布
阅读量1k 收藏 8
点赞数 3
分类专栏： H5 学习 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjh_android/article/details/51468749
版权

本章内容

  1. CSS盒子模型-概述
  2. CSS盒子模型-内边距
  3. CSS盒子模型-边框
  4. CSS盒子模型-外边距
  5. CSS盒子模型-外边距合并
  6. CSS盒子模型-盒子模型应用
CSS盒子模型-概述
盒子模型的内容范围包括
margin、border、padding、content部分组成

这里写图片描述

CSS盒子模型-内边距
内边距
内边距在content外，边框内

属性
padding                     设置所有边距

padding-bottom              设置底边距

padding-left                设置左边距

padding-right               设置右边距

padding-top                 设置上边距

示例：
html:

<body>
    <table border="1">
        <tr>
            <td class="td1">内边距</td>
            <td class="td2">内边距</td>
            <td class="td3">内边距</td>
            <td class="td4">内边距</td>
        </tr>
    </table>
</body>

CSS

.td1{
    padding: 20px;
}
.td2{
    padding-left: 20px;
}
.td3{
    padding-right: 20px;
}
.td4{
    padding-bottom: 20px;
}

效果

这里写图片描述

CSS盒子模型-边框
CSS边框
我们可以创建出效果出色的边框，并且可以应用于任何元素
CSS边框
border-style:定义了10个不同的非继承样式，包括none

示例，例举了3个样式：
html：

<body>
    <p class="p1">CSS样式</p>
    <p class="p2">CSS样式</p>
    <p class="p3">CSS样式</p>
</body>

CSS：

.p1{
     border-style: double;
 }
.p2{
    border-style: dashed;
}
.p3{
    border-style: dotted;
}

效果：

这里写图片描述

CSS边框的单边样式
border-top-style
border-left-style
border-right-style
border-bottom-style
CSS边框宽度
border-width
border-top-width
border-bottom-width
border-right-width
border-left-width
CSS边框颜色
border-color
border-top-color
border-left-color
border-right-color
border-bottom-color
CSS3边框
border-radius               圆角边框

box-shadow                  边框阴影

border-image                边框图片

示例：
html

<body>
    <p class="p1">CSS3样式</p>
    <p class="p2">阴影</p>
</body>

CSS:

.p1{
    border-radius: 10px;
    width: 100px;
    padding: 10px;
    background-color: aqua;
    text-align: center;
    border: 2px solid blue;
}
.p2{
    background-color: aqua;
    width: 100px;
    height: 100px;
    text-align: center;
    box-shadow: 10px 10px 5px #FF0000;
}

效果：

这里写图片描述

CSS盒子模型-外边距
外边距
围绕在内容边框的区域就是外边距，外边距默认为透明区域
外边距接受任何长度单位、百分数值
外边距常用属性
margin              设置所有边距
margin-bottom       设置底边距
margin-left         设置左边距
margin-right        设置有边距
margin-top          设置上边距

padding&margin 示例：
html：

<body>
    <div class="container">
        <div class="bd">
            <div class="pd">
                <div class="content">hello</div>
            </div>
        </div>
    </div>
</body>

CSS:

body{
    margin: 0px;
}
.container{
    margin: 100px;
}
.bd{
    border-style: dotted;
}
.pd{
    padding: 100px;
}
.content{
    background-color: aqua;
}

效果

这里写图片描述

CSS盒子模型-外边距合并
外边距合并
外边距合并就是一个叠加的概念

这里写图片描述
举个栗子：
html：

<body>
    <div class="container">
        <div class="bd">
            <div class="pd">
                <div class="content">hello</div>
            </div>
        </div>
    </div>

    <div class="container1">
        <div class="bd1">
            <div class="pd1">
                <div class="content1">hello</div>
            </div>
        </div>
    </div>
</body>

CSS：

body{
    margin: 0px;
}
.container{
    margin: 50px;
}
.bd{
    border-style: dotted;
}
.pd{
    padding: 100px;
}
.content{
    background-color: aqua;
}

.container1{
    margin: 100px;
}
.bd1{
    border-style: dotted;
}
.pd1{
    padding: 100px;
}
.content1{
    background-color: aqua;
}

为了区分，两个最外层的div，一个margin是50，一个是100,效果：

这里写图片描述

理论上，两个div之间应该有150的间隔，实际上却是100，这体现了两个概念：
外边距叠加的概念
叠加以最大值为准
CSS盒子模型-盒子模型应用

示例模型：

这里写图片描述

html:

<body>
    <div class="title">
        <div class="title_content"></div>
    </div>
    <div class="body">
        <div class="body_img"></div>
        <div class="body_content">
            <div class="body_notify"></div>
        </div>
    </div>
    <div class="footing">
        <div class="foot_content"></div>
        <div class="foot_subnav"></div>
    </div>
</body>

CSS:

*{
    margin: 0px;
    padding: 0px;
}
.title{
    background-color: black;
    width: 100%;
    height: 50px;
}
.title_content{
    width: 75%;
    height: 50px;
    margin: 0px auto;
    background-color: aqua;
}
.body{
    margin: 20px auto;
    width: 75%;
    height: 700px;
    background-color: cornflowerblue;
}
.body_img{
    width: 100%;
    height: 200px;
    background-color: darkcyan;
}
.body_content{
    background-color: dimgray;
    width: 100%;
    height: 500px;
}
.body_notify{
    width: 100%;
    height: 50px;
    background-color: cornflowerblue;
}
.footing{
    margin: 20px auto;
    width: 75%;
    height: 120px;
    background-color: brown;
}
.foot_content{
    background-color: blueviolet;
    height: 80%;
    width: 100%;
}
.foot_subnav{
    background-color: coral;
    height: 20%;
    width: 100%;
}

效果：

这里写图片描述

OVER！

jia-huan
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css盒子模型
08-22
通过这个css盒子模型的实战，更好的理解css盒子模型
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
CSS之盒子模型
YDH的博客
03-27 288
1.CSS里的元素都可以理解为一个个的盒子（box model）。 每个盒子由四部分组成，从里到外分别为content(内容)、padding(内边距)、boder（边框）、magin（外边距）。 1.1内容区域 content area，是元素的真实内容，通常可以是图片、文本，或是视频播放器，可以通过CSS的width（宽）、height（高）来表示。 1.2 内边距区域 padding area存在于元素的外部，background-color属于该层级。。 1.3 边框区域 border area，
css模型视频,CSS盒子模型(一)
weixin_34006872的博客
08-03 202
盒子的概念我们的网页是由一个一个的标签元素组成的，这些标签在CSS的体系中可以理解成一个一个的盒子，一个标签就是一个盒子，理解这些盒子的原理有助于我们更好的实现CSS的布局和排版。CSS中广泛使用两种盒子:块级盒子和内联盒子，这两种盒子根据文档流和元素关系的不同会有不同的表现。块级盒子和内联盒子块级盒子在CSS中通过display: block属性将元素定义成块级盒子，在HTML的标签元素中，像d...
css模型详细讲解,css盒子模型讲解
weixin_42137723的博客
08-04 460
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。如图：代码演示：如图这个盒子宽widht:500px,高height：200px,外边距padding...
CSS样式----盒子模型（图文详解）
07-29 1089
盒子模型 盒子中的区域 一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。padding：内边距。border：边框。margin：外边距。 盒子模型的示意图：
CSS 盒子模型
m0_52861684的博客
08-28 1436
CSS 盒子模型总结。
CSS盒子模型详解
weixin_46048542的博客
04-05 4万+
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三
CSS盒子模型总结
热门推荐
码厩
09-27 6万+
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。 盒子的组成 一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
21.4 CSS 盒子模型
09-02
CSS盒子模型有两种不同的解析方式：标准盒模型（W3C Box Model）和IE盒模型（IE Quirk Mode）。在标准盒模型中，元素的总宽度和高度计算公式为：内容宽度/高度 + 内边距左右/上下 + 边框左右/上下 + 外边距左右/上下...
H5 轮播图 支持 无限轮播 + 手势滑动 + 放开回弹
jiahuan
01-09 6145
效果图 第一张效果图展示的是无限轮播的效果 第二张效果图,展示的是支持手势拖动,放开回弹的效果 具体可以看这个链接: H5APP 思路 在Android中,总有各种成型的控件,当然我在 H5中也找到了轮播的插件,但是貌似不支持手势之类的效果,就直接自己写了. APP中轮播的是4张图: imgUrl1, imgUrl2, imgUrl3, imgUrl4. 我则使用6个img控件,显示成:...
H5特性简介
jiahuan
05-11 1367
本章内容1. 了解HTML 2. HTML5相关知识 3. HTML5的新特性 4. intelliJ IDEA 的基础使用 5. HTML基础讲解 什么是HTML？HTML是用来描述网页的一种语言 HTML指超文本标记语言(Hyper Text Markup Language) HTML不是编程语言，是一种标记语言 HTML版本： 1991--HTML 1993--HTML+
CSS动画--页面特效
jiahuan
05-27 1209
本章内容 2D、3D转换 过渡 动画 多列 瀑布流效果 　2D、3D转换通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸转换是使元素改变形状、尺寸和位置的一种效果 可以使用2D、3D来转换元素2D转换方法translate() rotate() scale() matrix()3D转换方法rotateX() rotateY()示例：<body> <div>第一个di
HTML5框架、背景和实体
jiahuan
05-16 1198
本章内容 HTML5框架 HTML5背景 HTML5实体 HTML框架 框架标签(frame)： 框架对于页面的设计有着很大的作用 框架集标签(<frameset>) : 框架集标签定义如何将窗口分割为框架 每一个frameset定义一系列行或列 rows/cols的值规定了每行或每列占据屏幕的面积 常用标签： noresize: 固定框架大小 cols:列 rows:行 内联框架
京东首页
jiahuan
11-02 1052
前言终于在今天初步完成了 京东首页 的前端布局，纯 html/css，断断续续，坑坑哇哇写了两个星期。不过，代码会不断更新，JS 和 JQ 的使用也需要不断的练习。代码地址：https://github.com/cjhandroid/jdhomepage
css盒子模型知识点
最新发布
12-06
CSS盒子模型由四个部分组成：内容区域、内边距、边框和外边距。其中，内容区域包含了元素的实际内容，内边距是内容区域和边框之间的空白区域，边框是内边距和外边距之间的线条，外边距是边框和相邻元素之间的空白...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值