构建静态页面 之 [ 盒子模型 ]

最新推荐文章于 2019-05-20 14:37:54 发布
最新推荐文章于 2019-05-20 14:37:54 发布
阅读量238 收藏 1
点赞数 1
原文链接：https://segmentfault.com/a/1190000016181149
版权

盒子模型

描述

  • 每一个元素都可以叫做是盒子模型

  • 盒子模型的组成

    • 内容区 - 元素中内容（文本、图片、等等）
    • 内边距 - 内容区到边框的距离
    • 边距 - 内容区的边界
    • 外边距 - 盒子与盒子之间的距离

border属性

  • 表示设置元素的边框

  • border属性是简写属性,可以分为

    • border-width - 表示边框的宽度
    • border-style - 表示边框的样式
    • border-color - 表示边框的颜色
    • 简写顺序: 边框宽度 边框样式 边框颜色

  • border属性也可以按照上、右、下、左四个方向进行划分来分别设置

    • 分别设置边框时，设置的顺序固定不变的：上、右、下、左
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blueviolet;

            /*
                border属性 - 表示设置边框
                 * 简写属性,可以分为
                  * border-width - 表示边框的宽度
                  * border-style - 表示边框的样式
                  * border-color - 表示边框的颜色
                 * 简写顺序: 边框宽度 边框样式 边框颜色
             */
            border: 10px solid black;

            /* border属性也可分开进行设置 */
            border-width: 10px;
            border-style: solid;
            border-color: black;

            /*
                border属性也可以按照上、右、下、左四个方向进行划分来分别设置
                * border-top - 表示设置上边框
                * border-right - 表示设置右边框
                * border-bottom - 表示设置下边框
                * border-left - 表示设置左边框
             */
            border-top: 10px solid black;
            border-right: 15px double gray;
            border-bottom: 20px dashed green;
            border-left: 25px dotted darkgreen;

            /*
                在设置边框时根据属性值个数不同，设置的效果也不同
                * 只有一个值时，四个方向同时设置
                * 再有两个值时，第一个值表示上下、第二个值表示左右
                * 再有三个值时，第一个值表示上、第二个值表示左右、第三个值表示下
                * 再有四个值时，第一个值表示上、第二个值表示右、第三个值表示下、第四个值表示左
                * 在设置边框时，设置的顺序固定不变的：上、右、下、左
             */
            border-width: 10px 20px 30px 40px;
            border-style: solid;
            border-color: black;
        }
    </style>
</head>
<body>
<div></div>
</body>

border-radius属性

  • 表示设置元素边框的圆角
  • 属性值表示为圆的半径
  • 当属性值等于元素宽度的一半时,会得到一个圆形
  • 也可以写多个属性值,顺序为: 左上角 右上角 右下角 左下角
<head>
    <meta charset="UTF-8">
    <title>边框的圆角</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        /*
            border-radius属性 - 表示设置边框圆角
             * 属性值表示为圆的半径
             * 当属性值等于元素宽度的一半时,会得到一个圆形
             * 也可以写多个属性值,顺序为: 左上角 右上角 右下角 左下角
         */
        #d1 {
            background-color: red;
            /* 设置圆角 */
            border-radius: 100px;
        }
        #d2 {
            background-color: green;
            /* 设置不规则圆角 */
            border-radius: 25px 150px 25px 0;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

padding属性

  • 表示设置元素内边距

  • 内边距可以分上、右、下、左、四个方向进行设置

    • 也可以同时写多个值分别设置，设置的顺序固定不变的：上、右、下、左
  • 内边距无法设置颜色，会显示与背景相同的颜色
  • 设置内边距时会改变元素本身的大小
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;

            /*
                padding属性 - 表示设置内边距
                * 内边距可以分四个方向进行设置
                 a. padding-top
                 b. padding-right
                 c. padding-bottom
                 d. padding-left
                * 也可以同时写多个值分别设置
                 a. 只有一个值时，四个方向同时设置
                 b. 再有两个值时，第一个值表示上下、第二个值表示左右
                 c. 再有三个值时，第一个值表示上、第二个值表示左右、第三个值表示下
                 d. 再有四个值时，第一个值表示上、第二个值表示右、第三个值表示下、第四个值表示左
                * 设置的顺序固定不变的：上、右、下、左
                * 内边距无法设置颜色，会显示与背景相同的颜色
                * 设置内边距时会改变元素本身的大小
             */
            padding: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
<div></div>
</body>

