2014年度辛星css教程夏季版第六节
这一节我们就要讲到布局了，其实布局本身特别简单，但是要合理的布好局就不那么简单了，就像我们写文章一样，写一篇文章非常简单，但是要写一篇名著就很难了，这需要我们扎实的功底和对文学的理解，但是，千里之行，始于足下，我们开始吧。
************显示方式*************
1.有时候我们会设置一个元素的显示方式，比如我们在做导航条的时候，就会使用display：inline来使它们成为内联的样式。
2.下面先不说这个display，先说一下visibility属性把，它可以设置为hidden，即不显示，那么该块区域就显示一片空白。有一个类似的方法就是使用display：none，它也是设置不显示，但是它的作用却是让该元素消失，后面的元素会自动占据它的空间。
3.我们可以使用display：block使得它的显示成为一个块级元素，可以理解为强制性的换行，而display：inline则是强制性的使其不换行，向右排列。
4.变更元素的显示类型看该元素如何显示，看它是什么样的元素，比如一个内联元素设置为display：block是不允许有它的内部嵌套块元素的。
*************大小***************
1.对于一个HTML元素，我们可以通过设置它的width属性和height属性来设置其大小，也就是其宽度和高度。
2.还有一些其他设置大小的属性，感觉不是很常用，即没列举。
************定位*****************
1.第一种定位方式就是默认的方式，它是自上而下，从左到右的一个模式，也是最简单的一种模式。
2.第二种就是固定定位，它的位置相对于浏览器的窗口位置是固定的，即使窗口滚动，它也不会动，这种可以用来做那种广告条之类的，我们下面做一个示例，首先是HTML文件中书写代码如下：
<html>
<head>
<title>2014年辛星CSS教学夏季版</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<p>博客园辛星，无限温情</p>
</body>
</html>
然后就书写my.css文件，这里我们为了看出随着滚动条的滚动，该段文字的位置不变的特性，我们需要给浏览器窗口一定的大小：
body{width:400px;
height: 900px;}
p{position: fixed;
top:30px;
left: 50px;}
3.上面这种方式对浏览器的兼容不好，在IE8以下需要描述!DOCTYPE 才可以，这里的top指的是它的上面到浏览器的顶部的距离，left是指它的右端到浏览器的右端的距离。
4.相对定位：这里需要清楚相对“谁”的定位，这里的相对定位是相对于第一种方式的定位，即默认方式的定位，它会在默认方式的基础上进行一些修改，可以设置left等属性，如果设置left为-20px，则表示它相对于原始位置向左移动二十个像素，它也需要在postion属性中赋值为relative。
5.绝对定位：它需要指定position为absolute，也可以设置left和top或right等属性，如果该元素没有父元素，则它的位置是相对整个浏览器窗口来说的。
***************小结****************
1.本小节讲解了显示方式和定位方式，为后面的布局打下一定的基础。
2.我们下一小节将会讲解布局方面的问题。
2014年度辛星css教程夏季版第六节的更多相关文章
- 2014年度辛星css教程夏季版第五节
本小节我们讲解css中的”盒模型“,即”box model“,它通常用于在布局的时候使用,这个”盒模型“也有人成为”框模型“,其实原理都一样,它的大致原理是这样的,它把一个HTML元素分为了这么几个部 ...
- 2014年度辛星css教程夏季版第四节
接下来的这一节我计划讲解的是超链接和列表的样式,然后我们做出一个导航栏出来,其实导航栏是非常常见的,但是我们这里做得这个有点并不那么完善,等我们学完了css之后再完善它. ************** ...
- 2014年度辛星css教程夏季版第七节
本小节我们研究浮动的问题,浮动使得布局更加灵活,虽然我们前面也有关于布局的讲解,但是它们提供的内容还是太有限了,要想获得更强大的布局,还必须使用浮动才能完成更灵活的布局. ***********浮动* ...
- 2014年度辛星html教程夏季版第六节
不知道这样大家会不会感觉枯燥,总之不管大家怎么样,辛星始终会陪伴大家的,期待您的关注和支持,也衷心的希望我的博客能让您少走弯路,获得更系统的知识. ***************表格********* ...
- 2014年度辛星css教程夏季版第三节
第二节我们讲述的几乎全是CSS的选择器,那么下面这一节我们来讲一下CSS的颜色和文本的一些东西,虽然我对调色不大敏感,但是对于颜色还是比较感兴趣的. *********CSS中的颜色********* ...
- 2014年度辛星css教程夏季版第二节
第一节我们简介了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完善. *************注释***** ...
- 2014年度辛星css教程夏季版第一节
CSS是Cascading Style Sheets的缩写,即层叠样式表,它用于表现HTML的样式,即HTML只是去写该网页有哪些内容,至于如何去表现它们,由CSS去定制. ************* ...
- 2014年度辛星html教程夏季版第七节
经过前面六节的学习,我们大致清楚了HTML教程中的基础内容,那么接下来我们开始继续向后推进,可以说,下面我们介绍一下HTML中的区块. ***************区块*************** ...
- 2014年度辛星html教程夏季版第四节
我们前面也涉及了HTML中的一些东西,接下来我们要涉及到图像了,如果没有图像,即使文字的样式再多,再复杂,终归还是单调的,我们就需要用图片来给我们的网页增加更多的表现形式. ************* ...
随机推荐
- 转--xcode duplicate symbol问题
遇到引用库重复定义的问题,需要解决. 项目需要,同时引用ZBar和QQ授权登录SDK,由于二者均使用了Base64处理数据,XCode编译时报错: duplicate symbol _base64 ...
- Activity的启动模式及回退栈的概念
Activity的启动模式 standard 正常模式 在创建一个新的activity的时候,直接在栈顶创建一个新的activity singleTop 顶部单个 在创建一个新的activity的时候 ...
- iOS 导航控制器如何随意push和pop 想要在 A push B 后， B 在push 到 D ，然后从 D pop 到 C ,在从 C pop 的A
这里主要是对导航控制器的viewControllerss这个数组进行操作,因为push操作和pop操作都是根据这个数据去切换控制器或者在这个数组里增加控制器的,所以只要改变这个子控制器数据就能自定义切 ...
- 学习opencv中文版教程——第二章
学习opencv中文版教程——第二章 所有案例,跑起来~~~然而并没有都跑起来...我只把我能跑的都尽量跑了,毕竟看书还是很生硬,能运行能出结果,才比较好. 越着急,心越慌,越是着急,越要慢,越是陌生 ...
- Mybatis 动态获取字段值（不需要创建javabean）
最近遇到一个这样的需求,如下: 用户可以通过自定义模板选择需要查询显示的字段,需要动态查询显示. 前提:数据库有一张表,里面有400多个字段. 要求:用户在前台可以自定义模板,一个模板可能对应x个字段 ...
- posix thread条件变量
概述 等待条件变量总是返回锁住的互斥量. 条件变量的作用是发送信号,而不是互斥. 与条件变量相关的共享数据是“谓词”,如队列满或队列空条件. 一个条件变量应该与一个谓词相关.如果一个条件变量与多个谓词 ...
- 有关line-height的见解
line-height:简单的说就是行高,是两行文字之间基线的距离.基线是指在英语的书写的4线3格中,从上往下数的第三条线 1.line-height与行内框盒子模型 所有内联元素的样式表现都与行内框 ...
- extjs类的生命周期
只要extjs对应的类文件加载了,那么该类就可以构造对象或者用来继承了.
- ### 学习《C++ Primer》- 6
Part 6: 拷贝控制(第13章) // @author: gr // @date: 2015-01-08 // @email: forgerui@gmail.com 一.拷贝.赋值与销毁 拷贝构造 ...
- XIB 不能拖线的低级错误
问题描述 创建 XIB 文件后,与其相关联的.m文件进行拖线,但无论如何都无法拖线,过程无任何反应.清除缓存重启 Xcode 均无法解决. 解决方法 事实上这是个低级错误,原因为 xib 的 view ...