三种定位机制

1.标准文档流：从上到下，从左到右输出文档内容

2.浮动

3.绝对定位

需要注意的是块级元素如div p ul 等

　　　　　　行级元素如span strong img input等

块级元素与行级元素都是盒子模型，下面说下盒子模型

盒子模型

盒子模型是网页布局的基石，border padding margin

下面给出盒子3d模型图便于理解

常见布局

自动居中一列布局

布局时候最重要的是把握三个技能点：标准文档流，块级元素，margin属性

自动居中代码：margin：0 auto； auto会根据浏览器宽度自动设置两边外边距

需要注意的是：不能同时在设置float与绝对定位了！

浮动布局

float属性：left right none； float属性意思就是元素会左移或者右移直到碰到容器

设置float属性后，相邻元素即紧邻之后的元素受到了影响

清楚浮动的代码为：clear：both；

　　　　　　或者：width：100%；overflow：hidden；

横向两列布局

首先可以用浮动方法来实现

其次可以用绝对定位的方法，但用的不多主要用于一列宽度固定另一列宽度自适应的时候，需要注意的是 固定宽度列的高度要大于自适应列的高度

这里给出一段网页布局的代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style type="text/css">

 *{margin:0; padding:0;}

 #wrap{width:970px; margin:0 auto;}

 #mainbody{position:relative; margin-top:15px;overflow:hidden;}

 #left{float:left;width:110px; }

 #mid{float:left;width:650px;border:1px solid #999;margin-left:13px;}

 #right{position:absolute;border:1px solid #999;margin-left:790px;}

 </style>

 </head>

 <body>

 <div id="wrap">

      <div id="header"><img src="http://img.mukewang.com/5369cd6e0001a15b09700088.jpg" width="970" height="88" /></div>

      <div id="mainbody">

           <div id="left"><img src="http://img.mukewang.com/5369cd0e00011e3901090487.jpg" width="109" height="487" /></div>

           <div id="mid"><img src="http://img.mukewang.com/5369cd3c00013e9e06490439.jpg" width="649" height="439" /></div>

           <div id="right"><p>欢迎使用金山软件出品的爱词霸，在线查询你英语词汇、句子释义</p><img src="http://img.mukewang.com/5369cd540001d8e101770329.jpg" width="177" height="329" /></div>

   </div>

 </div>

 </body>

 </html>

从中可以看出 left与mid的横向两列采取了浮动的方法

right采取了绝对定位的方法

【网页布局基础】css布局学习总结的更多相关文章

  1. [CSS布局基础]居中布局的实现方式总结

    [原创]码路工人 Coder-Power 大家好,这里是码路工人有力量,我是码路工人,你们是力量. github-pages 博客园cnblogs 做Web开发少不了做页面布局.码路工人给大家总结一下 ...

  2. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  3. 网页代码DIV+CSS布局积累

    11.17 CSS英文命名在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#me ...

  4. absolute布局和css布局释疑

    jqueryui也不是万能的, 有时候, 也需要自己写一些, 由 css 和jquery结合的一些东西, 如: banner中, 依次播放的div等 ## 关于jquery设计的一些思想和理念?but ...

  5. Python之路-python(css布局、JavaScript)

    CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...

  6. CSS布局（下）

    1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...

  7. CSS布局方式--inline-block 布局

    布局其实就是想办法怎样将一些元素横向的排列起来,纵向由于块级元素的存在会自动占据一行. inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行,而且使用 inline-bl ...

  8. 2020年12月-第02阶段-前端基础-CSS Day06

    CSS Day06 定位(position) 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布 ...

  9. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  10. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

随机推荐

  1. shell使用reposync同步仓库

  2. signal - 有效信号的清单

    描述 (DESCRIPTION) 下面 列出 Linux 支持的 信号. 某些 信号 依赖于 体系结构(architecture). 首先, POSIX.1 描述了 下列 信号. 信号 值 动作 说明 ...

  3. IMU预积分

    https://www.sohu.com/a/242760307_715754 http://www.sohu.com/a/243155537_715754 https://www.sohu.com/ ...

  4. yum 仓库搭建与源码包安装实战

    目录 一.yum 仓库自建示例: 二.源码包安装实践 基础环境 服务端配置 下载及安装fpm软件 客户端: 一.yum 仓库自建示例: 1.安装ftp服务 yum -y install vsftpd ...

  5. linux文件管理--压缩打包

    目录 linux文件管理--压缩打包 1.压缩打包介绍 2.gzip压缩工具 3.zip压缩工具 注意: 4.tar压缩工具 5.tar生产案例实践 linux文件管理--压缩打包 1.压缩打包介绍 ...

  6. 【C/C++】知识点系统复习 （第一周）

    2018/12/18 周二 1. C++内存布局分为几个区域,每个区域有什么特点? 主要可以分为 5 个区域, (1) 栈区:由编译器自动分配释放,存放函数的参数值,局部变量的值等.其操作方式类似于数 ...

  7. 【串线篇】idea下的springboot入门配置

    1.Spring Boot 简介 简化Spring应用开发的一个框架: 整个Spring技术栈的一个大整合: J2EE开发的一站式解决方案: 2.微服务 2014,martin fowler 微服务: ...

  8. c++后台开发面试常见知识点总结（三）操作系统

    静态链接库和动态链接库的区别 一个进程可以通过调用waitpid函数来等待它的子进程终止或者停止 Debug和Release的区别 临界区互斥量信号量事件进程互斥与同步 进程有哪几种状态,状态转换图, ...

  9. js 对象属性和使用方法学习笔记

    对象的引用 在ECMAScriipt中,不能访问对象的物理表示,只能访问对象的引用.每次创建对象,存储在变量中的都是对象的引用,而不是对象本身. 对象的废除 ECMASript拥有无用存储单元收集程序 ...

  10. 【leetcode】922. Sort Array By Parity II

    题目如下: 解题思路:非常简单的题目,引入两个变量oddInx = 1和evenInx = 0,和与A等长的结果数组res.然后遍历A,如果A[i]为偶数,则令res[evenInx] = A[i], ...