CSS(十二) 宽度布局实践

来源：互联网发布：淘宝买手游账号靠谱吗编辑：程序博客网时间：2024/05/21 06:33

CSS定位固定宽度布局-绝对定位法

需要对父标签进行设定，包括高度，还要对自己的宽度高度进行设置，因为他们都已经脱离了标准流

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>绝对定位法</title><style type="text/css">    body{        text-align: center;    }    #head,#container,#content,#side,#foot{        margin:20px auto 20px auto;        padding:20px 0px 20px 0px;        border: 1px solid red;    }    #head,#container,#foot{        width: 900px;    }    #container{        position: relative;        height: 250px;    }    #content{        position: absolute;        width: 700px;        height: 200px;    }    #side{        margin-left: 750px;        height: 100px;    }</style></head><body><div id="head">head</div><div id="container">    <div id="content">content</div>    <div id="side">side</div></div><div id="foot">foot</div></body></html>

固定宽度的布局

CSS定位固定宽度布局-相对定位法

需要将原来定位的删除，然后进行左右浮动，并且清楚掉尾部的两边浮动，再重新设置模块的高度和宽度即可

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>浮动法</title><style type="text/css">    body{        text-align: center;    }    #head,#container,#content,#side,#foot{        margin:20px auto 20px auto;        padding:20px 0px 20px 0px;        border: 1px solid red;    }    #head,#container,#foot{        width: 900px;    }    #container{        border:0px;    }    #content{        float:left;        width: 700px;        height: 200px;    }    #side{        float:right;        width: 180px;        margin-left: 10px;        height: 100px;    }    #foot{        clear: both;    }</style></head><body><div id="head">head</div><div id="container">    <div id="content">content</div>    <div id="side">side</div></div><div id="foot">foot</div></body></html>

相对定位法

CSS定位可变宽度布局-相对定位法

前面的方法，不能随着浏览器窗口的放大或者缩小而改变，所以，我们可以把如图所示的几个宽度的具体数值变成占这个窗口的百分比进行设定，此时页面就可以根据浏览器进行缩放了
变宽布局

阅读全文

0 0

CSS(十二) 宽度布局实践

CSS定位 固定宽度布局-绝对定位法

CSS定位 固定宽度布局-相对定位法

CSS定位 可变宽度布局-相对定位法

CSS定位固定宽度布局-绝对定位法

CSS定位固定宽度布局-相对定位法

CSS定位可变宽度布局-相对定位法