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. 为CentOS安装python3

    摘自:https://www.jianshu.com/p/7c2b62c37223 1. 安装依赖 不要复制往下看 yum install openssl-devel bzip2-devel expa ...

  2. [LeetCode] 350. Intersection of Two Arrays II 两个数组相交II

    Given two arrays, write a function to compute their intersection. Example 1: Input: nums1 = [1,2,2,1 ...

  3. python爬虫4猫眼电影的Top100

    1 查看网页结构 (1)确定需要抓取的字段 电影名称 电影主演 电影上映时间 电影评分 (2) 分析页面结构 按住f12------->点击右上角(如下图2)---->鼠标点击需要观察的字 ...

  4. sourcetree在mac上的使用

    sourcetree是git在Mac上管理代码的ui工具,当然你也可以使用命令直接使用git来管理代码,sourcetree下载下载地址:https://www.sourcetreeapp.com. ...

  5. [转帖]Introduction to Linux monitoring and alerting

    Introduction to Linux monitoring and alerting https://www.redhat.com/sysadmin/linux-monitoring-and-a ...

  6. Unity的学习笔记（摇杆制作）

    最近看到了一个很新颖的摇杆,就是按下后,会出现在按下的位置,并且拖着走的时候,到一定距离整个摇杆也会跟着走,于是自己测试做了一下这种摇杆 首先,先说一下我的摇杆预设体结构 代码挂在哪里都无所谓,关键是 ...

  7. Matlab M文件变量检测与传递

    M文件中变量的检测与传递 可变数量的输入输出变量(varargin,vararout): Matlab的输入输出变量数量可变,并具有以下特点: 可变输入输出变量必须在正常变量之后 varargin和v ...

  8. docker 容器和镜像常用命令整理

  9. php-sql-server-2017

    Download the Microsoft Drivers for PHP for SQL Server https://docs.microsoft.com/en-us/sql/connect/p ...

  10. isolate两三事

    1.1. 第一步:创建并握手 如前所述,Isolate 不共享任何内存并通过消息进行交互,因此,我们需要找到一种方法在「调用者」与新的 isolate 之间建立通信. 每个 Isolate 都暴露了一 ...