css盒子、布局样式

时间：2018-09-12 11:15:57 阅读：422 评论：0 收藏：0 [点我收藏+]

标签：src ref abs 块元素 head box 垂直居中解决影响

---恢复内容开始---

1.盒子

边框

border-top-width: 10px; 宽度

border-top-style: solid/dashed/dotted; 实线虚线点线

border-top-color: red; 颜色

border-top: 10px solid red; 宽线色上边框

border-right:/border-bottom:/border-left: 右下左边框

border:10px solid red; 宽线色所有边框

border-radius:10px; 圆角边框

border-collapse:collapse; 合并表格边框

box-sizing: border-box; 边框为盒子尺寸（边框大小不变内容会变小）

<head>
<meta charset="utf-8">
<style>
    .cla1{
        width:200px;
        height:200px;
        border-top: 10px solid red; 
    }
    .cla2{
        width:200px;
        height:200px;
        border:10px solid red;
        border-radius:10px;
        box-sizing: border-box;
    }
</style>
</head>
<body>
    <div class="cla1"></div>
    <div class="cla2"></div>
</body>

技术分享图片

内间距

padding-top:10px;

padding-right:

padding-bottom:

padding-left:

padding: 上右下左上(左右)下 (上下)(左右) 内间距

外间距

margin-top:10px;

margin-right:

margin-bottom:

margin-left:

margin:50px auto; 上下50 左右居中

margin-top 塌陷解决方法

border: 1px solid gold;

overflow: hidden;

.clearfix:before{content:"";display:table;}

<style>
    .con{
        width: 300px;
        height:200px;
        background-color: gold;
        /*border: 1px solid gold;*/ /*方法一*/
        /*overflow: hidden;*/       /*方法二*/    
    }
    .box{
        width: 100px;
        height:100px;
        background-color: green;
        margin-top: 50px;
    }
    .clearfix:before{           /*margin-top塌陷*/
        content:"";
        display:table;
    }
</style>
</head>
<body>
    <div class="con clearfix">
        <div class="box"></div>
    </div>
</body>

技术分享图片

2.显示

width: ;height: ;background-color: ;

display:block/inline/inline-block/none; 块行行内块隐藏

visibility:hidden; 隐藏（占位）

块元素：独占一行可设宽高

行元素：同一行排列不设宽高由字体大小决定父元素用 text-align:center;设置字体水平居中

行内块：同一行排列可设宽高多个行内块父不设高自动 line-height:高度; 设置字体垂直居中

font-size:0; 同一行无间隔

3.浮动 (定义一个宽高确定的区域不影响整体布局)

width: ;height: ;background-color: ;

float:left/top; 覆盖下一个元素下一个元素的文字绕图下一个元素margin:图字间距

margin:50px

scroll 滚动条 scroll-y y轴滚动条

清除浮动（父边框不设高时）解决方法

overflow: hidden; 浮动隐藏

<div style="clear: both"></div> 加一个div清除浮动

.clearfix:after{content:"";display:table;clear: both;}

<head>
<style>
    .con{
        width: 300px;
        /*height:300px;*/
        border: 1px solid #000;
        margin: 100px auto 0;
        font-size: 0;
        /*overflow: hidden;*/  /*方法一*/
    }
    .con a{
        width: 50px;
        height: 50px;
        background-color: gold;
        font-size: 16px;
        margin: 10px;
        text-align: center;
        line-height: 50px;
        text-decoration: none;
        float:left;
    }
    .clearfix:after{  /*方法三*/
        content:"";
        display:table;
        clear: both;
    }
</style>
</head>

<body>
<div class="con clearfix">
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <!--<div style="clear: both"></div>-->  <!-- 方法二-->
</div>
</body>