【网页布局基础】css布局学习总结
三种定位机制
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布局学习总结的更多相关文章
- [CSS布局基础]居中布局的实现方式总结
[原创]码路工人 Coder-Power 大家好,这里是码路工人有力量,我是码路工人,你们是力量. github-pages 博客园cnblogs 做Web开发少不了做页面布局.码路工人给大家总结一下 ...
- 从三栏自适应宽度布局到css布局的讨论
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
- 网页代码DIV+CSS布局积累
11.17 CSS英文命名在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#me ...
- absolute布局和css布局释疑
jqueryui也不是万能的, 有时候, 也需要自己写一些, 由 css 和jquery结合的一些东西, 如: banner中, 依次播放的div等 ## 关于jquery设计的一些思想和理念?but ...
- Python之路-python(css布局、JavaScript)
CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...
- CSS布局(下)
1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...
- CSS布局方式--inline-block 布局
布局其实就是想办法怎样将一些元素横向的排列起来,纵向由于块级元素的存在会自动占据一行. inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行,而且使用 inline-bl ...
- 2020年12月-第02阶段-前端基础-CSS Day06
CSS Day06 定位(position) 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
随机推荐
- 2019-10-31-WPF-等距布局
title author date CreateTime categories WPF 等距布局 lindexi 2019-10-31 9:0:2 +0800 2018-2-21 17:3:4 +08 ...
- Razor 保存动态表格
本文转载自 ASP.NET MVC数组模型绑定 ,https://www.cnblogs.com/choon/p/5429065.html 内容根据评论内容中的方式有所调整 在ASP.NET MVC ...
- 【Kickstart】2017 Round (Practice ~ G)
Practice Round Problem A Country Leader (4pt/7pt) Problem B Vote (5pt/8pt) Problem C Sherlock and Pa ...
- 自从学会了 Array.reduce() ,再也离不开它
(转载)原文链接:https://juejin.im/post/5dfd9d27e51d455825129ec3 在所有后 ES6 时代的数组方法中,我觉得最难理解的就是Array.reduce( ...
- c++后台开发面试常见知识点总结(五)场景设计
搜索引擎的实现,会用到哪些重要的数据结构 设计实现一个HTTP代理服务器 / web服务器 / FTP服务器/ 设计实现cache缓存web服务器的网页访问记录 把一个文件快速下发到100w个服务器 ...
- python--MySql 表记录的操作
表记录的增删改查 ---插入表记录 全列插入:insert into 表名 values(...) 缺省插入:insert into 表名(列1,...) values(值1,...) -- 插入一条 ...
- nucleus plus代码学习
int.S: ;************************************************************************ ;* ;* FUNCTION ;* ; ...
- linux-usb软件系统架构
1.软件系统架构 USB主控制器,芯片里面自带了得.为了让USB主控制器运行,所有有USB主控制器驱动. USB核心,内核提供好的USB协议之类的.USB设备驱动是针对插到接口的设备去工作的软件. 主 ...
- hdu 5279 YJC plays Minecraft——生成函数
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5279 令 n 个点的树的 EGF 是 g(x) ,则 \( g(x) = \sum\limits_{i=0 ...
- 仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时,才能为表'XXX'中的标识列指定显式值。
(来自:https://zhidao.baidu.com/question/494717175.html)第一条回复,原因和例子都有了,解释的很好. 插入数据时,自增长列是系统自动处理,不需要你来指定 ...