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. Linux环境C程序设计

    Linux基础 常用shell命令 命令 说明 命令 说明 man 查看联机帮助 ls 查看目录及文件列表 cp 复制目录或文件 mv 移动目录或文件 cd 改变文件或目录 rm 删除文件或目录 mk ...

  2. ubuntu——caffe配置deeplab

    1. 下载deeplab 2. 安装matio sudo apt-get install libmatio-dev 3. 修改Makefile文件 LIBRARIES += glog gflags p ...

  3. Post Tuned Hashing，PTH

    [ACM 2018] Post Tuned Hashing_A New Approach to Indexing High-dimensional Data [paper] [code] Zhendo ...

  4. beta版验收互评

    排名 团队名称 项目名称 优点 缺点,bug 报告 1 别看了你没救了队 校园帮帮帮(已发布) 实现普通用户的登陆,修改个人信息,发布信息,下订单的功能:管理员登陆,修改个人信息,发布信息,下订单,增 ...

  5. App WebView实例化

    a,高级设置里的环境变量 jdk的配置 b,下载Google的sdk,里面直接包含eclipse 1,新建一个项目 2,起个名字 3,设么走不做,next 4,只操作选择显示的三种方式 5,next什 ...

  6. MongoDB导入导出以及数据库备份以及.dat数据

    1.导出工具:mongoexport     1.概念:         mongoDB中的mongoexport工具可以把一个collection导出成JSON格式或CSV格式的文件.可以通过参数指 ...

  7. ADOTable的CancelUpdate和CancelBatch的区别？(100分)

    出差新疆,修改别人的代码,请教CancelUpdate和CancelBatch的区别! 如果希望取消对当前记录所做的任何更改或者放弃新添加的记录,则必须调用CancelUpdate 方法CancelB ...

  8. the project already contains a form or module named pcm001怎麼解決

    the project already contains a form or module named pcm001怎麼解決 菜单Project -> Remove from project.. ...

  9. asp.net 连接SQL Server 数据库并进行相关操作

    asp.net 连接数据库,操作数据库主要需要两个类,一个是SqlConnection,一个是SqlCommand SqlConnection用于连接数据库,打开数据库,关闭数据库. 连接数据库需要特 ...

  10. Directory操作

    操作文件夹 CreateDirectory() 创建新文件夹 Delete() 删除 Move() 剪切 Exists() 判断文件夹是否存在 //获取当前目录下所有文件夹的路径 Directory. ...