CSS：标准文档流、浮动、绝对定位—（解决有时候父元素不能自动扩展）

CSS(表现标准语言)的三种定位机制

标准文档流：从上到下、从左到右，由块级标签（独占一行div ul li dl dt ）和行级元素（同一行显示）组成

自动居中 margin：0 auto；设置margin之后不能同时设置float和position

浮动：float（实现块级元素横向排版）：left none right 向左或向右移动，直至碰到容器为止。

当元素没有设置宽度值，而设置浮动属性，元素的宽度随内容的变化而变化。设置浮动之后，会对紧邻它之后的元素产生影响。

清除浮动：1.clear :both left right 2.width: 100%;overflow: hidden;(第二种原理不是很清楚）

浮动影响：父包含块没有设置浮动，子模块设置浮动，父包含块会被影响，不能进行扩展，而clear是对浮动之后的元素有用，所以对父包含块需要用 overflow ：hidden（移除属性）来清除浮动影响。
div的高度一般不建议设置，因为会影响内容显示。会影响扩展。

position 定位

static（静态定位）
relative（相对定位）相对自身原有位置进行偏移（拥有偏移位置和z-index属性）
absolute fixed（绝对定位）（建立了以包含块为基准的定位，完全脱离了标准文档流，拥有偏移位置和z-index属性）

偏移参照：
未设置偏移量的时候，无论是否存在已定位祖先元素，都保持在元素初始位置，但脱离标准文档流。
根据他的祖先标签，若祖先标签有定位，则根据近邻祖先标签位置偏移。

盒子模型：网页布局的基石，4部分组成（块级标签、行级元素都是盒子）margin padding border content

href=”#”：链接当前页面
hover{text-decoration:underline;}: 就是鼠标移动到文字上时,文字底边就有一条线(下划线),鼠标移走了下划线就消失了。
a{text-decoration:none;} CSS文字修饰为无;一般用于设置清除超链接的默认下划线:

html代码

<!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>
<link rel="stylesheet" href="../css/lianxi_2.css" />
</head><body>
<div id="wrap"><div id="header"><a href="#">联系我们</a>|<a href="#">站点地图</a></div><div id="mainbody"><div class="content profile"><h2>:: 关于幾米 ::</h2><p>幾米，一位用画笔描绘梦想、吸引无数读者画迷为之疯狂，知名度迅速窜升的当红绘本作家，同时却也是一个腼腆善良的中年男子，偏好简单的居家生活，低调而淡泊。</p><p>幾米的个性害羞内向，不擅长用言语表达，他用敏锐细腻的心去感受周遭的人与事，将情感、思绪藉由「绘画」传达他对大千世界的看法，作品风貌多变，创作力源源不绝，因此看幾米的作品，就像是走入他的内在，幾米的故事引领着每一位欣赏他作品的人看到并相信世界上的美与善，同时也反应了现代人生活中的点点滴滴，因此每个人都能在他的故事找到一个映照和寄托，或许这就是幾米作品的迷人之处。</p><p>幾米，绘本作家，文化大学美术系毕业，曾在广告公司工作十二年，后来为报纸、杂志等各种出版品画插画 。1998年开始创作，发表《森林里的秘密》和《微笑的鱼》，拿下当年度中国时报开卷最佳童书、民生报好书大家读年度最佳童书，以及联合报读书人最佳童书奖。 1999年出版《向左走．向右走》，开创出成人绘本的新型式，兴起一股绘本创作风潮。本书获选为1999年金石堂十大最具影响力的书，并已改编成电影、电视剧。之后陆续推出《听幾米唱歌》、《月亮忘记了》、《森林唱游》、《我的心中每天开出一朵花》等作品，展现惊人的创作力和多变的叙事风格。 2001年出版《地下铁》，获选2002年金鼎奖推荐优良图书，并改编成音乐剧和电影。次年《照相本子》、《1.2.3.木头人》和《我只能为你画一张小卡片》获选2002年行政院新闻局推介中小学生优良课外读物图书类推荐读物。2002年《布瓜的世界》甫上市便登上各大书店畅销排行榜第一名。 2003、2004年陆续出版《幸运儿》、《你们我们他们》、《又寂寞又美好》、《履历表》、《遗失了一只猫》等作品，内容风格上更形突破。2005年的《小蝴蝶小披风》和《失乐园》开始经营角色，多变的故事节奏有不同于以往的阅读趣味。 作品风靡两岸三地，美、法、德、希腊、韩、日、泰等国皆有译本。学界和媒体多次以「幾米现象」为主题分析评论。 2003年Studio Voice杂志选为亚洲最有创意的五十五人之一。 </p></div><div class="content book"> <a href="#"><img src="http://img.mukewang.com/536c9dc30001135400800080.jpg" width="80" height="80" /></a> <a href="#"><img src="http://img.mukewang.com/536c9de300012a0500800080.jpg".width="80" height="80" /></a> <a href="#"><img src="http://img.mukewang.com/536c9dfe0001b81b00800080.jpg" width="80" height="80" /></a> <a href="#"><img src="http://img.mukewang.com/536c9fa00001f6dd00800080.jpg" width="80" height="80" /></a><a href="#"><img src="http://img.mukewang.com/536c9fad0001f29800800080.jpg" width="80" height="80" /></a> <a href="#"><img src="http://img.mukewang.com/536c9fb90001d71b00800080.jpg" width="80" height="80" /></a></div></div><div id="footer">copyright © 2004-2012 Jimmyspa.com All Rights Reserved.</div>
</div>
</body>
</html>

css代码


*{margin:0; padding:0; font-size:12px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋体";}
a{text-decoration:none;}
a:hover{text-decoration:underline;}h2{line-height:30px; font-size:14px; margin-bottom:5px;}
p{line-height:24px; text-indent:26px; margin-bottom:5px;}#wrap{width:770px; margin:0 auto;}#header{width:762px; border:4px solid #badbdb; background:url(../img/banner.gif) no-repeat; height:92px; text-align:right; color:#fff;}
#header a{color:#fff; margin:0 5px;}#mainbody,#footer{width:100%;}
#footer{text-align:center; padding:20px 0;}.content{background:#eff9f9; padding: 44px 15px 15px; border:4px solid #badbdb;}
.profile{background:url(../img/t_profile.gif) no-repeat #eff9f9;}
.book{background:url(../img/t_book.gif) no-repeat #eff9f9;}
.book img{border:1px solid brown; margin:10px 15px}

CSS：标准文档流、浮动、绝对定位—（解决有时候父元素不能自动扩展）相关推荐

html 浮动脱离文档流,CSS标准文档流与脱离文档流
标准文档流文档流:指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素. 标准流的微观现象: 空白折叠现象: 在 ...
05-CSS 权重盒模型标准文档流浮动
一.权重问题 1.1. !important 标记可以通过 k : v !important 来给一个属性提高权重,这个属性的权重是无穷大的. <style>.spac2{color: ...
CSS标准文档流，在线面试指南
前言过完年了,准备实习的你是已经在实习了,还是已经辞职回家过年,准备年后重新找工作呢,又或者是准备2021年春招? 那么还没没踏出校门或者是刚出校门没多久的同学们该如何准备前端校招的面试呢? 面试知 ...
web前端开发自学课程，CSS标准文档流，超详细
前言又逢金三银四,拿到大厂的offer一直是程序员朋友的一个目标,我是如何拿到大厂offer的呢,今天给大家分享我拿到大厂offer的利器,前端核心知识面试宝典,内容囊括Html.CSS.Javas ...
web开发课程，CSS标准文档流与脱离文档流，已整理成文档
前言年前准备换工作,总结了一波面试最频繁的面试问题跟大家交流.此文章是关于浏览器的常见问题,大概面试10家遇到6家提问类似问题(主要是大厂和中厂).目前入职滴滴出行成都团队. 前端核心 1.JSON ...
CSS标准文档流与脱离文档流，成功拿到offer
什么是HTML? HTML: ( Hypertext Markup Language )超文本标记语言,是一种标识性的语言.它包括一系列标签．通过这些标签可以将网络上的文档格式统一,使分散的Inter ...
web开发技术培训学校，CSS标准文档流与脱离文档流
字体样式 font-weight: 文字粗细 normal: 默认值,标准粗细 bold:粗体 bolder:更粗 lighter:更细 100~900:设置具体粗细,400等同于normal,而70 ...
css span 右端对齐_CSS标准文档流
web页面的制作,是个"流",像水流一样,必须从上往下,一点点的编织,不像画画,可以这个地方画一个,另一个地方画一个,随意而为. 标准文档流的一些微观现象 1. 空白折叠现象 1) ...
CSS盒模型、标准文档流、浮动
一.盒模型无论是div.span.a都是盒子,一个图片.表单元素一律看做文本看待. 二.标准文档流 1.块级元素霸占一行,不能和其他元素并列一行. 能接收宽高,设置宽高有效. 如果不设置宽高,宽高 ...

CSS：标准文档流、浮动、绝对定位—（解决有时候父元素不能自动扩展）

CSS：标准文档流、浮动、绝对定位—（解决有时候父元素不能自动扩展）相关推荐

最新文章

热门文章