元素定位路过CSS ,打打酱油

上班之余抽点时间出来写写博文，希望对新接触的朋友有帮助。明天在这里和大家一起学习一下元素定位

              作为一个web 开发人员,都知道HTML 担任页面内容,CSS 担任页面款式,Javascript 担任页面行为.明天就来看看css 吧!

              CSS(Cascading Style Sheet),中文意为层叠款式表,是用于控制网页款式并答应将款式信息与网页内容分离的一种标记性语言.

    在了解CSS 的过程当中,我们可以从以下的四个方面动手:

    

    

    一.选择器:

              在CSS 中,选择器是一种模式,用于选择需要添加款式的元素.要使用CSS 对HTML页面中的元素实现一对一,一对多或者多对一的控制,这是CSS 选择器就发挥了它特有的功能了.

              CSS 选择器可以根据它的构成方法分为基本选择器和复合选择器

    

    二.盒子模型

              说道CSS 的时候,不得不说的就是盒子模型了.盒子模型是CSS 控制页面时一个很主要的概念,所有页面中的元素都可以看成是一个盒子,占据着必定的页面空间,一般来说这些被占据的空间往往都要比单纯的内容大,换个说法,可以通过调整盒子的边框和距离等参数,来调节盒子的位置和巨细,一个页面的由很多这样的盒子构成,这些盒子之间会相互影响.

    在看盒子模型之前,我们先来看看家里墙上挂着四幅画吧:

    

    墙上整洁排列的图片,就是一个很典范的盒子模型,那么来看看CSS中的盒子模型的样子吧:

    

    

    三.标准流

    标准流也被称为标准文档流:在不使用其他的与排列和定位相干的特殊的CSS 规则时,各种元素排列的规则.

    标准流分为两种:块级元素(block level )和行内元素(liline)

    

    1.块级元素block level:

    它们总是以一个块的情势表示出来,占据这一个矩形的区域,并且跟同级的兄弟顺次竖直排列,左右撑满,因此得名块级元素.

    

    2.行内元素(inline)

    对于文字这类元素,各个字母之间横向排列,到最右端自动折行,这就是"行内元素".

    

              说到标准流的时候,不得不说一下的就是<div> 标记和</span>标记.

              <div>(divsion)简略而言是一个区块容器标记,即<div>与</div> 之间相当于一个容器,可以容纳段落,标题,表格,图片,乃至章节,摘要和备注等各种HTML元素.可以把<div>与</div> 中的内容视为一个独立的对象,用于CSS 控制.声明时只需要对<div>进行相应的控制,其中的各标记元素都市随着改变.

    

    每日一道理
“一年之计在于春”，十几岁的年纪，正是人生的春天，别辜负了岁月老人的厚爱与恩赐。行动起来，播种梦想吧！

              <span>标记与<div>标记一样,作为容器标记而被广泛应用在HTML语言中.在<span>与</span>旁边一样可以容纳各种HTML元素,从而形成独立的对象.如果把"<div>"替换成"<span>",款式表中把"div" 替换成"span",执行后就会发现效果完整一样.可以说<div> 与<span> 这两个标记起到的作用都是独立出各个区块,在这个意义上是没有区分的.

    

              但是<div>与<span>还是有区分的,它们的区分在于,<div>是一个块级元素,它包围的元素会自动换行,而<span> 仅仅是一个行内元素.在它的前后不会换行.<span>没有结构上的易于,纯粹是应用款式,其他行内元素都不合适的时候,可以使用<span>元素.

    

    四.浮动和定位

    1.浮动(float)

    浮动的框可以向左或向右挪动,直到它的边缘遇到包含框或者另一个浮动框的边框位置.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表示得就像浮动框不存在一样.

    在CSS 中,我们通过float 属性来实现:

    

    

    浮动的时候,框就会离开标准流,当初来看看右浮动:

    

    当把框1向右浮动时,它离开标准流并且向右挪动,直到它的右边缘遇到包含框右边缘.

    

    当框1向左浮动时,它离开标准流并且向左挪动,直到它的左边缘遇到包含框的边缘,因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框2,使框2从视图消失了.

    如果把所有框都向左挪动,那么框1向左浮动直到遇到包含框.另外两个框向左浮动直到遇到前一个浮动框.

    

    

    如果包含框太窄,没法容纳水平排列的三个浮动元素,那么其他浮动块向下浮动,直到有足够的空间.如果浮动元素的高度不同,那么当它们向下挪动时可能被其他浮动元素"卡住".

    

    说完浮动,那就不得不说说定位了,我们来看看定位家族:

    2.定位

    

    (1) 静态定位(Static)

    这是默认的属性值,也就是该盒子按照标准流,一样也包括浮动方法进行布局.它表示坚持在本来应该在的位置上,即该值没有任何挪动的效果.

    (2)相对定位(relative)

    使用相对定位的盒子的位置常以标准流的排版方法为基础,然后使盒子相对于它在本来的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它前面的盒子仍以标准流方法看待它.

    (3)绝对定位(absolute)

    盒子的位置以它的包含框为基准进行偏移.绝对定位的盒子从标准流中离开.这意味着它们对其后的兄弟盒子的定位没有影响.其他的盒子就好像这个盒子不存在一样.

    (4) 固定定位(fixed)

    固定定位和绝对定位相似,只是以浏览器窗口为基准进行定位,也就是当拖动浏览器窗口的滚动条时,仍然坚持对象位置不变.

    

    想要做一个高效率的web 开放工作者,就要学会使用CSS .

    

文章结束给大家分享下程序员的一些笑话语录： 一程序员告老还乡，想安度晚年，于是决定在书法上有所造诣。省略数字……，准备好文房4宝，挥起毛笔在白纸上郑重的写下：Hello World