1、块级元素：如：<div></div>
2、行内元素：如：<span></span>
从效果中看块级元素与行内元素的区别：


通过CSS的设置把行内元素转换成块级元素：


标准流：就是标签的排列方式。
<div class="style2">我的未来不是梦</div>
<span id="st" class="style1">栏目一</span>
<span class="style2">栏目二</span>
<br />
<span class="style3 guaiji">阳光男孩</span>
<span class="style3 ">栏目三</span>
以上是标签的一个排列方式，以下是网页内容的呈现方式，它是以标签的排列方式来呈现的

这就是我们对标准流的理解（就象流水，排在前面的标签内容前面出现，排后面的标签内容后面出现）

盒子模型：


下面在CSS样式文件中设置边框border：
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
}
.guaiji
{
display: block;
}

以上对边框的设置可以简写为：border:2px blue solid;运行效果一样。
下面设置内边距padding:
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
}
.guaiji
{
display: block;
}

以上出现边框线不平的现象是把行内元素转换成块级元素所产生的不良效果
下面设置外边距margin
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
margin:4px;
}
.guaiji
{
display: block;
}

要注意的是：行内元素对于某些样式的设置是不起作用的比如：margin
下面对内容设置：
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
margin:5px;
width:200px;
height:70px;
}
.guaiji
{
display: block;
}
页面效果如下：

以上发现行内元素不起作用，进一步说明行内样式对于某些样式是不支持的
浮动：设置float:left;即让下面盒子靠在上面流动盒子的左边缘
.style1, .style2, .style3
{
background-color: #FAFEB1;
border-width:2px;
border-color:Blue;
border-style:solid;
padding:5px 0px 5px 10px;
margin:5px;
width:200px;
height:40px;
line-height:40px;
vertical-align:middle;
float:left;
}
.guaiji
{
display: block;
}
页面效果如下：

设置浮动之后，内容的排列已属于非标准流排列
不想对style3进行左浮动，可以清除浮动：
.style3
{
color: #00bbdd;
clear:left;
}
效果如下：

定位：下面对栏目一进行相对定位，偏移量为top:50px;（即相对于原来的位置进行偏移）
.style2
{
color: #ff0000;
position:relative;
top:50px;
}
效果如下：

改成绝对定位：
.style1
{
color: #0000ff;
position:absolute;
top:70px;
}
效果如下：

绝对定位是以其所在标签的父标签进行定位，如果其外面没有别的块级元素标签则以<body></body>为父标签进行定位

css的核心内容 标准流、盒子模型、浮动、定位等分析的更多相关文章

  1. CSS的W3C标准的盒子模型和低版本IE浏览器的盒子模型

    CSS中盒子模型的组成由内容区(content).内边距(padding).边框(border).外边距(margin)组成.内边距可细分为 padding-top.padding-right.pad ...

  2. 【css】IE盒子模型和标准W3C盒子模型

    其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型. 1.标准盒子 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 c ...

  3. CSS中的间距设置与盒子模型

    CSS间距 内补白 外补白 盒子模型 CSS间距 很多时候我们为了美观,需要对内容进行留白设置,这时候就需要设置间距了. 内补白 设置元素的内间距 padding: 检索或设置对象四边的内部边距 pa ...

  4. css盒子模型和定位

    content padding border margin 可以理解为在商场上看到的电视机. 电视机------content 装电视机的箱子边框有粗细------border 电视机与箱子之间的泡沫 ...

  5. css3盒子模型及其定位

    盒子模型常见相关属性和属性取值 /*基本属性*/ padding: padding-left/right/top/bottom border: border-left/right/top/bottom ...

  6. CSS——（2）与标准流盒模型

    部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...

  7. CSS（2）盒子模型、定位浮动

    盒子模型 盒子模型:一个盒子中主要的属性就5个.width与height.padding.border.margin.盒子模型标准有两种为标准盒模型和IE盒模型.学习上以标准盒子模型为主 width和 ...

  8. CSS学习笔记（float和盒子模型）

    1.当元素或者是它的包裹层设置了绝对定位或者是浮动,那么margin:0 auto;自动居中的效果就不会实现. 2.盒子模型的三位立体结构图中从第一层到第五层依次为:border.content+pa ...

  9. CSS box-flex属性，然后弹性盒子模型简介

    今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...

随机推荐

  1. [BZOJ3144][HNOI2013]切糕（最小割）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3144 分析:神题不解释 http://www.cnblogs.com/zig-zag/ ...

  2. Matlab中数组元素引用——三种方法

    Matlab中数组元素引用——三种方法   1.Matlab中数组元素引用有三种方法 1 2 3 1.下标法(subscripts) 2.索引法(index) 3.布尔法(Boolean) 注意:在使 ...

  3. xshell4|5远程连接工具

    志同道合,方能谈天说地! 对比其他的工具,对于功能来说xshell是比较厉害的.有能力的可以支持正版! Xshell4 链接: http://pan.baidu.com/s/1jHAgboa 密码: ...

  4. springMvc全局异常处理

    本文中只测试了:实现Spring的异常处理接口HandlerExceptionResolver 自定义自己的异常处理器 对已有代码没有入侵性等优点,同时,在异常处理时能获取导致出现异常的对象,有利于提 ...

  5. 献给那些每次调试时都要启动很多WEB项目的苦逼程序猿

    当一个解决方案包含多个WEB项目的时候,只要按F5调试,其它用不着的WEB项目也会自动添加到托盘里.很多新手都不知道如何解决这个问题,我也是刚知道. 在网上找了很多资料看到有2种解决方法: 1.把WE ...

  6. [转] JPQL

    原文地址:http://blog.csdn.net/suncaishen/article/details/6512028 select name ,age from user; //原生SQL语句 s ...

  7. 安全框架 SpringSecurity 和 Shiro 对比

    突然再次很想理一下权限的事,但是实在不知道实际情况选哪个框架好,现在整理下网上的资料,做一下对比. 1.Spring-security 对spring 结合较好,如果项目用的springmvc ,使用 ...

  8. Jquery.min.js 下载

    Jquery 下载:http://www.jq22.com/jquery-info122

  9. Java追加文件内容的三种方法

    import java.io.BufferedWriter; import java.io.File; import java.io.FileOutputStream; import java.io. ...

  10. 【Codeforces 723D】Lakes in Berland （dfs）

    海洋包围的小岛,岛内的有湖,'.'代表水,'*'代表陆地,给出的n*m的地图里至少有k个湖,求填掉面积尽量少的水,使得湖的数量正好为k. dfs找出所有水联通块,判断一下是否是湖(海水区非湖).将湖按 ...