zoukankan      html  css  js  c++  java
  • css笔记

    1.边框:

    ①常用属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
    
                 200px;                    #边框宽
                height: 200px;                   #边框高
                /*border-style: solid;*/         #边框样式
                /*border-color: red;*/           #边框颜色
                /*border- 10px;*/         
                border:10px solid red;
                border-radius: 50%;             #控制边框形状,是否为圆角         
    
    
                /*border-left-style: solid;*/      #左边框样式
                /*border-left- 10px;*/        #左边框宽度
    
                /*border-right-style: dashed;*/
                /*border-top-style: dashed;*/
                /*border-bottom-style: dashed;*/
                /*border-right- 5px;*/
                /*border-left:10px solid red;*/
    
            }
    
    
        </style>
    </head>
    <body>
    
    <div>
    
    </div>
    
    
    
    </body>
    </html>
    

    2.display属性:

      div{
                 100px;
                height: 100px;
                border: 1px solid red;
                /*display: inline;  !* 将标签设置为内敛标签 *!*/
                /*display: inline-block;  !* 将标签设置为同时具备内敛和块级标签的一些特性,比如可以设置高度宽度,但是不独占一行 *!*/
                /*display: none;  !* 隐藏标签 ,并且不占用自己之前的空间*!*/
    
            }
    

    3.盒子模型:

    /*padding-top: 10px;*/
    /*padding-left: 5px;*/
    /*padding-right: 2px;*/
    /*padding-bottom: 4px;*/
    /*padding: 10px 20px;  !* 10px上下内边距 ,20px左右内边距 *!*/
    /*padding: 10px 20px 5px 2px;  !* 10px上下内边距 ,20px左右内边距 *!*/
    /*padding: 10px 20px 5px 0; !* 10px上下内边距 ,20px左右内边距 *!*/
    
    
     /*margin-top: 100px;*/
    /*margin: 10px 20px;*/
    margin: 10px 5px 6px 3px;
    

    4.float:

    ①用来做布局的

       .c1{
                background-color: red;
                height: 100px;
                 100px;
                float: left;
            }
       .c2{
                background-color: blue;
                height: 100px;
                 100px;
                float: right;
            }
    
  • 相关阅读:
    进程实际操作篇2
    进程的实际操作篇1
    进程的理论知识
    解决套接字粘包,udp套接字对象的使用和socketserver模块实现并发
    day24-网络知识扫盲,socket的基本使用
    day23-网络编程之互联网基础,tcp/ip协议详细介绍
    day21-多态和多态性,鸭子类型,反射,内置方法,异常处理
    JAVA WEB小测
    JAVA动手动脑
    JAVA课上动手动脑问题2
  • 原文地址:https://www.cnblogs.com/zhuxianxiaofan/p/13173084.html
Copyright © 2011-2022 走看看