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. DIV+CSS 星号*

    常常我们在DIV+CSS布局的时候会遇到2处使用星号“*”,一个为以星号*没有命名名称的CSS选择器:另外一个是在CSS选择器里以*开头的CSS属性单词样式-CSS星号-CSS *知识介绍.接下来DI ...

  2. git 最常用命令

    新建分支 git branch a #分支名称为a 切换到develop分支 git checkout a 新建分支并切换 git checkout -b a 推送到远程分支 git push ori ...

  3. dijkstra 最短路算法

    最朴素的做法o(V*V/2+2E)~O(V^2)#include<iostream>using namespace std;#include<vector>#include&l ...

  4. mysql之旅【第二篇】

    创建,修改和删除表 1,创建表: create table 表名(属性名   数据类型   [完整性约束条件], 属性名   数据类型   [完整性约束条件], 属性名   数据类型   [完整性约束 ...

  5. Windows系统中path环境变量详解

    在学习JAVA的过程中,涉及到多个环境变量(environment variable)的概念,如PATH.正确地配置这些环境变量,是能够顺利学习.开发的前提.而经常出现的问题是:有的学习者能够按照提示 ...

  6. 大规模图的存储（前向星、next数组）

    大规模图的储存 在信息学中,经常会遇到比较大规模图,使用指针固然是很好的方法,不过一有指针速度不如数组之说,二有指针不如数组稳定之说,三有,也是最重要的,指针不如数组来得方便,这也便是大多数Oier不 ...

  7. js 日报 周报 月报 时间扩展 js

    当初做统计业务需要处理时间 周报:本周 上周 下周 近一周 月报上月 本月 等 需要使用时间处理 所以扩展了这些方法 <!DOCTYPE html> <html xmlns=&quo ...

  8. LINQ语法记录

    static void Main(string[] args) { List<Person> persons = new List<Person>(); persons.Add ...

  9. TeamViewer11的安全设置

    一.关闭随机密码,使用固定的复杂密码 二.关闭文件共享传输 三.关闭在线状态,关闭会议功能

  10. 安装Mysql提示1045错误解决方法

    MySQL安装提示一下错误 The security settings could not be applied to the database because the connection has ...