部分博客《CSS——（1）基础》中简介了CSS的概念和几种用法，如今主要是介绍其的核心内容。

盒子模型

为了理解盒子模型，我们能够先从生活中的盒子入手。盒子是用来放置物品的，内部除了有物品外，还有填充部分的东西。

盒子与盒子之间还会有间隙。例如以下图所看到的：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDA2NjkzNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

对于网页中的大部分对象。实际呈现形式都是一个盒子形状对象。理解了盒子模型才干更好的排版。

CSS盒子模式具备的属性： 内容(content)、填充(padding)、边框(border)、边界(margin)。从上面的样例来看：内容即相应盒内的物品。填充相应盒内为了防止物品破碎的填充物；边框则是盒子的纸壳部分；边界就是纸壳外围的间隙了。

标准盒子模型：

当中。margin为外边距，padding为内边距。填充、边框和边界都分为上、下、左、右4个方向，既能够分别定义。也能够统一定义。

我们能够通过一个小样例来看一下盒子模型。

HTML：

<body>

    <form id="TestForm" runat="server">

        <div class="Test">

            盒子模型

        </div>

    </form>

</body>

CSS：

.Test {

    width: 180px; /*宽。高*/

    height: 30px;

    margin: 5px;   /*外边距*/

    padding: 20px; /*内边距*/

    border: 10px solid #0094ff;  /*边框*/

}

网页显示：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDA2NjkzNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

盒子模型显示：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDA2NjkzNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

了解盒子模型能够帮助我们更好的排版，当然只知道这个是不够的，我们还常常会谈到“标准流”。标准流，是指各元素没有特殊规则时的排列方式。

它分为两类：块级元素和行内元素。

二者的差别在于块级元素拥有自己的区域，而行内元素没有。

块级元素：以一个块的形式表现出来，并跟同级的块依次竖直排列，左右撑满。占有独立空间。

行内元素：各个字母之间横向排列。到最右端自己主动折行。横向排列。标签本身不占有独立的区域。

在这里，我们分别举个样例来说明这两类元素的不同。即块级元素中的<div>标签和行内元素中的<span>标签。

例如以下图所看到的：

那么，当我想把块级元素转换为行内元素，或者把行内元素转换为块级元素时。应该怎么做呢？这里就涉及到一个重要的属性了——display属性。

有三个经常使用属性值：

1）block   显示为块级元素

2）inline  行内元素

3）none  不显示

盒子模型能够帮助我们更好的布局和规划标签的排版位置，标准流是在没有特殊规则下的普遍适用的排列规则。在对标准流有了大致了解后，下我们将不断推出具体条款博客CSS核心定位机构。

版权声明：本文博主原创文章。博客，未经同意不得转载。

CSS——（2）与标准流盒模型的更多相关文章

  1. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  2. css学习の第三弹—盒模型的创建和使用

    一.css盒模型: 元素分类: 块状元素.内联元素(又叫行内元素)和内联块状元素. >>常用的块状元素有: <div>.<p>.<h1>...<h ...

  3. 第一章入门篇CSS样式的分类、盒模型

    1.CSS样式的分类 CSS样式分为一项4种: 1.内联样式表,直接写在元素style属性里面的样式,如 <p style="color:red;">内联样式</ ...

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

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

  5. CSS选择器、样式、盒模型

    一.CSS基础选择器 # 1.*(通配选择器):html,body以及body下用于显示的标签 #html和body颜色会被改变,但是div标签不会发生改变,由于不同的选择器具有优先级 # 语法:* ...

  6. 笔记《精通css》第3章 盒模型，定位，浮动，清理

    第3章    盒模型,定位,浮动,清理 1.盒模型用到的属性width,height,padding,border,margin 普通文档流的上下垂直margin会叠加 2.块级框 与 行内框, 利用 ...

  7. CSS（二） 颜色 盒模型 文字相关 border

    一.颜色 rgb(r,g,b)  rgb取值 0-255   分别是 色光三元色  red green blue rgba(r,g,b,a) rgb同上  a 是 alpha  代表透明度 colot ...

  8. IE盒模型和标准w3c盒模型

    Margin(外边距) - 清除边框外的区域,外边距是透明的.Border(边框) - 围绕在内边距和内容外的边框.Padding(内边距) - 清除内容周围的区域,内边距是透明的.Content(内 ...

  9. IE6与W3C标准的盒模型差异

    盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此,然而,任何美好的事物都有缺憾,盒子 ...

随机推荐

  1. java与c/c++进行socket通信

    比如Server端只接收一个结构Employee,定义如下: struct UserInfo {   char UserName[20];   int UserId; }; struct Employ ...

  2. STL 源代码剖析 算法 stl_numeric.h -- copy

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie copy //唯一对外接口 /*------------------------------ ...

  3. 开放源代码的微微信.NET 0.8 版公布了

    微微信.NET 0.8 版公布了     A.源代码应用范围:         未认证的和经过认证的微信订阅号.微信服务号均可使用,本源代码的每个模块都提供全然的 ASP.NET C#源代码,绝对不含 ...

  4. Ubuntu 12.04 安装 Tomcat8 遇到的问题

    问题: :/tomcat8/bin$ sudo ./configtest.sh Using CATALINA_BASE:   /home/yyb/android/tomcat8 Using CATAL ...

  5. if/else 条件

    if...else...和if语句是不同的运行方式: public class MyFirstApp{ public static void main(String[] args){ int x=3; ...

  6. LeetCode: Best Time to Buy and Sell Stock III [123]

    [称号] Say you have an array for which the ith element is the price of a given stock on day i. Design ...

  7. Unity3D开发一个2D横版射击游戏

    教程基于http://pixelnest.io/tutorials/2d-game-unity/ , 这个例子感觉还是比较经典的, 网上转载的也比较多. 刚好最近也在学习U3D, 做的过程中自己又修改 ...

  8. 网络协议——IP

    IPv4地址 不论什么网络设备能够经过一个网络接口卡(NIC)接入网,假定该设备要能够访问的其它设备,然后该卡必须有一个唯一的地址.候接入多个网络,相应地该设备就有多个地址.假设这个设备是主机的话.一 ...

  9. 直接插入排序、折半插入排序、Shell排序、冒泡排序，选择排序

    一.直接插入排序 稳定,时间复杂度:最好O(n).最差O(n^2).平均O(n^2).空间复杂度O(1) void InsertSort(int L[], int n) { int i, j,key; ...

  10. Web中的性能优化

    优化Web中的性能 简介 web的优化就是一场阻止http请求最终访问到数据库的战争.优化的方式就是加缓存,在各个节点加缓存. web请求的流程及节点 熟悉流程及节点,才能定位性能的问题.而且优化的顺 ...