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. 【LeetCode算法-38】Count and Say

    LeetCode第38题 The count-and-say sequence is the sequence of integers with the first five terms as fol ...

  2. LeetCode：缺失的第一个正数【41】

    LeetCode:缺失的第一个正数[41] 题目描述 给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0] 输出: 3示例 2: 输入: [3,4,-1,1] ...

  3. Mysql中TO_DAYS函数

    原文地址:https://blog.csdn.net/sinat_19569023/article/details/50417273 SQL博大精深 TO_DAYS函数 返回一个天数! 啊哈?什么天数 ...

  4. 【视频开发】Nvidia硬解码总结

    Nvidia硬解码总结 1.前言 本文的主要目的是对近期进行的nvidia硬件解码工作的记录和总结.至于为什么研究nvidia硬件解码的具体内容,其实主要是为了在项目中能够利用nvidia的硬件解码和 ...

  5. 高级UI-高级渲染

    在使用了Panit画笔之后,可以对其进行渲染,从而达到更加人性化的方式 渲染分类 按常用渲染方式可以分为以下几种: BimapShader位图的图像渲染器 LinearGradient线性渲染 Rad ...

  6. OpenJudge 4120 硬币

    总时间限制: 1000ms 内存限制: 262144kB 描述 宇航员Bob有一天来到火星上,他有收集硬币的习惯.于是他将火星上所有面值的硬币都收集起来了,一共有n种,每种只有一个:面值分别为a1,a ...

  7. OpenJudge 1088 滑雪

    总时间限制: 1000ms 内存限制: 65536kB 描述 Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者 ...

  8. 面试官:知道你的接口QPS是多少么?(转)

    面试官:知道你的接口QPS是多少么? 原创: 孤独烟 孤独烟 9月24日 引言 大家好,我是渣渣烟. 我又来水文章了.这篇文章我个人感觉含金量不是太大,大概5分钟左右就能看完!其实大家都知道,我不爱写 ...

  9. java8新特性1--Lambda表达式

    一.Lambda表达式是什么? Lambda表达式有两个特点 一是匿名函数,二是可传递. 匿名函数的应用场景是 通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用Lambda表达式.lam ...

  10. python 坑1

    目录 1.编码解码 2.基础数据类型补充: 2.1 str: 2.2list: 2.3tuple: 2.4dict: 2.5set: 3.坑 4.类型转换: 5.数据类型: 1.编码解码 编码:将文字 ...