OK!接下来我们分别说这些元素的意义。首先，什么是块级元素？在html中<div>,
<p>,<h1>,<form>,<ul>和<li>就是块级元素。（ul标签和li标签还记得是什么意思
吧？）设置display:block就是将元素显示为块级元素。如：a{display:block;}
这里就是将内联元素a转换为块状元素，从而使a元素具有块状元素的特点。那么
它有哪些特点呢？1.每个块级元素都从新的一行开始，并且其后的元素也另起一
行。（真特么的霸道，一个块级元素独占一行）2.元素的高度、宽度、行高以及顶
和底边距都可设置。3.元素宽度在不设置的情况下，是它本身父容器的100%（和
父元素的宽度一致），除非设定一个宽度。如需验证的话，最好是设置底色，这样
比较好显现效果。
然后是内联元素。在html中，<span>,<a>,<label>,<strong>和<em>就是典型的内
联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline
将元素设置为内联元素。如：
div{
 
dispaly:inline;
}
<div>我要变成内联元素</div>
这里就是将块状元素div转换为内联元素，从而使div元素具有内联元素特点。
内联元素的特点又有哪些呢？如下：1.和其他元素都在一行上；2.元素的高度、宽
度及顶部和底部边距不可设置；3.元素的宽度就是它包含的文字或图片的宽度，不
可改变。
这里要注意一个点，就是内联元素之间有一个间距问题。感兴趣可以试验一下。
内联块状元素就是同事具备内联元素，块状元素的特点，代码display:inline-block
就是将元素设置为内联块状元素<img>,<input>标签就是这种内联块状标签。
inline-block元素特点：1.和其他元素都在一行上
2.元素的高度、宽度、行高以
及顶和底边距离都可设置。
然后劲爆的来了。我们来说说盒子模型。那么到底是什么呢？
谢特，我实在不好打字。给你们段视频http://www.imooc.com/video/3225
这段视频是前奏，我们常用的<div>,<ul>,<ol>,<p>,<h>,<table>标签等等这些块
级标签都具备盒子模型的特征。记住几个关键词，有：填充物padding
margin

border而且有四个方向。具体可以百度一下。
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细，样式
和颜色（边框三属性）注意：1.border-style（边框样式）常见样式有：dashed
（虚线）dotted（点线）solid（实线）然后我插一句话，千万不要写错字母。。
2.border-color（边框颜色）中的颜色可设置为十六进制颜色，如：border-color:#888;
前面的井号千万不要忘记！！！3.border-width（边框宽度）中的宽度也可以设置
为：thin|medium|thick（但是不是很常用），最常用的还是px。这里的三个属性
我查询了一下分别的意思是：定义细的边框|默认。定义中等的边框|定义粗的边框
当然，还有两个属性，分别是length和inherit，length是允许您自定义边框的宽度
inherit是规定应该从父元素继承边框宽度。但是最好还是用px，方便我们啊~~~
现在有一个问题，如果有想为p标签单独设置下边框，而其他三遍都不设置边框样
式怎么办呢？css样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px
solid red;}
同样也可以其他三边：上面是：div{border-top:1px solid
red;}
右边是：div{border-right:1px solid red;}
左边是：div{border-left:1px solid
red;}
盒子模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内
定义的宽（width）和高（height），指的是填充以内的内容范围。因此一个元素
实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
元素的高度也是同理
比如：
css代码：
div{
  
width:200px;
   padding:20px;
   border:1px solid red;
  
margin:10px;
}
html代码：
<body>
  
