首页 > 代码库 > 流式布局

流式布局

2024-07-05 15:58:43   229人阅读

流式布局，就是用百分比设置宽度的布局形式

目标宽度/上下文宽度=值

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    *{ margin:0; padding:0;}
    div{ width:80%; height:300px; background:red; margin:50px auto;}
    p:first-child{ width:50%; height:200px; background:blue; float:left;}/*p:first-child表示第一个p*/
    p:last-child{ width:50%; height:200px; background:pink; float:right;}/*p:last-child表示最后一个p*/
    /*这里p的父元素是div宽度是80%，但在子元素心目中是100%，所以父元素下的子元素总和的宽度是100%就行了
      如果给两个p加上边框，不能用百分比，百分比数值，只能出现在width、piddling、margin上，边框的宽度没有百分比，只能用px但是这样会导致父元素的宽度不够而掉下来        
    */
</style>
</head>
<body>
    <div>
        <p></p>
        <p></p>
    </div>
</body>
</html>

 

 

解决办法：使用CSS3中的box-sizing属性（IE8开始兼容了），这个属性用来规定，CSS中出现的width值是谁的宽度？

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    div{ width:200px; height:200px; padding:20px; background:red; box-sizing:border-box; border:10px solid green;}
    /*border-box,就是边框的这个小盒子，这个属性命令了，width数值指的是border这个小盒子的宽度 ，此时，padding表现为一种内减，而不是原来的外扩
    加了 box-sizing:border-box;这个属性之后，再加border的时候，整个盒子就不会向外矿大了，
    */
</style>
</head>
<body>
    <div></div>
</body>
</html>

 

这个属性在流式布局中特别常用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    *{ margin:0; padding:0;}
    div{ width:80%; height:300px; background:red; margin:50px auto;}
    p:first-child{ width:50%; height:200px; background:blue; float:left; box-sizing:border-box; border:10px solid green;}/*p:first-child表示第一个p*/
    p:last-child{ width:50%; height:200px; background:pink; float:right; box-sizing:border-box; border:10px solid green;}/*p:last-child表示最后一个p*/
    /*这里p的父元素是div宽度是80%，但在子元素心目中是100%，所以父元素下的子元素总和的宽度是100%就行了
      如果给两个p加上边框，不能用百分比，百分比数值，只能出现在width、piddling、margin上，边框的宽度没有百分比，只能用px但是这样会导致父元素的宽度不够而掉下来        
    */
</style>
</head>
<body>
    <div>
        <p></p>
        <p></p>
    </div>
</body>
</html>

 

 

 

 

 

 

min-width属性、max-width属性

当盒子的宽度是百分比来指定的话，很多时候要设置最小的宽度和最大的宽度，即min-width属性、max-width属性IE7开始兼容的

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    div{ 
        width:80%;
        height:200px;
        background:red;
        margin:0 auto;
        max-width:600px;
        min-width:400px;
        /*加了这两个属性，盒子的宽度是浏览器的80%，但是呢，最大不会超过600px，最小不会小于400px;*/
    }
</style>
</head>
<body>
    <div></div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


联系
我们