HTML&CSS基础-盒子模型的边框

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

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

一.盒子模型的简介

　　CSS处理网页时，它默认为每个元素都包含了在一个不可见的盒子里。

　　

　　为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于摆放盒子。

　　我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。

　　一个盒子我们会分成几个部分:
　　　　内容区(content)
　　　　内边距(padding)
　　　　边框(border)
　　　　外边距(margin)

二.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>盒子模型的边框</title>

        <style type="text/css">

            .box1{

                /**

                 *     使用width来设置盒子内容区(element)的宽度

                 *     使用height来设置盒子内容区(element)的高度

                 *

                 *     温馨提示:

                 *         width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子的可见框的大小由内容去，内边距和边框共同决定。

                 */

                width: 300px;

                height: 300px;

                /**

                 *     设置背景颜色

                 */

                background-color: red;

                /**

                 *     为元素设置边框，要为一个元素设置边框必须指定三个样式(少一个都不行):

                 *         border-width:

                 *             可以设置边框的的宽度;

                 *             注意以下四个规则是具有通用性的:

                 *                 如果在border-width指定了一个值，说明上边框，右边框，下边框，左边框大小是相同的

                 *                 如果在border-width指定了二个值，则第一个值会应用给上边框和下边框，第二个值会应用给左边框和有边框

                 *                 如果在border-width指定了三个值，则第一个值会应用给上边框，第二个值会应用给左边框和右边框，第三个值会应用给下边框。

                 *                 如果在border-width指定了四个值，则四个值会分别设置上边框，右边框，下边框，左边框的大小，是按照顺时针的方向设置

                 *             除了border-width,CSS中还设置了四个border-xxx-width:

                 *                 xxx的值可能是"top", "bottom", "left", "right",专门用来设置指定的宽度

                 *

                 *         border-color:

                 *             边框的颜色

                 *             设置参数的规则和border-width类似。

                 *             除了border-color,CSS中还设置了四个border-xxx-color:

                 *                 xxx的值可能是"top", "bottom", "left", "right",专门用来设置指定的颜色

                 *         border-style:

                 *             边框的样式，常用的可选值(其它的可选值参考手册即可):

                 *                 none：

                 *                     默认值，没有边框

                 *                 solid:

                 *                     实线

                 *                 dotted:

                 *                     点状边框

                 *                 dashed:

                 *                     实线

                 *                 double:

                 *                     双线

                 *

                 */

                border-width:  10px 20px 40px 80px;

                border-color: yellow blue;

                border-style: solid double;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

    </body>

</html>

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

权限管理-ACL的更多相关文章

  1. 权限管理——ACL权限

    权限管理 ACL权限 用于解决用户对文件身份不足 命令:[root@localhost ~]#dumpe2fs -h /dev/sd3 作用:查询指定分区详细的文件系统给信息 选项 -h:仅显示超级块 ...

  2. linux的用户扩充权限管理acl和用户使用系统资源的限制

    用户扩充权限管理 acl 1.扩充权限的方式 文件扩充权限 ACL 磁盘配额 2.文件扩充权限 1.安全位 安全位   ---set位    SUID  SGID   set仅可以加给 u.g, 如: ...

  3. Linux高级权限管理 - ACL

    传统权限模型缺点: 传统的UGO权限模型无法应对负责的权限设置要求,如对于一个文件只能设置一个组,并且对该组进行权限控制,但是如果该文件有多个组合会对其进行访问,并且都要要求权限限制时,传统的UGO模 ...

  4. Linux权限管理 ACL权限

    ACL权限简介 在普通权限中,用户对文件只有三种身份ugo,分别为属主(u).属组(g)和其他人(o):每种用户身份拥有读(read).写(write)和执行(execute)三种权限.但是在实际工作 ...

  5. Linux 权限管理-ACL权限

    ACL权限是为了在现有的所有者.所属组.其他人不够使用的情况下使用的,使用它必须保证文件所在的分区支持ACL df -h:查看系统所有分区信息 dumpe2fs -h /dev/vda1,可以查看分区 ...

  6. Linux_CentOS用户管理 和 用户权限管理 chmod、ACL、 visudo

    一.用户管理 Linux 系统同时可以支持多个用户,每个用户对自己的文件设备有特殊的权利,能够保 证用户之间互不干扰.就像手机开了助手一样,同时登陆多个 qq 账号,当硬件配置非常高 时,每个用户还可 ...

  7. Linux UGO和ACL权限管理

    自主访问控制(Discretionary Access Control, DAC)是指对象(比如程序.文件.进程)的拥有者可以任意修改或者授予此对象相应的权限.Linux的UGO(User, Grou ...

  8. Linux系列教程（十六）——Linux权限管理之ACL权限

    通过前面的两篇博客我们介绍了Linux系统的用户管理,Linux用户和用户组管理之相关配置文件 讲解了用户管理的相关配置文件,包括用户信息文件/etc/passwd,用户密码文件/etc/shadow ...

  9. Linux权限管理之ACL权限

    注:转载自:https://www.cnblogs.com/ysocean/p/7801329.html 目录 1.什么是 ACL 权限? 2.查看分区 ACL 权限是否开启:dump2fs ①.查看 ...

随机推荐

  1. selective search

    1.引言:图像的物体识别主要有两个步骤:定位.分类.在分类的过程中,需要对图像中文物体的区域划分出来.传统的方法是利用滑窗,一个窗口一个窗口得选择,将之与目标进行比较,确定物体的位置. 为了降低搜索空 ...

  2. js 基础-&& || 逻辑与和逻辑或

    今天百度发现一个简化长if   else if 语句的方法,看起来及其强大,感觉这样虽然对系统性能提升没有帮助但是代码更简练了,分析了一番,下面先说说自己学到的理论. 首先要弄清楚js 中对于 变量, ...

  3. 2丶利用NABCD模型进行竞争性需求分析

    确定项目:公交查询系统 分析小组:在路上 选择比努力更重要.一个项目成功自然离不开组员们的努力.但是,光努力是不够的.还需要用户有需求,能快速实现. 这些东西,看似很虚,却能让我们少走不少弯路.做项目 ...

  4. tftp服务、串口工具minicom

    linux下安装tftp服务 参考这位仁兄的经验 确实百度上很多关于配置tftp服务的方法,但是这篇文章的介绍真的是很精简,对于一个刚接触纯linux环境的小白来说是很舒服的一件事. 首先是安装tft ...

  5. Tomcat启动失败

    前景:使用的是tomcat9.0,配置好后,使用一切正常,刷慕课跟着做练习,也一切正常.出事在于,老师为了方便直接拷之前写的一个项目,我照做了,老师改了虚拟路径了,我忘记改了,然后跑了一下项目就出毛病 ...

  6. 全新OCR3500数据

    改装: 手变6700,夹器彦豪R741,牙盘5700,前拨5700,后拨5701,飞轮5700,链条YBN S10 S2,弯把DEDA RHM01,前叉山寨BIANCHI K-VID,轮组FULCRU ...

  7. 我终于激活Windows Server2008 R2了！！

    经过我不懈的努力,在重装两次系统后,我终于实现了win2008的KMS激活.这个方法可以避免虚拟机架设KMS服务器的麻烦.现将激活方法发布如下. 首先要选择安装的操作系统.Windows Server ...

  8. JavaScript & Dom 之 基本语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. UI事件

    load:在window对象上触发是当页面加载完毕之后触发的,在frameset 是当所有的frames都加载完毕之后触发,当指img标签时,是指图片加载完毕之后等等. unload:在window对 ...

  10. ansible系列8-SSH连接和执行性能优化

    1. 当你的SSH的版本高于5.6时 我们可以直接修改 /etc/ansible/ansible.cfg里面的参数 ssh_args = -C -o ControlMaster=auto -o Con ...