部分博客《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. poj1935（树形dp）

    题目链接:http://poj.org/problem?id=1935 题意:带边权的树,给点一个根,问从根出发遍历某些点,所需的最小花费. 分析:树上任意两点的路径是唯一的,直接dfs一遍,可以得出 ...

  2. cocostudio内存释放

    在使用cocostudio时,在释放内存时能够这样做: 在onExit()方法里加入例如以下: void LoadLayer::onExit() { // 释放本对象自己 removeFromPare ...

  3. Mutex(测量)

    游标共享怎样使用Mutex kks 使用mutex以便保护对于下述基于parent cursor父游标和子游标child cursor的一系列操作 对于父游标parent cursor的操作: 基于发 ...

  4. java List<Map> 排序问题

    Collections.sort(order_from_list, new Comparator<Map<Object, Object>>() { public int com ...

  5. mysql如何更新一个表中的某个字段值等于另一个表的某个字段值

    表A和表B,现在希望更新A表,当 A.bid = B.id时,a.x = b.x, a.y=b.y,请问mysql中sql语句 update a inner join b on a.bid=b.id ...

  6. abstract修饰方法总结

    abstract这种方法修饰,主要用在抽象类和抽象方法. 抽象的类是不可实例化的比如 public abstract class Test{ } 他能够含有抽象的方法 public abstract ...

  7. C# 32位程序访问64位系统注册表

    原文:C# 32位程序访问64位系统注册表 我的上一篇文章已经阐述了“32位程序和64位程序在64位平台上读\写注册表的区别”,那么接下来将要回答上篇所留下来的一个问题:32位程序如何访问64位系统注 ...

  8. C#操作注册表--DarrenF

    步骤/方法 读取指定名称的注册表的值 private string GetRegistData(string name) { string registData; RegistryKey hkml = ...

  9. DevExpress控件中LayoutControl的使用

    原文:DevExpress控件中LayoutControl的使用 C#开发中,软件布局设计,主要用TableLayoutPanel能很好地支持缩放功能,对自身的Label.TextBox等控件支持的很 ...

  10. DP：树DP

    The more, The Better Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...