【HTML5学习笔记】36：CSS传统布局下

来源：互联网发布：远程监控软件下载编辑：程序博客网时间：2024/06/04 19:51

本节学习一下定位布局，以及在布局中出现的一些问题，以及用CSS提供的属性去解决问题。
[1]position定位属性
这个属性用于规定元素的定位类型。
这里写图片描述

*定位前

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS传统布局->定位布局</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <header>        头部    </header>    参考点</body></html>

@charset "utf-8";body{    margin: 0px 100px;    height: 1700px;    border: 1px solid red;     background-image: url(img.jpg);}header{    width: 100px;    height: 100px;    background-color: #CCCC33;}

这里写图片描述

*绝对定位
(脱离文档流，以页面左上角0,0为起点)

header{    position: absolute;    width: 100px;    height: 100px;    background-color: #CCCC33;}

文档流是指元素是占位的，如果脱离文档流那么这个元素就不占用位置了，就像浮起来了一样。
这里写图片描述
因为header盒子脱离了文档流，不占用空间了，所以参考点三个字就跑到body盒子的左上角了，也就被header盒子遮住了。

*这时候就可以用top,left,right,bottom来规定位置了

header{    position: absolute;    width: 100px;    height: 100px;    background-color: #CCCC33;    top: 0;    left: 0;}

这里写图片描述
滚动条向下拉，它还是会被遮住，因为是以文档左上角为定位。

*z-index属性
多个元素做绝对定位，通过z-index属性设定层次关系，即谁覆盖谁。auto是默认，还可以设置数字，数字越大表示层次越高。

*以窗口参考定位
(脱离文档流，以窗口左上角0,0为起点，即会随着滚动条滚动而滚动)

header{    position: fixed;    width: 100px;    height: 100px;    background-color: #CCCC33;    top: 0;    left: 0;}

这里写图片描述

*相对定位
(不脱离文档流，占位偏移)

header{    position: relative;    width: 100px;    height: 100px;    background-color: #CCCC33;    top: 10px;    left: 0;}

可以看到是在自己原来的位置上，向下偏移了10px：
这里写图片描述
而参考点没有移动，证明这个header盒子是没有脱离文档流的。

[2]特殊用法-区域性绝对定位
既要脱离文档流(与其它盒子不冲突)，又要以父元素为参考点，即区域性绝对定位。

①将需要设置为参考点的父元素设置成相对定位，且不设置坐标

body{    margin: 0px 100px;    height: 1700px;    border: 1px solid red;     background-image: url(img.jpg);    /***/    position: relative;}

②如果父元素设置了参考点，子元素的绝对定位以父元素为基准

header{    /***/    position: absolute;    width: 100px;    height: 100px;    background-color: #CCCC33;    top: 0px;    left: 0;}

这里写图片描述

[3]定位布局

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS传统布局->定位布局</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <header>        头部    </header>    <aside>        侧栏    </aside>    <section>        内容栏    </section>    <footer>        底部栏    </footer></body></html>

@charset "utf-8";body{    width: 1400px;    margin: 0px auto;    background-image: url(img.jpg);    position: relative;/*父元素做了相对定位*/}header{    position: absolute;    top: 0;    left: 0;    /* 注意做成绝对定位时长度高度要指明 */    width: 1400px;    height: 120px;    background-color: #CCCC33;}aside{    position: absolute;    top: 120px;    left: 0px;    width: 200px;    height: 750px;    background-color: #336699;}section{    position: absolute;    top: 120px;    right: 0;    width: 1200px;    height: 750px;    background-color: #CCFF99;}footer{    position: absolute;    top: 870px;    left: 0;    width: 1400px;    height: 60px;    background-color: #FFFFCC;}

这里写图片描述
这是固定的定位布局，要改成流体的定位布局，只需要把长度和高度都改成百分比的形式即可。

[4]解决布局的外边距和边框问题
给盒子加上padding内边距和border边框会改变盒子的尺寸，这样前面学的几个布局都会受到影响，可以使用box-sizing属性设定它们的解析方式，选择避免因加上内边距和边框而改变盒子尺寸。
这里写图片描述
这个属性目前需要考虑浏览器兼容性问题，没有-o-前缀。

[5]resize改变元素尺寸大小
这里写图片描述
表单元素textarea默认可以调节，普通元素需要overflow:auto再配合resize属性才可以。

*测试代码

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS传统布局->定位布局</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <header>        头部    </header>    <aside>        侧栏    </aside>    <section>        内容栏        <textarea>我是textarea，默认就可以调节我...</textarea>    </section>    <footer>        底部栏    </footer></body></html>

@charset "utf-8";body{    width: 1400px;    margin: 0px auto;    background-image: url(img.jpg);    position: relative;/*父元素做了相对定位*/}header{    position: absolute;    top: 0;    left: 0;    /* 注意做成绝对定位时长度高度要指明 */    width: 1400px;    height: 120px;    background-color: #CCCC33;    overflow: auto;    resize: vertical;}aside{    position: absolute;    top: 120px;    left: 0px;    /*加上内边距和边框，并设置解析方式*/    border:5px solid red;    padding: 20px;    box-sizing: border-box;    width: 200px;    height: 750px;    background-color: #336699;}section{    position: absolute;    top: 120px;    right: 0;    width: 1200px;    height: 750px;    background-color: #CCFF99;}footer{    position: absolute;    top: 870px;    left: 0;    width: 1400px;    height: 60px;    background-color: #FFFFCC;}

这里写图片描述

阅读全文

0 0

【HTML5学习笔记】36：CSS传统布局 下

【HTML5学习笔记】36：CSS传统布局下