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

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

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

一.盒子模型的简介

  1. 　　CSS处理网页时，它默认为每个元素都包含了在一个不可见的盒子里。
  2. 　　
  3. 　　为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于摆放盒子。
  4.  
  5. 　　我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。
  6.  
  7. 　　一个盒子我们会分成几个部分:
    　　　　内容区(content)
    　　　　内边距(padding)
    　　　　边框(border)
    　　　　外边距(margin)

二.HTML源代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>盒子模型的边框</title>
  6.  
  7.         <style type="text/css">
  8.             .box1{
  9.                 /**
  10.                  *     使用width来设置盒子内容区(element)的宽度
  11.                  *     使用height来设置盒子内容区(element)的高度
  12.                  *
  13.                  *     温馨提示:
  14.                  *         width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，盒子的可见框的大小由内容去，内边距和边框共同决定。
  15.                  */
  16.                 width: 300px;
  17.                 height: 300px;
  18.  
  19.                 /**
  20.                  *     设置背景颜色
  21.                  */
  22.                 background-color: red;
  23.  
  24.                 /**
  25.                  *     为元素设置边框，要为一个元素设置边框必须指定三个样式(少一个都不行):
  26.                  *         border-width:
  27.                  *             可以设置边框的的宽度;
  28.                  *             注意以下四个规则是具有通用性的:
  29.                  *                 如果在border-width指定了一个值，说明上边框，右边框，下边框，左边框大小是相同的
  30.                  *                 如果在border-width指定了二个值，则第一个值会应用给上边框和下边框，第二个值会应用给左边框和有边框
  31.                  *                 如果在border-width指定了三个值，则第一个值会应用给上边框，第二个值会应用给左边框和右边框，第三个值会应用给下边框。
  32.                  *                 如果在border-width指定了四个值，则四个值会分别设置上边框，右边框，下边框，左边框的大小，是按照顺时针的方向设置
  33.                  *             除了border-width,CSS中还设置了四个border-xxx-width:
  34.                  *                 xxx的值可能是"top", "bottom", "left", "right",专门用来设置指定的宽度
  35.                  *
  36.                  *         border-color:
  37.                  *             边框的颜色
  38.                  *             设置参数的规则和border-width类似。
  39.                  *             除了border-color,CSS中还设置了四个border-xxx-color:
  40.                  *                 xxx的值可能是"top", "bottom", "left", "right",专门用来设置指定的颜色
  41.                  *         border-style:
  42.                  *             边框的样式，常用的可选值(其它的可选值参考手册即可):
  43.                  *                 none：
  44.                  *                     默认值，没有边框
  45.                  *                 solid:
  46.                  *                     实线
  47.                  *                 dotted:
  48.                  *                     点状边框
  49.                  *                 dashed:
  50.                  *                     实线
  51.                  *                 double:
  52.                  *                     双线
  53.                  *
  54.                  */
  55.                 border-width:  10px 20px 40px 80px;
  56.                 border-color: yellow blue;
  57.                 border-style: solid double;
  58.             }
  59.         </style>
  60.     </head>
  61.     <body>
  62.  
  63.         <div class="box1"></div>
  64.     </body>
  65. </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. Sprint 冲刺第三阶段第一天

    1.今晚我在整理之前的代码,检查细节,然后发现游戏要返回上一界面竟然出现了问题“项目停止运行”,仔细检查没办法解决,后来百度可能是因为修改了之前文件的名字,可在AndroidManifest.xml中 ...

  2. 理解java的三大特性之继承

    学习来源:http://www.cnblogs.com/chenssy/p/3354884.html default 默认权限(包权限-同一个包可以访问) private 私有(类内部可以使用,继承的 ...

  3. Neo4j学习案例【转】

    转自 打怪的蚂蚁 CSDN: https://blog.csdn.net/xgjianstart/article/details/77285334 neo4j有社区版本和企业版.社区版本是免费的,只支 ...

  4. beta版验收互评

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

  5. Spring Cloud 路由网关服务端

    修改application.properties配置文件:服务端口号.本机名称: 启动注册中心:java -jar uap-register-server-1.0.jar --spring.confi ...

  6. python 安装influxdb-python

    一.Linux下安装 1.yum install -y git 2.安装pip,参考:https://app.yinxiang.com/shard/s41/sh/0338ba85-5443-453f- ...

  7. pandas数据统计

    1 count() 非空观测数量 2 sum() 所有值之和 3 mean() 所有值的平均值 4 median() 所有值的中位数 5 mode() 值的模值 6 std() 值的标准偏差 7 mi ...

  8. 关于linux上文件无法正确显示中文的情况解决

    其实有遇到过多次,而且还有几次是css在预编译的时候,系统编码不对也会报错. 贴一个写的还不错的文章:http://www.360doc.com/content/11/0728/09/7102324_ ...

  9. python系列-1 字符串操作

    1.去除空格   str.strip():删除字符串两边的指定字符,括号的写入指定字符,默认为空格 >>> a=' hello ' >>> b=a.strip() ...

  10. BZOJ4785 ZJOI2017树状数组（概率+二维线段树）

    可以发现这个写挂的树状数组求的是后缀和.find(r)-find(l-1)在模2意义下实际上查询的是l-1~r-1的和,而本来要查询的是l~r的和.也就是说,若结果正确,则a[l-1]=a[r](mo ...