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第五周学习总结

    作者:黎静 一.知识点总结 (一)给MenuOS增加time和time-asm命令 1.更新menu代码到最新版 2.test.c中main函数里,增加MenuConfig() 3.增加对应的两个函数 ...

  2. 删除运行时权限不足，cmd开启管理员

    管理员帐号活跃代码:net user administrator /active:yes 搜索cmd-右键以管理员身份运行 切换administrator帐号登录 操作后最后关闭这么高的权限,避免被非 ...

  3. JavaScript（ECMAScript） with 语句

    有同事,爱尝鲜,JavaScript ECMAScript with 语句,找了半天不知道局部变量的出处,原来是with语句搞得鬼. http://www.w3school.com.cn/js/pro ...

  4. WorkStation 虚拟机迁移到 ESXi的后续处理.

    自己遇到了然后按照blog http://blog.sina.com.cn/s/blog_79a8b8e10102w8bm.html 解决 特此记录一下. 将Workstation的vmdk文件导入到 ...

  5. pandas切片使用和column赋值

    #-*- coding: utf-8 -*- #对数据进行基本的探索 #返回缺失值个数以及最大最小值 import pandas as pd datafile= '../data/air_data.c ...

  6. char类型的数值转换

    在视频教程中,你已经认识到了数字类型之间.字符串和其他类型之间的转换.而某些时候,我们还需要将char类型转换为int类型,或者把int类型转换为char类型. 这篇文章,将介绍在代码中虽然不太常用, ...

  7. 什么是Maven？

    绝大部分Maven用户都会说:Maven是一个“构建工具”——一个用来把源代码构建成可发布的构建的工具. 构建工程师和项目经理会说Maven是一个更复杂的东西:一个项目管理工具. Maven除了提供构 ...

  8. 斜率DP个人理解

    斜率DP 斜率DP的一版模式:给你一个序列,至多或分成m段,每段有花费和限制,问符合情况的最小花费是多少: 一版都用到sum[],所以符合单调,然后就可以用斜率优化了,很模板的东西: 如果看不懂可以先 ...

  9. day9 集合操作

    去重 s = set(python_1) # 用set会变成集合,集合自带去重能力 print(s) python_1 = list(s) # 在用list还原成列表.但是会打乱顺序 print(py ...

  10. Linux 配置Samba服务

    查看系统下是否已经安装了sambarpm -qa |grep samba 安装sambayum -y install samba 配置samba创建目录sambamkdir -p /home/samb ...