margin属性

  • 表示设置外边距
  • 外边距也可以分上、右、下、左、四个方向来分别进行设置
  • 在设置上外边距和左外边距时会影响到元素本身的显示位置
  • 在设置下外边距和右外边距时会影响到下一个相邻元素的显示位置
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        /*
            margin属性 - 表示设置盒子模型的外边距
            * 外边距也可以分上、右、下、左、四个方向来分别进行设置
             * 在设置上外边距和左外边距时会影响到元素本身的显示位置
             * 在设置下外边距和右外边距时会影响到下一个相邻元素的显示位置
         */
        #d1 {
            background-color: red;
            /* 设置上外边距和左外边距 - 会改变元素的显示位置 */
            margin-top: 100px;
            margin-left: 100px;
        }
        #d2 {
            background-color: blue;
            /* 外边距设置负值时会向相反的方向移动 */
            margin-top: -100px;

            /* 设置下外边距会改变下一个相邻元素的显示位置 */
            margin-bottom: 100px;
        }
        #d3, #d4 {
            display: inline-block;
        }
        #d3 {
            background-color: green;
            /* 外边距设置负值时会向相反的方向移动 */
            margin-right: -50px;
        }
        #d4 {
            background-color: blueviolet;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>

外边距的重叠

  • 两个垂直方向排列的相邻元素分别设置上外边距和下外边距时，显示出的效果并不是两个数值相加，而是只显示两个数值中大的
  • 在水平方向排列的相邻元素分别设置左外边距和右外边距时，不会出现外边距重叠的效果
<head>
    <meta charset="UTF-8">
    <title>外边距的重叠</title>
    <style>
        /*
            外边距的重叠
            * 表示两个垂直方向排列的相邻元素分别设置上外边距和下外边距
              显示出的效果并不是两个数值相加
              而是只显示两个数值中数值大的

            * 在水平方向排列的相邻元素分别设置左外边距和右外边距
              不会出现外边距的重叠效果
         */

        /* 垂直方向排列的相邻元素 */
        #top {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 设置下外边距 */
            margin-bottom: 100px;
        }
        #bottom {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 设置上外边距 */
            margin-top: 200px;
            /* 显示结果：两个元素之间的间距为 200px（应为300px） */
        }

        /* 设置水平方向排列的相邻元素 */
        #left, #right {
            display: inline-block;
        }
        #left {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 设置右外边距 */
            margin-right: 100px;
        }
        #right {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            /* 设置左外边距 */
            margin-left: 200px;
            /* 显示结果：两个元素之间的间距为 300px */
        }
    </style>
</head>
<body>
<div id="top"></div>
<div id="bottom"></div>
<div id="left"></div>
<div id="right"></div>
</body>

外边距的传递

  • 表示在父子结构中，如果子级设置上外边距，父级也会一起调整显示位置
  • 外边距传递的效果只会在父子结构中子级设置“上外边距”才会出现
解决方法

  • 通过为父级设置上内边距来调整子级想要显示的位置

    • 因为：子级的上外边距等于父级的上内边距
    • 注意：在设置内边距时会改变元素本身的显示大小
<head>
    <meta charset="UTF-8">
    <title>外边距的传递</title>
    <style>
        /*
            在父子结构中，如果子级设置上外边距，父级也会一起调整显示位置
             * 解决方法：通过为父级设置上内边距来调整子级想要显示的位置
              * 因为：子级的上外边距 == 父级的上内边距
             * 注意：在设置内边距时会改变元素本身的显示大小
             * 外边距传递的效果只会在父子结构中子级设置“上外边距”才会出现
         */
        #fu {
            width: 200px;
            /* height: 200px; - 调整显示大小，让元素正常显示 */
            height: 100px;
            background-color: red;
            /* 父级设置内边距调整子级的显示位置 - 注意调整过元素的显示大小 */
            padding-top: 100px;
        }
        #zi {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 子级设置上外边距时父级也会一同更改显示位置 */
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div id="fu">
    <div id="zi"></div>
</div>
</body>

元素的水平居中

  • 外边距也可以用来实现元素的水平方向居中

    • margin: 0 auto; - 固定写法
    • auto - 表示自适应
  • 外边距水平方向的属性值必须为 auto ， 垂直方向的属性值可以根据需求来设置
  • 在设置时，目标元素的宽度不能等于父级元素的宽度
