css布局

来源：互联网发布：linux yum安装rpm包编辑：程序博客网时间：2024/04/29 04:30

CSS布局

1、正常文档流

a) 正常文档流:在不进行特殊的定位和布局的前提下，HTML元素的布局遵循正常文档流，即块级元素，每个块级元素占一行，追加的另起一行；行内元素，追加时紧跟在后面，同一行内可以存在多了行内元素；

i. 实例:

<html><head><title>盒子模式</title><meta content="text/html" http-equiv="content-type" charset="UTF-8"><style type="text/css">*{margin:0}#container1{background-color:#cccccc;padding:5px;}#container2{background-color:green;padding:5px;}#a1{background-color:#2F4F4F;color:white;}#a2{background-color: #483D8B;color:white;}</style></head><body><div id="container1">元素1</div><div id="container2">元素2</div><a id="a1">元素3</a><a id="a2">元素4</a><div id="container2">元素5</div><a id="a2">元素6</a></body></html>

b) 浮动布局:通过对元素使用浮动布局，可以使元素脱离正常文档流，会使元素向左或向右移动，其周围的元素也会重新的排列。Float(浮动)往往用于图像、文字环绕效果；clear用于清除浮动布局；

i. 实例:

<html><head><title>图片浮动演示</title></head><style>img{float:left;margin-top:0px;}</style><body><p><img src = "1.gif"/></p><p id = "p1">我欲乘风归去，斜风细雨不须归。又欲做船去，船迟又遇打头风，屋漏偏逢连夜雨。人生郁郁不得志，更能消几番风雨，此事古难全，只好驭龟去。</p><p id = "p2">龟虽寿作者：曹操神龟虽寿，犹有竟时。腾蛇乘雾，终为土灰。老骥伏枥，志在千里。烈士暮年，壮心不已。盈缩之期，不但在天。养怡之福，可得永年。幸甚至哉，歌以咏志。</p></body></html>

2、定位布局

a) Static定位:HTML元素默认为没有定位，元素的排列遵循正常文档流，静态定位的元素不会受到top、bottom、left、right的影响；

b) Fixed定位:固定定位，元素的位置相对于浏览器窗口的位置固定，即使窗口滚动，元素也不会移动；

i. 实例:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>CSS固定定位</title>    <style>        #first        {            width:120px;            height:600px;            border:1px solid gray;            line-height:600px;            background-color:#B7F1FF;        }        #second        {            position:fixed;/*设置元素为固定定位*/            top:10px;/*距离浏览器顶部30px*/            left:160px;/*举例浏览器左部160px*/            width:60px;            height:60px;            border:1px solid silver;            background-color:#FA16C9;        }    </style></head><body>    <div id="first">无定位的div元素</div>    <div id="second">固定定位的div元素</div></body></html>

c) Relative定位:相对于元素正常位置的相对位置的定位；相对定位元素经常被用来做绝对定位的容器；

i. 实例:

<!DOCTYPE html><html><head><meta content="text/html" charset="utf-8"/>    <title>CSS相对定位</title>    <style type="text/css">        #father        {            margin-top:30px;            margin-left:30px;            border:1px solid silver;            background-color: #B7F1FF;        }        #father div        {            width:100px;            height:60px;            margin:10px;            border:1px solid silver;            background-color:#FA16C9;        }        #son2        {            /*这里设置son2的定位方式*/position:relative;left:5px;top:10px;        }    </style></head><body>    <div id="father">        <div id="son1">第1个无定位的div元素</div>        <div id="son2">相对定位的div元素</div>        <div id="son3">第2个无定位的div元素</div>    </div></body></html>

d) Absolute定位:绝对定位的元素的位置相对于最近的已定位的父元素，如果元素没有定位的父元素，那么该元素的位置为相对于<html>的位置；

