前端菜鸟的自学之路（二）——CSS网页布局

来源：互联网发布：少帅汤玉麟知乎编辑：程序博客网时间：2024/05/22 04:13

基础教程
HTML+HTML5
CSS+CSS3
文中涉及到的具体属性已添加参考手册中的相关说明，查看有助于理解记忆。

课程
网页布局基础
本文类似于课程笔记、课程回顾，最好结合视频一起食用，口味更佳。
盒子3D模型

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS Box Model</title> <style>  #wrap{   background-color:#7794C9;   height: 1500px;   margin: 0 auto;   border: 1px solid #E85A90;  } </style></head><body> <div id="wrap"></div></body></html>

代码平台
敲了代码无法预览，需要在浏览器和文本编辑器之间来回切换，下面介绍一个在线制作测试页面的网站——CodePen

页面自动居中一列布局

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>CSS Layout</title>  <link rel="stylesheet" type="text/css" href="style.css"></head><body><div id="wrap">  <header>  </header>  <nav>  </nav>  <div class="mainbody">  </div>  <aside>  </aside>  <footer>  </footer></div><!--wrap--></body></html>

HTML页面的架构，包括头部、导航栏、主体、侧栏、页脚

/** 页面居中*/#wrap{  background-color: #B0B1C7;  width: 700px;  height: 1300px;  margin: 0 auto; /*根据浏览器的宽度自动设置两边的外边距 */}/** 页头部分的布局*/header{  background-color:#144199;  height:50px;}/** 导航栏的布局*/nav{  background-color:#E85A90;  height:60px;}/** 网页内容的布局*/.mainbody{  background-color:#5D76B0;  height:950px;}/** 侧边栏的布局*/aside{  background-color:#2C72C7;  height:200px;}/** 页脚的布局*/footer{  background-color: #B33D5A;  height: 40px;}

1、将所有元素放进一个div里统一设置width跟margin属性
2、给各个元素分别设置width、margin属性
因为找的实例里有分别设置属性，暂时不明白为什么分开写。

横向两列布局
常见的布局，关键是float浮动属性 + overflow属性，float属性值指定浮动位置，overflow属性值hidden将溢出部分修剪隐藏。

之前的练习中为各个元素指定高度，在不添加内容时能直观的显示网页的布局。但是在有实际内容时，我们不需要指定高度，内容的高度就是容器的高度。在HTML文档mainbody中添加两个div块，分别设置css属性，浮动在容器的左右两侧，并在mainbody中添加关键属性overflow设置值hidden。

未添加overflow属性

overflow:hidden;

添加overflow属性之后

多列布局：
利用margin属性设置间距。

清除浮动：

clear:both;

clear属性：清除元素左侧或右侧的浮动，适用于紧邻元素之间。

绝对定位布局
利用position属性来定位布局，position属性值有static静态的、relative相对的、 absolute绝对的、 fixed固定的。

position:relative;top: 50px;left: 50px;

相对偏移具有自身原有位置进行偏移、处于标准文档流、拥有偏移属性和z-index属性的特点。添加3个div块，设置box1的属性值

relative属性

.box2{  background-color: green;  position:absolute;}

设置绝对定位，不设置偏移量。
盒子的大小为内容大小。特点：建立以包含块为基准的定位，脱离标准文档流，拥有z-index属性和偏移属性。

绝对定位

设置偏移量

有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照基准
无已定位祖先元素，以html为参照基准

box1为已定位的祖先元素

box2有已相对定位的祖先元素box1，设置偏移量

  position:absolute;  top:20px;  left: 20px;

无相对偏移量

无已定位的祖先元素
注意：如若祖先元素是静态定位，仍已html元素为基准进行偏移。

使用absolute实现横向两列布局
常用于一列固定宽度，另一列宽度自适应的情况。

父元素相对定位
自适应宽度元素绝对定位
注意：固定列的高度 > 自适应列的高度

.mainbody{  background-color:#5D76B0;  overflow:hidden;  position:relative;}.box1{  width: 450px;  height: 50px;  background-color: red;  position: absolute;  left: 250px;}

绝对定位实现两栏布局

CSS布局资料
Learn CSS Positioning in Ten Steps
学习CSS布局

阅读全文

0 0