HTML&CSS基础-内边框 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>内边距</title>

        <style type="text/css">

            .box1{

                width: 300px;

                height: 300px;

                background-color: red;

                /**

                 *     设置边框

                 */

                border: 10px yellow solid;

                /**

                 *     设置内边距(padding),指的是盒子的内容区与盒子边框之间的距离

                 *         一共有四个方向的内边距，如下所示:

                 *             padding-top

                 *             padding-bottom

                 *             padding-left

                 *             padding-right

                 *     内边距会影响到盒子的可见框的大小,元素的背景会延伸到内边距

                 *

                 *     盒子的大小由内容区，内边距，和边框共同决定

                 *     盒子可见框的宽度= "border-left-width" + "padding-left" + "width" + "border-right-width" + "padding-right"

                 *     盒子可见框的高度 = "border-top-width" + "padding-top" + "height" + "border-bottom-width" + "padding-bottom"

                 *

                 */

                /*padding-top: 10px;

                padding-bottom: 20px;

                padding-left: 40px;

                padding-right: 80px;*/

                /**

                 *     使用padding可以同时设置四个边框的样式，规则和border-width一致

                 */

                padding: 10px 20px 40px 80px;

            }

            .box2{

                width: 100%;

                height: 100%;

                background-color: deeppink;

            }

        </style>

    </head>

    <body>

        <div class="box1">

            <div class="box2"></div>

        </div>

    </body>

</html>

二.浏览器打开以上代码渲染结果

 

HTML&CSS基础-内边框的更多相关文章

  1. HTML&CSS基础-内联框架

    HTML&CSS基础-内联框架 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,在同一个路径中有两个网页 <!DOCTYPE html> < ...

  2. HTML&CSS基础-内联样式和内部样式表

    HTML&CSS基础-内联样式和内部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介 层叠样式表(Cas ...

  3. HTML&CSS基础-内联和块元素

    HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  4. HTML&CSS基础-外边框

    HTML&CSS基础-外边框  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML <!DOCTYPE html> <html> <h ...

  5. CSS入门（css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影）

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

  6. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  7. CSS实现多重边框和内凹圆角

    CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  8. HTML&CSS基础-边框简写属性

    HTML&CSS基础-边框简写属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> ...

  9. css样式之边框和内外边距

    1.css样式之边框:border 实心的边框: <!DOCTYPE html><html> <head> <meta http-equiv="co ...

随机推荐

  1. git初次登陆使用

    一. 安装git 二. 在当前项目根目录点击鼠标右键,出来下图: 点击进入git命令行界面. 三.初始化项目 git init 四. 添加所有文件到项目中 git add . 五. 尝试提交所有文件 ...

  2. cmake find_package说明

    CMake中find_package功能演示 find_package可以被用来在系统中自动查找配置构建工程所需的程序库.在linux和unix类系统下这个命令尤其有用.CMake自带的模块文件里有大 ...

  3. close yarn install --check-files

    To disable this check, please add `config.webpacker.check_yarn_integrity = false` to your Rails deve ...

  4. mysql慢查询日记

    mysql慢查询日记 <pre>#必须写到mysqld 注意给/tmp/showslowmysql.log 775权限 要写入权限[mysqld]#开启慢查询日记slow_query_lo ...

  5. pip修改成国内镜像源

    临时指定镜像源 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple seaborn 永久修改镜像源 linux下,修改 ~/.pip/pip ...

  6. 使用JMeter进行Apache Kafka负载测试

    1.卡夫卡负载测试 在这个Apache Kafka教程中,我们将了解如何使用Apache JMeter,如何在Apache Kafka上执行Kafka负载测试.此外,这个Kafka负载测试教程教我们如 ...

  7. python学习67-面向对象-封装

    封装 1.什么是封装? 根据名字寓意为:把一个东西装起来,然后密封,类似这样的面向对象的编程为封装. 真正的封装是明确的区别内外,只能在内部用,外部无法调用. 2. 举例: class Car: _s ...

  8. docker深入学习一

    docker是一个客户服务器结构的应用程序,其结构如下所示 其组成部分包括 container容器:是image的运行实例,一般container之间以及container与主机之间是相互隔离的,相当 ...

  9. json转义问题

    后端程序接受前台传递过来json 1正常json没有问题 比如  {"id":21,"userName":"2张天师","phon ...

  10. Luogu4705 玩游戏 分治FFT

    传送门 \(\begin{align*} Ans_k &= \sum\limits_{i=1}^n\sum\limits_{j=1}^m (a_i + b_j)^k \\ &= \su ...