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. FileShare枚举的使用(文件读写锁)

    开发过程中,我们往往需要大量与文件交互,但往往会出现很多令人措手不及的意外,所以对普通的C#文件操作做了一次总结,问题大部分如下: 1:写入一些内容到某个文件中,在另一个进程/线程/后续操作中要读取文 ...

  2. 【JavaEE企业应用实战学习记录】sessionListener

    package sanglp.servlet; import javax.servlet.ServletContext; import javax.servlet.annotation.WebList ...

  3. Day Seven(Beta)

    站立式会议 站立式会议内容总结 331 今天: 1)阅读html 5+文档 未来走h5路线 2)restful,未来开发接口 3)h5+demo运行 4)get 代码:a||(a=as); 5)js ...

  4. plsql解决中文乱码以及问号问题

    PLSQL执行sql语句,不识别中文,输出的中文标题显示成问号???? 输入sql语句select * from V$NLS_PARAMETERS查看字符集,查看第一行value值是否为简体中文 设置 ...

  5. Java--剑指offer（5）

    21.输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序列对 ...

  6. asp.net(C#)时间相减 得到天数、小时、分钟、秒差

    asp.net(C#)时间相减 得到天数.小时.分钟.秒差 DateTime dtone = Convert.ToDateTime("2007-1-1 05:00:00"); Da ...

  7. U盘装系统详细教程

    相信有的朋友去电脑城组装电脑的时候,会看见装机人员安装系统不再需要光驱,而插入U盘安装系统,U盘安装系统方便了许多,电脑光驱容易坏,使用寿命短,一般老电脑的光驱都不怎么好使,而U盘就不需要光驱就能安装 ...

  8. C# 后台获取WebApi 方法

    以下是方法 返货json数据 代码都有注释 /// <summary>        /// 请求webpapi        /// </summary>        // ...

  9. Hive UDF开发实例学习

    1. 本地环境配置 必须包含的一些包. http://blog.csdn.net/azhao_dn/article/details/6981115 2. 去重UDF实例 http://blog.csd ...

  10. 说说markdown和latex的简单比较

    latex是纯学术风格,写paper写书用 markdown是程序员风格,写笔记贴代码片段用 简单说,latex适合长篇.精致,比如数学公式.图片位置调整.表格样式调整.而markdown就是粗线条, ...