前端学习08 浮动、display属性、盒子模型、表格、列表样式

最新推荐文章于 2022-10-18 14:49:42 发布

花落墨山河

最新推荐文章于 2022-10-18 14:49:42 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/weixin_44189110/article/details/108853251

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            width: 600px;
            /* height: 300px; */
            margin: 0 auto;
            border: 1px solid #666;
            overflow: hidden;
            
        }
        .box1,.box2,.box3{
            width: 200px;
            height: 150px;
        }
        .box1{
            background-color: red;
            float: left;
        }
        .box2{
            background-color: rgb(53, 172, 17);
            float: left;
        }
        .box3{
            background-color: royalblue;
        }
        .clear{
            clear: both;
        }
        .hzmx1{
            width: 800px;
            height: 400px;
            border: 1px solid red;
            margin: 200px;
        }
        span{
            display: block;
            width: 300px;
            height: 200px;
            background-color: rosybrown;
            margin: 20px 10px;
            padding: 10px;
            border: 1px ;
        }
        /* 浮动案例 */
        .info-show{
            width: 600px;
            /* height: 200px; */
            padding: 20px;
            border: 1px solid;
            margin: 100px auto;
            overflow: hidden;
            
        }
        .head-sculpture{
            float: left;
            width: 125px;
            height: 180;
            margin-right: 30px;
            text-align: center;
        }
        div.photo{
            width: 125px;
            height: 130px;
            background-color:#eee;
            display: table-cell;
            vertical-align: middle;/*垂直居中*/
        }
        div.txt{
            width: 125px;
            height: 50px;
        }
        .description{
            float: left;
            width: 400px;
            height: 150px;
            border: 1px solid #eee;
            padding: 10px 0px 0px 20px;
        }
        /* table */
        table, td{
            border: 1px solid #666;
        }
        table{
            border-collapse: collapse;
            margin: 0 auto;
            width: 500px;
            height: 300px;
            text-align: center;
        }
        td{
            vertical-align: middle;
        }

        dd{
            margin-left: -10px;
        }

    </style>
</head>
<body>
    01 浮动:让块级标签元素不独占一行
        让元素脱离文档流，不占用标准流
        属性值：left right none
        浮动后，后面的元素不会显示在下一行
        清除浮动：让后面元素自动掉到下一行
            clear：both
            在要清除浮动的父级加overflow: hidden;
        
    <div class="wrapper" >
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="clear"></div>
        <div class="box3">box3</div>

    </div>
    <div class="info-show">
        <div class="head-sculpture">
            <div class="photo">头像</div>
            <div class="txt">姓名</div>
        </div>
        <div class="description">描述</div>
    </div>
    CSS盒子模型
        每个元素都是一个盒子，一个盒子由
        margin（外边距），border（边框线），padding（内边距）和content（内容）组成
        区别外边距和内边距是以边框为参照
        外边距（margin）：
        系统默认外边距为8px
        margin- left right top bottom
        margin还可以带参数（1、2、3、4）
        margin(3个参数 apx bpx cpx) 上 左右 下
        4个 上右下左
        <div class="hzmx1"><span>123</span></div>

        内边距（padding）：元素文本内容与边框的距离

        边框线
        solid（实线） dashed(虚线) dotted（点划线） 
    
    display属性
        none 
        block：块显示，在元素前后设置换行符，目的：将行->块（行级标签不识别宽高）
        inline: 行内显示，块->行（）删除换行符 
        inline-block：将块级或行级标签转换为行内块级标签   
        
    table:
    ：text-align、vertical-align  text-align border-collapse vertical-align
    <table >
        <tr>
            <td>具体内容01</td>
            <td>具体内容02</td>
            <td>具体内容03</td>
            <td>具体内容04</td>
        </tr>
        <tr>
            <td>具体内容01</td>
            <td>具体内容02</td>
            <td>具体内容03</td>
            <td>具体内容04</td>
        </tr>
    </table>
    列表样式：
        菜单，商品列表等；
        无序ul，有序ol，（li）
        自定义列表dl（dt：标题、dd描述）
        用来修改标识类型；
        list-style :list-style-image list-style-position list-style-type
        type属性值：
            无序 disc/circle/square
            有序 decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upperalpha/
            lower-greek/lower-latin/upper-latin
        
    <dl>
        <dt>dt</dt>
        <dd>自定义列表01</dd>
        <dd>自定义列表02</dd>
        <dd>自定义列表03</dd>
    </dl>
</body>
</html>