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. 【翻译】Flink Table Api & SQL —— 连接到外部系统

    本文翻译自官网:Connect to External Systems  https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev ...

  2. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(六)- webpack-dev-server 自适应支持手机端访问

    关于EasyDSS EasyDSS商用流媒体服务器解决方案是一套集流媒体点播.转码与管理.直播.录像.检索.时移回看于一体的一套完整的商用流媒体服务器解决方案,EasyDSS高性能RTMP流媒体服务器 ...

  3. html5获取自己定位的方法

    html5获取自己定位的方法直接用高德地图api 不要用百度地图api 不准确 <pre><!doctype html><html><head> < ...

  4. redis使用bit做只有两种情况的“状态“统计（如是否在线的用户统计）

    1 记录在线用户数(活跃用户)? 比如redis中键a的value数据的二进制码是 0110 0110 0001 它总共有12位,在redis的位操作中,二进制中的第几位称为offset. 我们可以这 ...

  5. AOP实现事务和记录日志

    AOP (Aspect Oriented Programming) 将非功能性需求从功能性需求中剥离出来,解耦并且解决代码复用的问题,比如说权限控制,事务控制,记录操作日志,全局捕获异常等 @Aspe ...

  6. ERP通过JAVA流的形式将数据传到外围系统

    1.ERP封装数据成XML写入数据库服务器指定文件 --指定相关文件信息 v_file_path := '/u01/test/app/fs1/EBSapps/appl/cux/12.0.0/forms ...

  7. #redis 安装命令

    redis 安装命令 cd /usr/local sudo wget http://download.redis.io/releases/redis-4.0.11.tar.gz sudo tar xf ...

  8. Vue学习笔记（20190722）

  9. js指定日期时间加一天 ,判断指定时间是否为周末

    function dateAdd(startDate) { startDate = new Date(startDate); startDate = +startDate + ***; startDa ...

  10. AQS（AbstractQueuedSynchronizer）

    AbstractQueuedSynchronizer 是一个锁框架.实现的原理(大概): 1.关于重入锁方面的实现,参考(手写一个可重入锁). 2.关于公平锁方面的实现,使用双链表的形式,进行公平锁的 ...