i. 实例:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>CSS绝对定位</title>    <style type="text/css">        #father        {            padding:15px;            background-color:#09F;            border:1px solid silver;position:relative;top:0px;left:0px;        }        #father div        {            padding:10px;            background-color:#FCD568;            border:1px dashed red;        }        #son2        {            /*在这里添加son2的定位方式*/position:absolute;top:0px;left:0px;        }    </style></head><body>    <div id="father">        <div id="son1">box1</div>        <div id="son2">box2</div>        <div id="son3">box3</div>    </div></body></html>

e) 元素的重叠:通过使用z-index属性，可以设置元素的重叠顺序，属性值为正数或负数；

3、布局的分类

a) 单列布局:单列布局一般用于制作网页的首页，如百度或360，只有一列；

b) 两列布局:两列布局多用于列表、序列类型的网站；

c) 三列布局:多用于展示，如购物网站或是电影网等；

d) 混合布局

实例:

<html><head><title>后台管理信息</title><meta charset = "utf - 8"><link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"/><style type = "text/css">#top{position:fixed;top:0px;left:0px;height:80px;width:1920px;background:#33a3dc;}#right{position:fixed;top:80px;left:190px;width:1750px;height:900px;background:#d3d7d4;}img{position:absolute;top:10px;left:20px;width: 50px;height: 50px;background: #7fee1d;-moz-border-radius: 60px;-webkit-border-radius: 60px;border-radius: 60px;}#title{position:absolute;left:80px;font-size:14px;font-family:宋体;color:#fffffb;}#tool{position:absolute;top:30px;left:280px;}input{height:40px;width:100px;font-size:10px;}#stage{background-color:green;}#clear{background-color:#009ad6;}#exit{background-color:red;}#fu,#fs{position:absolute;top:16px;left:38px;}</style><script src = "jquery-3.1.1.js"></script><script type = "text/javascript"></script></head><body><div id = "top"><div id = "circle" ><img src = "images/y.jpg" /></div><div id = "title"><h1 id = "header">后台管理中心</h1></div><div id = "tool"><a href = "#" id = "stage"><span class="fa fa-home"></span> 前台首页</a>  <a href = "#" id = "clear"><span class="fa fa-wrench"></span> 清理缓存</a>  <a href = "#" id = "exit"><span class="fa fa-power-off"></span> 退出登录</a></div></div><div id = "left_top" style = "position:fixed;top:80px;left:0px;width:190px;height:50px;background-color:yellow;text-align:center;"><div id = "list"><span class="fa fa-th-list margin-middle" id = "fu"></span><h1 id = "header2"style = "font-size:18px;">菜单列表</h1></div></div><div id = "left_bottom" style = "position:fixed;top:130px;left:0px;width:190px;height:900px;background-color:green;"><span class="fa fa-user margin-middle" id = "fs"></span><h1 style="font-size:18px;text-align:center;">基本设置</h1><hr></hr><ul style = "left:30px;"><li><a href = "#">网站设置</a></li><li><a href = "#">修改密码</a></li><li><a href = "#">单页管理</a></li><li><a href = "#">首页轮播</a></li><li><a href = "#">留言管理</a></li><li><a href = "#">栏目管理</a></li></ul><hr></hr><span class = "fa fa-pencil-square-o margin-middle" id = "fl" style = "position:absolute;top:227px;left:38px;"></span><h1 style="font-size:18px;text-align:center;">栏目管理</h1><hr></hr><ul style = "left:30px;"><li><a href = "#">内容管理</a></li><li><a href = "#">添加内容</a></li><li><a href = "#">分类管理</a></li></ul></div><div id = "right_top" style = "position:fixed;left:190px;top:80px;width:1750px;height:50px;background-color:pink;"><div style= "position:absolute;left:30px;top:20px;"><a href = "#"><span class="fa fa-home"></span>首页</a><span style = "color:#fffffb">/</span><a href = "#"><span class="fa fa-home"></span>网站信息</a></div></div><div id = "right_bottom"></div></body></html>

1 0