<div>文本内容</div>
</body>
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。
注意：li是块状元素，块状元素有一个特点：在不设置宽度的情况下，是父容器
的100%
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可以分上下左右
如：div{padding:20px
10px 15px 30px}这里顺序一定不要搞混了。分开写如下：
div{
  padding-top:20px;
 
padding-right:10px;
  padding-bottom:15px;
 
padding-left:30px;
}
如果一周为都一样的话就直接了当残暴一点：div{padding:10px}
如果上下一样，左右一样的话更简单了：div{padding:10px
20px;}
注意!!!：padding不是文字到边框的距离！是内容到边框的距离，内容的大小是
由width和hight决定的。如果文字过多，会限定width往下写，盒子大小不变，文字超出。
元素与其他元素之间的距离可以使用边界（margin）来设置。边界也可以分为上、
右、下、左。（这里注意了。我上一段没有写注意主要是为了这里来写。因为两
者是一样的！都是上右下左！这叫啥，顺时针，对不对？）代码跟上面的那段差不
多：div{margin:20px
10px 15px 30px;}
分开写也是：
div{
  margin-top:20px;
 
margin-right:10px;
  margin-bottom:15px;
 
margin-left:30px;
}
如果上右下左的边界都为10px，可以这么写:div{margin:10px;}
如果是上下边界一样为10px，左右是一样为20px，可以写成：div{margin:10px
 20px;}
总结一下padding和margin的区别，padding在边框里，margin在边框外。另外就
是一个叫拍腚，一个叫妈个鹰。记住拍腚是拍里面的，老鹰是在外面的。妈个鹰
抓不到它，拍腚，能拍得到。
清楚了css盒模型的基本概念，盒模型类型，我们可以深入探讨网页布局的基本模
型了。布局模型与盒模型一样都是css最基本、最核心的概念。但布局模型在盒模
型基础之上，又不同于我们常说的css布局样式或css布局模板。如果说布局模型是
本，那么css布局模板就是末了，是外在的表现形式。
css包含3种基本的布局模型，用英文概括为：Flow、Layer和Float
在网页中，元素有三种布局模型：
1.流动模型（Flow）
2.浮动模型（Float）
3.层模型（Layer）
先来说说第一个，流动模型。流动（Flow）是默认的网页布局模式。也就是说网页
在默认状态下的html网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征：第一点，块状元素都会在所处的包含元素
内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%
实际上块状元素都会以行的形式占据位置。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示
（内联元素不像块状元素那么霸道独占一行）
块状元素总是那么霸道多少独占一行，如果现在我们想让两个块状元素并排显示，
怎么办呢？那么元素浮动就可以出来实现这个构想了。
任何元素在默认值情况下是不能浮动的，但是可以用css定义为浮动，如div、p、
table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示
div{
 
width:200px;
  height:200px;
  border:2px red solid;
 
float:left;
}
<div id="div1"></div>
<div
id="div2"></div>
当然也可以同时设置两个元素右浮动也可以实现一行显示：
div{
 
width:200px;
  height:200px;
  border:2px red solid;
 
float:right;
}
<div id="div1"></div>
<div
id="div2"></div>
（突然蹦跶出来一个问题，solid是什么意思？不记得的可以往回看看知识点，是
实线。还有虚线(dashed)还有点线(dotted)不记得的一定要往回看！一定随时看）
那么又出现一个问题了，我想回答你们。。爱过。。不对。。。出现的问题是这样
的：如果要设置两个元素一左一右呢？？？当然可以哒~我也萌萌哒~代码如下：
div{
 
width:200px;
  height:200px;
  border:2px red
solid;
}
#div1{float:left;}
#div2{float:right}
<div
id="div1"></div>
<div
id="div2"></div>
那么出现最后一个了，也是大boss，什么是层布局模型？层布局模型就像是图像
软件，也是最牛的图（毁）像（图）软（秀）件（秀）PhotoShop中非常流行的图
层编辑功能一样，每个图层能够精确定位操作，但是在网页设计领域，由于网页大
小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便
之处的。下面我们来说说html中的层布局。
如何让html元素在网页中精确定位，就像图像软件Photoshop中的图层一样可以对
每个图层能够精确定位操作，css定义了一组定位（positioning）属性来支持层
布局模型。
层布局模型有三种形式：1.绝对定位（position:absolute）2.相对定位（position
:relative）3.固定定位（position:fixed）
然后我来分别介绍着三种形式。
第一种绝对定位：
如果想为元素设置层模型中的绝对定位，需要设置position:absolute（表示绝对
定位），这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、
bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果
不存在这一的包含块，则相对于body元素，即相当对于浏览器窗口

