话不多说，一切还是从最基础的说起。

 盒的类型

 1.盒的基本类型

　　在css中，用display定义盒的类型，一般分为block类型与inline类型。

　　例如div属于block类型，span属于inline类型

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div{

            background-color: yellow;

        }

        span

        {

            background-color: #000099;

        }

    </style>

</head>

<body>

   <div>我是div</div>

   <span>我是span</span>

   <span>我也是span</span>

</body>

</html>

　　通过运行这段代码，我们可以清楚的可以看到block类型的宽度占满整个浏览器，而inline元素的宽度等于其内容的宽度

　　每一行只允许容纳一个block元素，但是可以容纳多个inline元素。

　　下来我们可以通过display属性把div改成block类型，把span改成inline属性，看下其运行效果。

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div{

            background-color: yellow;

            display: inline;

        }

        span

        {

            background-color: #000099;

            display: block;

        }

    </style>

</head>

<body>

   <div>我是div</div>

   <span>我是span</span>

   <span>我也是span</span>

</body>

</html>

2.inline-block类型

　　inline-block属于block盒的一种，把元素的display属性设置成inline-block,其显示和设置

　　成inline一样，但是元素的width、height属性只能作用于block元素上。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div{

            background-color: yellow;

            display:inline-block;

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

   <div>我是div</div>

   <div>我是div2</div>

</body>

</html>

  3.inline-table类型

　　先看下列子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        table

        {

            width: 200px;

            border: solid 1px red;

            display: inline-table;

            vertical-align: bottom;

        }

        td{

            border: solid 1px red;

        }

    </style>

</head>

<body bo>

   大家好

   <table>

       <tr>

           <td>1</td>

       </tr>

       <tr>

           <td>2</td>

       </tr>

   </table>

   大家好

</body>

</html>

　　table属于block类型，要想文字和table同行显示，需要把table的display属性设置成inline-table，但是各个浏览器

　　对于文字和表格的对齐方式有所差别，一般情况下要设置其对齐方式。

4.list-item类型

　　可以将多个元素当做列表来显示，并在其前加上列表标记。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

      div{

          display: list-item;

          list-style-type: decimal;

          margin-left: 30px;

      }

    </style>

</head>

<body bo>

   <div>list1</div>

   <div>list2</div>

   <div>list3</div>

   <div>list4</div>

   <div>list5</div>

</body>

</html>

  5.none类型

　　把元素设置成none类型，该元素将不会被显示。

6.overflow属性

　　overflow属于用于对盒中内容显示不下时显示方法。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

      #div1{

          width: 100px;

          height: 100px;

          border: solid 1px red;

          overflow: hidden;

      }

      #div2{

          margin-top: 10px;

          width: 100px;

          height: 100px;

          border: solid 1px green;

          overflow: scroll;

      }

    </style>

</head>

<body>

   <div id="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

   <div id="div2">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

</body>

</html>

　　同时还有overflow-x,overflow-y两个属性，可以单独给水平或者垂直方向超出盒范围的内容的显示

　　显示方式进行设置。

7.box-sizing属性

　　box-sizing属性是css3中新增的盒模型属性。

　　在css中使用width和height可以设置元素的宽度和高度，但是可以使用box-siziing属性，可以指定

　　用width与height属性设置的宽度与高度是否包含元素内部的补白区域，以及边框的宽度和高度。

　　box-sizing属性值为content-box,及border-box。content-box表示元素的宽度与高度不包括内部的补白区域

　　及边框的宽度高度，border-box表示元素的宽度与高度包括内部补白区域及边框的宽度及高度。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        div{

            width: 300px;

            height: 300px;

            border: solid 30px red;

            padding:30px ;

        }

        div#div1{

          box-sizing: content-box;

          -webkit-box-sizing: content-box;

      }

        div#div2{

          box-sizing: border-box;

          -webkit-box-sizing: border-box;

      }

    </style>

</head>

<body>

   <div id="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

   <div id="div2">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

</body>

</html>

css 盒模型相关样式的更多相关文章

  1. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  2. CSS盒模型和文本溢出

    CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一.认识盒子模型 盒模型是css布局的基石,它规定了网页元素 ...

  3. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  4. 4、css盒模型和文本溢出

    4:css盒模型和文本溢出 学习目标 1.认识盒子模型 2.盒子模型的组成部分 3.学习盒子模型的相关元素 margin padding 4.文本溢出相关的属性 一.css属性和属性值的定义 盒模型是 ...

  5. 详解CSS盒模型

    原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...

  6. 详解CSS盒模型（转）

    详解CSS盒模型   阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...

  7. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  8. 【CSS】309- 复习 CSS盒模型

    点击上方"前端自习课"关注,学习起来~ 一.概念 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding ...

  9. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

随机推荐

  1. [iOS微博项目 - 1.8] - 各种尺寸图片加载 & 控件不显示研究

    A. 图片的加载:  [UIImage imageNamed:@"home"];  加载png图片    一.非retina屏幕  1.3.5 inch(320 x 480)  * ...

  2. ACE的包装器

    ACE大量运用包装器模式,以期改变面向过程的系统API可视性以及错误处理较难的情况 包装器在若干场合能极大简化代码量,甚至是编码过程 比如ACE_Thread_Mutex 对象创建会自动初始化,很开心 ...

  3. DevExpress.XtraGrid的使用(部分)

    (三) XtraGrid的功能与GridView的功能相似,使用方法也类似,不过他的功能更加令人惊讶,看看下面的效果 Code//生成此效果的解决方案: // 1.从数据库去出两张表, //后台 Sq ...

  4. MEF 编程指南（四）：声明导入

    组合部件通过 [System.ComponentModel.Composition.ImportAttribute] 特性声明导入.类似于导出,也有几种不同的方法声明导入,即通过:字段(Fields) ...

  5. ADO.NET 快速入门（六）：读写 XML

    ADO.NET 和 DataSet 可以读写 XML Schema 和 XML.获取更多信息,请参考 How do I...Use XML and the DataSet?   DataSet 的 S ...

  6. java中匿名类的讲解

    匿名内部类也就是没有名字的内部类 正因为没有名字,所以匿名内部类只能使用一次,它通常用来简化代码编写 但使用匿名内部类还有个前提条件:必须继承一个父类或实现一个接口 实例1:不使用匿名内部类来实现抽象 ...

  7. SAP BW顾问如何保持市场竞争力

    跟大部分电工一样,SAP顾问也经常有迷茫的时候.因为,这个世界变化实在太快了.每一个电工,总是在担心自己会不会被飞速发展的技术所淘汰.那么,作为 一个BW顾问,应该如何保持市场竞争力呢?我觉得需要两个 ...

  8. Codeforces Round #331 (Div. 2) E. Wilbur and Strings dfs乱搞

    E. Wilbur and Strings Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/596 ...

  9. MFC Windows程序设计源代码免费下载

    本人近期在网上找到了<MFC Windows程序设计>第二版的书内程序的源代码,特意上传CSDN上面,供学习MFC的程序猿们免费下载. 源代码下载: http://download.csd ...

  10. "jobTracker is not yet running"(hadoop 配置)

    今天自己尝试做配置了一下hadoop,环境是ubuntu13.10+jdk1.7.0_51+hadoop version1.2.1. 主要过程主要参考http://blog.csdn.net/hitw ...