浮动布局与定位布局

最新推荐文章于 2022-07-20 16:57:14 发布

dingpu2320

最新推荐文章于 2022-07-20 16:57:14 发布

阅读量91

点赞数

原文链接：http://www.cnblogs.com/xutaowang/p/9102912.html

版权

1 html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动布局与定位布局</title>
    <link rel="stylesheet" href="css/float.css">
</head>
<body>
<header>
    header
</header>
<aside>
    aside
</aside>
<section>
    section
    <textarea></textarea>
</section>
<footer>
    footer
</footer>
</body>
</html>

2 浮动布局css

@charset "UTF-8";
body{
    width: 960px;
    margin: 0 auto;
}
header{
    height: 120px;
    background-color: olive;

}
aside{
    width: 200px;
    height: 400px;
    background-color: purple;
    /*左浮动*/
    float: left;
}
section{
    width: 760px;
    height: 400px;
    background-color: maroon;
    /*右浮动*/
    float: right;
}
footer{
    height: 120px;
    background-color: gray;
    /*清除浮动*/
    clear: both;
}

aside{
    /*元素总高度长度不变，从而不破坏布局*/
    box-sizing: border-box;
    /*加个padding和border测试*/
    padding: 20px;
    border: 5px black solid;
}
/*ps设置：文本框不允许拖动，免得破坏布局*/
textarea{
    resize: none;
}

3 显示效果

4 定位布局css

@charset "UTF-8";
body{
    width: 960px;
    margin: 0 auto;
    /*相对文档定位：body内，不浮动，占位偏移*/
    position: relative;
}
header{
    height: 120px;
    background-color: olive;
}
aside{
    width: 200px;
    height: 400px;
    background-color: purple;
}
section{
    width: 760px;
    height: 400px;
    background-color: maroon;
    /*绝对文档定位：body外，浮动*/
    position: absolute;
    top: 120px;
    right: 0;
}
footer{
    height: 120px;
    background-color: gray;
}
aside{
    /*元素总高度长度不变，从而不破坏布局*/
    box-sizing: border-box;
    /*加个padding和border测试*/
    padding: 20px;
    border: 5px black solid;
}
/*ps设置：文本框不允许拖动，免得破坏布局*/
textarea{
    resize: none;
}

转载于:https://www.cnblogs.com/xutaowang/p/9102912.html

dingpu2320

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动布局与定位布局

1 html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动布局与定位布局</title> <link rel="stylesheet" href="css/float....
复制链接

扫一扫