<head>
    <meta charset="UTF-8">
    <title>元素水平居中</title>
    <style>
        /*
            外边距也可以用来实现元素的水平方向居中
             * margin: 0 auto; - 固定写法
             * auto - 表示自适应
             * 外边距水平方向的属性值必须为 auto ， 垂直方向的属性值可以根据需求来设置
             * 在设置时，目标元素的宽度不能等于父级元素的宽度
         */
        div {
            width: 500px;
            height: 200px;
            background-color: yellowgreen;
            /* 利用外边距实现元素水平方向的居中效果 */
            margin: 50px auto 50px;
        }
    </style>
</head>
<body>
<div></div>
</body>

box-shadow属性

  • 表示设置盒子模型的阴影

  • 属性值有

    • 水平方向偏移量
    • 垂直方向偏移量
    • 模糊度
    • 颜色
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            /*
                盒子模型 - 每一个元素都可以叫做是盒子模型
                 * 盒子模型的组成：
                    a.内容区 - 元素中内容（文本、图片、等等）
                    b.内边距 - 内容区到边框的距离
                    c.边距 - 内容区的边界
                    d.外边距 - 盒子与盒子之间的距离
             */
            /* box-shadow属性 - 表示设置盒子阴影 */
            box-shadow: 10px 10px 3px blue, -10px -10px 3px green;
        }
    </style>
</head>
<body>
<div></div>
</body>

box-sizing属性

  • 表示改变盒子模型的类型

content-box属性值

  • 表示标准盒子类型（默认值）

    1. 会改变元素的显示大小
    2. 最终显示宽度 = 宽度 + 内边距（左、右） + 边框（左、右）
    3. 最终显示高度 = 高度 + 内边距（上、下） + 边框（上、下）

border-box属性值

  • 表示怪异盒子类型

    1. 不会改变元素的显示大小
    2. 最终显示宽度 = 宽度
    3. 最终显示高度 = 高度
