行快属性和盒模型

行快属性

display:inline能将块标签转化为行内标签,可以让块标签共处一行

display:block能将行内标签转换为块标签,可以改变宽高

但是除了特殊情况一般不会用到这种方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            background: lightblue;
            display: inline-block;
        }
        span{
            width: 300px;
            height: 300px;
            background: lightpink;
            display: inline-block;
        }
        input{
            width: 400px;
            height: 50px;
        }
    </style>
</head>
<body>
<!-- 块标签 
    div,ul,li,ol,h1~h6,p
    特点:可以设置宽高,不可以与别人共处一行,不设置宽度的情况下默认宽度是100%(取决于副级大小)
行内标签
     span,strong,a
     特点:不可以设置宽高,可以与别人共处一行,其宽高由内容撑开
行内块标签
     img,input
     特点:可以设置宽高,可以与别人共处一行-->
     <div>我是div</div><div>我是div</div>
         <span>我是span</span><span>我是span</span>
         <input type="text" name="">
         <input type="text" name="">
</body>
</html>

盒模型

margin:外边距

border:边框(虚线-----dashed,虚线.....dotted,双实线double,实线solid 常用的是solid)

/*border-width:5px ;
            border-color: hotpink;
            border-style: solid;*/
            border: 5px hotpink dotted;
            /*dashed,dotted,double,solid*/



/*margin: 50px 0 0 50px;/*上,右,下,左*/
            /*margin: 0 50px 10px;*//*上:0,左右50,下10*/
            /*margin: 20px 30px;*//*上下20左右30*/
            /*margin: 10px;*//*上下左右都是30*/
            /*margin-left:auto ;auto: 自动的;
            margin-right: auto;*/

 

posted @ 2021-11-21 13:39  栗栗向前冲  阅读(49)  评论(0)    收藏  举报