css基础和心得（三）的更多相关文章

  1. css基础和心得（四）

     现在来说相对定位: 如果想为元素设置层模型中的相对定位,需要设置position:relaive(表示相对 定位),它通过left.right.top.bottom属性确定元素在正常文档流中便宜位 ...

  2. CSS【03】：CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  3. css基础和心得（一）

     css开始 p{    font-size:12px;    color:red;    font-weight:blod } p为选择符p{}又称选择器,指明网页中要应用样式规则的元素.属性和值之 ...

  4. CSS基础知识笔记(三)

    继承 继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为s ...

  5. css基础和心得（二）

    css中的某些样式是具有继承性的.它允许样式不仅应用于某个特定html标签元素 而且应用于其后代.如: p{color:red;}  <p>dsffd<spans>sdfasd ...

  6. HTML/CSS基础知识（三）

    浏览器内核 浏览器内核是浏览器的核心,也称“渲染引擎”,用来解释网页语法并渲染到网页上.浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息.不同的浏览器内核对网页的语法解释也不同,因此网页开发 ...

  7. CSS基本语法（三）

    目录 CSS基础语法(三) 十五.CSS定位 1.为什么要使用定位 2.定位组成 定位模式 静态定位 相对定位 绝对定位** 固定定位 粘性定位 边偏移 子绝父相 3.定位的叠放次序 4.拓展 绝对定 ...

  8. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

  9. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

随机推荐

  1. vijos1009：扩展欧几里得算法

    1009:数论 扩展欧几里得算法 其实自己对扩展欧几里得算法一直很不熟悉...应该是因为之前不太理解的缘故吧这次再次思考,回看了某位大神的推导以及某位大神的模板应该算是有所领悟了 首先根据题意:L1= ...

  2. c# 控制职能运行单一实例，再次运行显示已经运行的实例

    有这么个需求,软件只能运行一个实例,软件运行后可以让其隐藏运行 再次运行这个软件的时候就让正在运行的实例显示出来 ================================= 当软件隐藏后没办法 ...

  3. [google面试CTCI] 2-1.移除链表中重复元素

    [链表] Q:Write code to remove duplicates from an unsorted linked list      FOLLOW UP      How would yo ...

  4. JDBC之事务隔离级别以及ACID特性

    JDBC之事务隔离级别以及ACID特性 事务隔离级别: 1.更新遗失(Lost update) 两个事务都同时更新一行数据,但是第二个事务却中途失败退出,导致对数据的两个修改都失效了.这是因为系统没有 ...

  5. 使用 NPC，NPCManager 在 XNA 中创建 NPC

    使用 NPC,NPCManager 在 XNA 中创建 NPC 平方已经开发了一些 Windows Phone 上的一些游戏,算不上什么技术大牛.在这里分享一下经验,仅为了和各位朋友交流经验.平方会逐 ...

  6. Web Host下的URL路由

    Web Host下的URL路由 ASP.NET Web API提供了一个独立于执行环境的抽象化的HTTP请求处理管道,而ASP.NET Web API自身的路由系统也不依赖于ASP.NET路由系统,所 ...

  7. 案例研究：Web应用出现间歇性的SqlException

    案例研究:Web应用出现间歇性的SqlException 2013-07-29 14:36 by 微软互联网开发支持, 231 阅读, 3 评论, 收藏, 编辑 最近有客户找到我,说他们生产环境的事件 ...

  8. HTTP协议 HttpWebRequest和 Socket的一点总结

    HTTP协议 HttpWebRequest和 Socket的一点总结 相信接触过网络开发的人对HTTP.HttpWebRequest.Socket这些东西都不陌生吧.它们之间的一些介绍和关系我这里都忽 ...

  9. continue与break

    1.continue语句,1至20内奇数累加和 #include<iostream> using namespace std; void main(){ int i=0; int sum= ...

  10. C# 中判断字符串是不是汉字

    //1.用ASCII码判断 //在 ASCII码表中,英文的范围是0-127,而汉字则是大于127,具体代码如下: string text = "是不是汉字,ABC,柯乐义"; ; ...