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. css3逐帧动画

    写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是属于连贯性的ease动画.我们熟悉的animation动画有ease.ease-in.ease-out.li ...

  2. 如何使APP开机自启动

    方案一 将app做成系统应用,直接安装在 system/app 目录下 具体步骤为: 1.在AndroidManifest文件中,添加 android:sharedUserId="andro ...

  3. [LeetCode] 548. Split Array with Equal Sum 分割数组成和相同的子数组

    Given an array with n integers, you need to find if there are triplets (i, j, k) which satisfies fol ...

  4. Shell中要如何调用别的shell脚本，或别的脚本中的变量，函数

    在Shell中要如何调用别的shell脚本,或别的脚本中的变量,函数呢? 方法一:   . ./subscript.sh 方法二:   source ./subscript.sh 注意: 1.两个点之 ...

  5. 08 Tomcat+Java Web项目的创建和War的生成

    1.web服务器软件:服务器:安装了服务器软件的计算机服务器软件:接收用户的请求,处理请求,做出响应 * web服务器软件:接收用户的请求,处理请求,做出响应. 在web服务器软件中,可以部署web项 ...

  6. Android--打开指定程序（微博/微信/QQ等）

    Intent intent = new Intent(); ComponentName cmp = new ComponentName("com.sina.weibo"," ...

  7. （二）pdf的构成综述

    引自:https://blog.csdn.net/steve_cui/article/details/81948486 一个pdf文件主要是由4部分构成:文件头.文件体.交叉引用表.文件尾 文件头:用 ...

  8. 生物网络，RNA 与疾病关联分析

    题目: 大数据时代下基于网络算法和机器学习的非编码RNA 相关预测研究摘要:最近越来越多的生物实验表明非编码RNA 具有非常重要的生物学功能,参与细胞中的多项重要生命活动,调控许多基本且重要的生物过程 ...

  9. Oracle开放1521端口 telnet不通解决办法

    在windosw虚拟机server2012上安装Oracle数据库后,远程连接失败,报 java.sql.SQLException: The Network Adapter could not est ...

  10. 普通element ui table组件的使用

    1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...