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. BroadcastReceiver之发送自定义无序广播

    首先,发送一个自定义广播:(用sendBroadcast(intent)发送一条无序广播) public void click(View v){ Intent intent = new Intent( ...

  2. 线性表的顺序存储结构C语言版

    #include <stdio.h> #define MAXSIZE 101 #define N 10 typedef struct SeqList { int data[MAXSIZE] ...

  3. 【BZOJ 4636】蒟蒻的数列

    http://www.lydsy.com/JudgeOnline/problem.php?id=4636 DCrusher贡献的题目 看了他的博客,有两种做法,动态开点线段树和离线操作离散化区间线段树 ...

  4. 模板题 codevs 1993 草地排水 想学习的请看链接

    不能再水的题了. Dinic算法,比EK更快. 想要学习请看链接   https://comzyh.com/blog/archives/568/ 并附上我的模板(其实和comzyh大神的一样) #in ...

  5. 强连通 HDU 1827

    n个点m条边 n个权lcy 要叫这个人的花费 m条边 缩点后 新的图中 入度为0的点要通知  通知强连通分量中权值最小的 #include<stdio.h> #include<alg ...

  6. 安装Win7提示Windows无法安装到磁盘怎么办

    Windows之家(www.windowszj.com):在安装Win7系统的过程中,由于每台电脑的状态不一样,比如硬件配置原因,或者是硬盘格式.硬盘状态等问题,会使得每台电脑在安装过程中都会有些不一 ...

  7. apache ab压力测试

    今天提到压力测试,想起以前看到的ab,于是又重新查找了下资料,并记录了下. ab命令会创建很多的并发访问线程,模拟多个访问者同时对某一URL地址进行访问. 它的测试目标是基于URL的,因此,既可以用来 ...

  8. 机器学习Python包

    随着机器学习的逐日升温,各种相关开源包也是层出不群,面对如此多种类的工具包,该如何选择,有的甚至还知之甚少或者不知呢,本文简单汇总了一下当下使用比较多的Python版本机器学习工具包,供大家参看,还很 ...

  9. perl push an array to hash

    #!/usr/bin/perl use strict; use warnings; use Data::Dumper; my @array=qw /fm1 fm2 fm3 fm4 fm5 fm6/; ...

  10. NGUI之添加响应函数

    public void ButtonNextClicked() { SelectIndex++; SelectIndex %= ; showGameObject(); } public void Bu ...