css页面布局

来源：互联网发布：程序员bug表情包编辑：程序博客网时间：2024/06/07 01:20

页面布局

总结：

布局1：

（0）内联元素对设置宽（width）和高（height）不敏感

（1）如果子元素是一个块级元素（block）或者被设置为块级元素，我们可以对子元素使用margin：0 auto居中。

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .container{
            background:blue;
            width:600px;
            height:400px;
            border:1px solid yellow;
        }
        .sub1{
            background: yellow;
            margin: 0 auto;
            width:100px;
            height:100px;
            /*display:inline-block;*/
        }
    </style>
</head>
<body>
<div class="container">
    <div class="sub1"></div>
    
</div>
</body>

（2）如果子元素是一个内联元素或者被设置为内联、内联块元素，这时候要居中的话。可以对父元素设置一个text-align：center实现居中。

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .container{
            background:blue;
            width:600px;
            height:400px;
            border:1px solid yellow;
            text-align: center;
        }
        .sub1{
            background: yellow;
            margin:0 auto;
            width:100px;
            height:100px;
            display:inline-block;//转换内联为块
        }
    </style>
</head>
<body>
<div class="container">
    <span class="sub1">华点</span>
</div>
</body>

布局2：

特点：子元素贴着父元素两边，联想到浮动的左浮动和右浮动。同时子元素的宽度可以使用自适应。

}
        .sub2{
            float: right;
        }
    </style>
</head>
<body>
<div class="container">
    <span class="sub1">logo</span>
    <span class="sub2">华点导航</span>
    
</div>

（1）如果子元素使用了浮动，那么子元素自动变成内联块元素。对设置的宽度和高度敏感。(自动撑起）

阅读全文

0 0