zoukankan      html  css  js  c++  java
  • 盒子模型

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                
                .box1{
                    /*
                     * 使用width来设置盒子内容区的宽度
                     * 使用height来设置盒子内容区的高度
                     * 
                     * width和height只是设置的盒子内容区的大小,而不是盒子的整个大小,
                     *     盒子可见框的大小由内容区,内边距和边框共同决定
                     */
                    width: 300px;
                    height: 300px;
                    
                    /*设置背景颜色*/
                    background-color: #bfa;
                    
                    /*
                     * 为元素设置边框
                     *     要为一个元素设置边框必须指定三个样式
                     *         border-边框的宽度
                     *         border-color:边框颜色
                     *         border-style:边框的样式
                     */
                    
                    /*
                     * 设置边框的宽度
                     */
                    /*border-10px ;*/
                    
                    /*
                         使用border-width可以分别指定四个边框的宽度
                         如果在border-width指定了四个值,
                             则四个值会分别设置给 上 右 下 左,按照顺时针的方向设置的
                             
                         如果指定三个值,
                             则三个值会分别设置给    上  左右 下
                             
                         如果指定两个值,
                             则两个值会分别设置给 上下 左右    
                             
                         如果指定一个值,则四边全都是该值    
                         
                         除了border-width,CSS中还提供了四个border-xxx-width
                             xxx的值可能是top right bottom left
                         专门用来设置指定边的宽度    
                     * */
                    /*border-10px 20px 30px 40px ;*/
                    /*border-10px 20px 30px ;*/
                    /*border- 10px 20px ;*/
                    border-width: 10px;
                    
                    /*border-left-100px ;*/
                    
                    
                    /*
                     * 设置边框的颜色
                     * 和宽度一样,color也提供四个方向的样式,可以分别指定颜色
                     * border-xxx-color
                     */
                    border-color: red;
                    /*border-color: red yellow orange blue;*/
                    /*border-color: red yellow orange;*/
                    /*border-color: red yellow;*/
                    
                    /*
                     * 设置边框的样式
                     *     可选值:
                     *         none,默认值,没有边框
                     *         solid 实线
                     *         dotted 点状边框
                     *         dashed 虚线
                     *         double 双线
                     * 
                     * style也可以分别指定四个边的边框样式,规则和width一致,
                     *     同时它也提供border-xxx-style四个样式,来分别设置四个边
                     */
                    /*border-style: double;*/
                    border-style: solid dotted dashed double; 
                }
                
                
            </style>
        </head>
        <body>
            <div class="box1"></div>
        </body>
    </html>
  • 相关阅读:
    在床上手机看完电影让电脑关机 休眠 golang源码--配合手机ES浏览器开一个FTP
    goland授权
    goland 交叉生成linux文件
    串口2345常出错误记录
    [转]Golang号称高并发,但高并发时性能不高
    gogland如何配置路径,解决找不到相对路径配置文件的问题
    window ssh key访问linux
    Vue.js指令小结
    GIT Introduction
    scrapy 简单介绍
  • 原文地址:https://www.cnblogs.com/juham/p/14864906.html
Copyright © 2011-2022 走看看