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. article元素以及section

    <p>发表日期:<time pubdate="pubdate">2015/10/30</time></p> article元素有自己 ...

  2. 使用Java+Kotlin双语言的LeetCode刷题之路（一）

    LeetCode learning records based on Java,Kotlin,Python...Github 地址 序号对应 LeetCode 中题目序号 1 两数之和 给定一个整数数 ...

  3. [2017BUAA软工]个人项目

    软工个人项目 一.Github项目地址 https://github.com/Lydia-yang/2017BUAA-SoftwareEngineering 二.解题思路 在刚开始拿到题目的时候,关于 ...

  4. shell脚本--变量与数组

    Linux中的变量有环境变量和用户自定义变量,关于环境变量,可以查看这篇博客:linux环境变量 本文主要针对的是用户在shell脚本中定义的变量,但是环境变量也可以在shell脚本中使用. 普通变量 ...

  5. python数据相关性分析 （计算相关系数）

    #-*- coding: utf-8 -*- #餐饮销量数据相关性分析 计算相关系数 from __future__ import print_function import pandas as pd ...

  6. html 背景

    用語設置背景的屬性 bgcolor設置背景顏色.可以使用名字.16進制和rgb三種形式的參數: <body bgcolor="#000000"> <body bg ...

  7. python之tkinter使用-多选框实现开关操作

    # tkinter的Checkbutton实现开关操作 import tkinter as tk root = tk.Tk() root.title('开关') root.geometry('170x ...

  8. maven 引用另一个jar包 需要先打包在仓库里面 并在pom里面配置 才可以引用

    maven 引用另一个jar包 需要先打包在仓库里面 并在pom里面配置 才可以引用

  9. 黑客又多一款喜爱工具：知名 Windows Phone 破解工具 WPinternals 开源了

    导读 Windows Phone 发布后,黑客 HeathCliff74(René Lergner)写了一个软件 WPinternals,利用它可以对 Windows Phone 进行破解,这使他成为 ...

  10. 最短路径——SPFA算法

    一.前提引入 我们学过了Bellman-Ford算法,现在又要提出这个SPFA算法,为什么呢? 考虑一个随机图(点和边随机生成),除了已确定最短路的顶点与尚未确定最短路的顶点之间的边,其它的边所做的都 ...