<head>
    <meta charset="UTF-8">
    <title>盒子模型的类型</title>
    <style>
        /*
            box-sizing属性 - 表示改变盒子的类型
            * content-box属性值 - 表示标准盒子类型（默认值）
             * 会改变元素的显示大小
             * 最终显示宽度 = 宽度 + 内边距（左、右） + 边框（左、右）
             * 最终显示高度 = 高度 + 内边距（上、下） + 边框（上、下）
            * border-box属性值 - 表示怪异盒子类型
             * 不会改变元素的显示大小
             * 最终显示宽度 = 宽度
             * 最终显示高度 = 高度
         */
        #d1 {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 标准盒子类型 */
            box-sizing: content-box;
            border: 10px solid black;
            padding: 50px;
            /* 最终显示：320 X 320 */
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 怪异盒子类型 */
            box-sizing: border-box;
            border: 10px solid black;
            padding: 50px;
            /* 最终显示：200 X 200 */
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
weixin_33937913
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML静态页面之（盒子模型）
lin123_00的博客
06-26 725
盒子模型 描述 每一个元素都可以叫做是盒子模型 盒子模型的组成 内容区 - 元素中内容（文本、图片、等等） 内边距 - 内容区到边框的距离 边距 - 内容区的边界 外边距 - 盒子与盒子之间的距离 border属性 表示设置元素的边框 border属性是简写属性,可以分为 border-width - 表示边框的宽度 border-style - 表示边框的样式 border-color - 表示边框的颜色 简写顺序: 边框宽度 边框样式 边框颜色
静态页面设计
10-09
本实例适合初学者，尤其是作为期末作业，可以让你深入理解并实践如何构建一个基本的静态网页。 **HTML（HyperText Markup Language）** 是构成网页的基本元素，它是网站内容的结构化语言。HTML文件由一系列的元素...
【静态页面架构】CSS之盒子模型
weixin_33985507的博客
08-28 154
CSS架构 盒子模型； 以内容区(显示文本和图像) 内边距(内容区至边距的距离) 边距(内容区的边界) 外边距(元素的边框之间的距离) 1.边距； border属性； 简写属性用来设置边距的上(top)右(right)下(bottom)左(left)。宽度，颜色和样式 <style> div{ ...
静态页面模范
cccpaopao的博客
08-22 177
最后关于一个html和css的作业，从切图到完成总共花了2天的时间，过程还是比较艰辛。 首先页面实现图如下 网页说明：左边两列浏览器高度然后浏览器窗口固定，背景白色的内容区左边部分固定宽度，右边宽度自适应。主要是一个网页聊天以及类型朋友圈的网页。 总结： 1.其中运用了之前学过的淘宝的双飞翼模型中的一部分，解决宽度自适应问题。 2.这次更语义化，正确使用标签，而不只是为了完成网页样子...
HTML---盒子模型
OlnyLove_琳的博客
03-31 930
盒子模型 盒子模型的结构 &lt;style type="text/css"&gt; #bigbox{ height:300px; width:400px; background-color:#CC9966; border:5px solid #FFFF00; /*边框*/ } #samllbox{ ...
实现页面静态化（模型数据+模板=静态化）
qq_37653525的博客
05-20 1171
模型数据 //1.获取页面模型数据 private Map getModelByPageId(String pageId){ CmsPage cmsPage = findById(pageId); if (cmsPage==null){ //页面不存在 ExceptionCast.cast(CmsCode.CM...
HTML网页设计基础笔记 • 【第7章 盒子模型】
01-08
本章深入讲解了HTML网页设计中的盒子模型，从理论到实践，涵盖了盒子模型的基本概念、大小计算、元素间的关系，以及浮动和定位的使用方法，这些都是构建复杂网页布局不可或缺的知识。理解和掌握这些内容，对于网页...
static-pages:小型静态页面
03-27
在构建小型静态页面时，CSS（层叠样式表）是至关重要的组成部分，它负责定义网页的布局、颜色、字体等视觉样式。以下是一些关于CSS和静态页面开发的知识点： 1. **盒模型**：理解CSS盒模型是布局设计的基础。它包括...
教育类网站 html+css静态页面.zip
07-30
【教育类网站 html+css静态页面.zip】是一个包含纯HTML和CSS构建的教育类网站的源代码包。这个项目对于初学者来说是一个很好的实践案例，因为它展示了如何利用这两种技术来创建一个具有教育主题的网站布局。以下是这...
小米官网-静态页面（包括Css,HTML)
10-17
7. Flexbox弹性盒子模型，用于实现灵活的布局。 8. Grid布局，用于创建二维网格布局系统。 9. CSS响应式设计，利用媒体查询@media实现不同设备上的适配。 此外，虽然项目标签中提到了"javascript"，但由于描述中未...
100多套HTML静态网页模板.zip
06-04
100多套HTML静态网页模板.zip，纯html界面100套，拿来即用
html静态网站模型，仅供参考
04-18
小网页，仅供参考，是关于汽车的网站，在dreamver里制作的
编写一个关于浏览器盒子模型的方法
weixin_34297704的博客
02-25 113
<scripttype="text/javascript"> //win编写一个关于浏览器盒子模型的方法 //如果只传attr没有传value默认是获取； //如果两个都传了默认是设置 functionwin(attr,value){ if(value==="undefined"){ ...
深入理解CSS盒子模型
从Web开始...
08-27 368
他人翻译,附上原文地址：http://reference.sitepoint.com/css/boxmodel 深入理解CSS盒子模型（The CSS Box Model） 如果你了解盒子模型（box model）的概念，了解它是如何决定某一个元素的最终尺寸的话，会有助你理解一个元素如何在网页上定位的。盒子模型主要适用于块级元素。顺便提一个与此相关的概念：行内布局模型（inline l...
Web网页模型---从静态到动态
weixin_33882443的博客
11-24 311
1 . 提供静态页面模型(图上) web服务器仅仅将将请求URL对应的内容返回给发请求的浏览器.即web服务器不会的所请求的URL内容做任何修改! 2 . 提供动态页面模型 动态网页的内容直到网页被请求时才创建[图中].通常web服务器和动态网页源代码的执行是分离的. 也就是说,当一个web请求到达时, web...
Web前端开发基础 第四课（盒代码模型）
weixin_34228387的博客
07-21 142
盒模型代码简写 还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下： margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/ 通常有下面三种缩写方法: 1、如果...
盒子模型应用页面布局
weixin_30924087的博客
04-14 518
1,达到的效果 2，先用div盒子，把结构排出来 3，调整紧贴盒子间的距离（由于都左浮动），不是想使用外边距和内边距，在盒子大小固定情况下，利用设置内容的大小，起到间隔作用。 4，利用盒子嵌套，调整里面（红色盒子的位置）位置，使内容达到布局的要求。 5，完成效果 转载于:https://www.cnblogs.com/dengfei201766/p/883543...
CSS盒子模型之详解
weixin_30315905的博客
10-12 123
前言： 盒子模型是css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。一、css盒子模型概念 CSS盒子模型又称框模型(Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding...
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
HTML与网页设计基础：注释标签与网页构建
而CSS（层叠样式表）则负责网页的外观和布局，包括盒子模型、浮动、定位以及字体和背景的设置。JavaScript（JS）作为客户端脚本语言，可以操作CSS属性，实现网页的动态效果，如响应式交互和动画。 本课程主要教授...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值