CSS 布局初探

来源：互联网发布：lua 脚本 java 编辑：程序博客网时间：2024/06/05 16:49

参考：CSS

布局是我们书写整个网页的基本，就是把整个页面的框架先打好，例如我们现实生活中房子
装潢的时候就有布局的概念（例如卫生间在哪里啊，厨房放在哪里啊，卧室放在哪里啊，客
厅放在哪里啊，这些都是布局的概念），我们网页也是的，一个网页可以看成是由几个不同
的部分组成，这些组成部分我们可以使用div容器去存放他们（这也是div叫做容器的原因），
布局有多种方式

1.固定浮动布局
固定浮动布局即是用固定的值将元素的长度设置为固定不变，然后配合浮动的技术实现整个
页面的一个布局。
网页的主要内容一般都是在我们浏览器的中间位置展示的，固定浮动布局会将中间的内
容整体长度使用固定的值定死，因为是固定死的所以中间主要内容占用浏览器的长度空间是
有讲究的，这个需要跟我们的用户的屏幕分辨率对应起来，不要超过大多数的人屏幕分辨率
的长度。
知识要点：1）块级元素怎么相对于父元素居中？
元素需要设置长度，元素左右的外边距设置为 auto 即可！
2）元素都可以看成是一个盒子，这些盒子很多都有一个自己默认的内边距或者外
边距，并且每个浏览器默认的距离还有可能不太一样，这样对于我们页面布局或者具体
的细节的定位产生影响，那么我们应该怎么办？
这里写图片描述
可以利用把元素的长度设置成百分比，或者利用相对定位或绝对定位的概念来布局

这里写图片描述

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8" /><title>第四章 用CSS给网页装潢[9] -布局初探</title><style type="text/css">body,ul,li,p,img {    margin:0px;    padding:0px;}/*#box {    width:860px;    height:600px;    background:pink;    margin-left:auto;    margin-right:auto;}*/#header {    width:860px;    height:100px;    background:pink;    margin:0px auto 10px auto;}#left {    width:650px;    height:400px;    background:green;    float:left;    margin-bottom:10px;}#right {    width:200px;    height:400px;    background:blue;    float:left;    margin:0px 0px 10px 10px;}#bottom {    width:860px;    height:100px;    background:orange;    margin:0px auto;    clear:both;}#main {    width:860px;    margin:0px auto;}#div1,#div2,#div3,#div4 {    width:100px;    height:100px;}#div1 {    background:black;    float:left;}#div2 {    background:blue;    float:left;}#div3 {    background:orange;    float:left;}#div4 {    background:#cccccc;    float:left;}#divTop {    width:400px;    height:200px;    margin:0 auto;}#divBottom {    width:400px;    height:200px;    margin:0 auto;}</style></head><body><div id="header">头部</div><div id="main">    <div id="left">        <div id="divTop">            <div id="div1">div1</div>            <div id="div2">div2</div>        </div>        <div id="divBottom">            <div id="div3">div3</div>            <div id="div4">div4</div>        </div>    </div>    <div id="right">右侧</div></div><div id="bottom">底部</div></body></html>

阅读全文

0 0