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. win10装MySQL5.7

    越来越发现装MySQL很费劲啊,装了N次,都很懵逼,找对的解决方案很重要. Mysql5.7下载地址:http://xiazai.zol.com.cn/detail/4/33431.shtml 安装步 ...

  2. 构建之法--初识Git

    该作业来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2103 GitHub地址:https://github.com/GVic ...

  3. windows、ubuntu、centos7下mysql 的安装与使用

    一.windows 及ubuntu下安装 windows可以傻瓜式安装,另一种空闲了下来写,也不麻烦 ubuntu: apt-get install mysql 强烈推荐使用ubuntu从这儿就很方便 ...

  4. ThreadPoolExecutor源码解读

    1. 背景与简介 在Java中异步任务的处理,我们通常会使用Executor框架,而ThreadPoolExecutor是JUC为我们提供的线程池实现. 线程池的优点在于规避线程的频繁创建,对线程资源 ...

  5. js私有作用域(function(){})(); 模仿块级作用域

    摘自:http://outofmemory.cn/wr/?u=http%3A%2F%2Fwww.phpvar.com%2Farchives%2F3033.html js没有块级作用域,简单的例子: f ...

  6. 二叉排序树类的： C++ 实现

    #include<iostream> using namespace std; template<class T> struct TreeNode { T element; T ...

  7. Java微信二次开发（九）

    多媒体文件上传与下载 第一步:找到包com.wtz.vo,新建类WeixinMedia.java package com.wtz.vo; /** * @author wangtianze QQ:864 ...

  8. BZOJ3996[TJOI2015]线性代数——最小割

    题目描述 给出一个N*N的矩阵B和一个1*N的矩阵C.求出一个1*N的01矩阵A.使得 D=(A*B-C)*A^T最大.其中A^T为A的转置.输出D 输入 第一行输入一个整数N,接下来N行输入B矩阵, ...

  9. hdu 3949 XOR (线性基）

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=3949 题意: 给出n个数,从中任意取几个数字异或,求第k小的异或和 思路: 线性基求第k小异或和,因为题 ...

  10. xml文件格式化后不能获取到值

    在有些时候,我们要使用到xml文件,必须得将文件中的内容压缩成一行,才能读取到其中的值,一旦有换行符.制表符.空格之类的就读不到.所以只能在开发好以后,将代码压缩再执行,十分不方便. 尝试了几个替换符 ...