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

来源：互联网发布：如何看端口通不通编辑：程序博客网时间：2024/05/17 23:28

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的高度一般不建议设置，因为会影响内容显示。会影响扩展。
受浮动影响
使用overflow清除浮动影响

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}

阅读全文

0 0