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

 盒的类型

 1.盒的基本类型

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

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

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         div{
  8.             background-color: yellow;
  9.         }
  10.         span
  11.         {
  12.             background-color: #000099;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.    <div>我是div</div>
  18.    <span>我是span</span>
  19.    <span>我也是span</span>
  20. </body>
  21. </html>

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

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

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

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         div{
  8.             background-color: yellow;
  9.             display: inline;
  10.         }
  11.         span
  12.         {
  13.             background-color: #000099;
  14.             display: block;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.    <div>我是div</div>
  20.    <span>我是span</span>
  21.    <span>我也是span</span>
  22. </body>
  23. </html>

2.inline-block类型

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         div{
  8.             background-color: yellow;
  9.             display:inline-block;
  10.             width: 100px;
  11.             height: 100px;
  12.         }
  13.  
  14.     </style>
  15. </head>
  16. <body>
  17.    <div>我是div</div>
  18.    <div>我是div2</div>
  19. </body>
  20. </html>

  3.inline-table类型

　　先看下列子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         table
  8.         {
  9.             width: 200px;
  10.             border: solid 1px red;
  11.             display: inline-table;
  12.             vertical-align: bottom;
  13.         }
  14.         td{
  15.             border: solid 1px red;
  16.         }
  17.     </style>
  18. </head>
  19. <body bo>
  20.    大家好
  21.    <table>
  22.        <tr>
  23.            <td>1</td>
  24.        </tr>
  25.        <tr>
  26.            <td>2</td>
  27.        </tr>
  28.    </table>
  29.    大家好
  30. </body>
  31. </html>

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

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

4.list-item类型

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.       div{
  8.           display: list-item;
  9.           list-style-type: decimal;
  10.           margin-left: 30px;
  11.       }
  12.     </style>
  13. </head>
  14. <body bo>
  15.    <div>list1</div>
  16.    <div>list2</div>
  17.    <div>list3</div>
  18.    <div>list4</div>
  19.    <div>list5</div>
  20. </body>
  21. </html>

  5.none类型

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

6.overflow属性

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.       #div1{
  8.           width: 100px;
  9.           height: 100px;
  10.           border: solid 1px red;
  11.           overflow: hidden;
  12.       }
  13.       #div2{
  14.           margin-top: 10px;
  15.           width: 100px;
  16.           height: 100px;
  17.           border: solid 1px green;
  18.           overflow: scroll;
  19.       }
  20.     </style>
  21. </head>
  22. <body>
  23.    <div id="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
  24.    <div id="div2">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
  25. </body>
  26. </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表示元素的宽度与高度包括内部补白区域及边框的宽度及高度。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         div{
  8.             width: 300px;
  9.             height: 300px;
  10.             border: solid 30px red;
  11.             padding:30px ;
  12.  
  13.         }
  14.         div#div1{
  15.  
  16.           box-sizing: content-box;
  17.           -webkit-box-sizing: content-box;
  18.       }
  19.         div#div2{
  20.  
  21.           box-sizing: border-box;
  22.           -webkit-box-sizing: border-box;
  23.       }
  24.     </style>
  25. </head>
  26. <body>
  27.    <div id="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
  28.    <div id="div2">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
  29. </body>
  30. </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. FIREDAC直连ORACLE数据库

    UniDac对Oracle的Direct连接,不需要套Oracle客户端dll,deploy时真的时 方便又快捷.FireDac连接Oracle,在没有Oracle Client的情况下,是可以连接上 ...

  2. hdu 4578 Transformation（线段树）

    线段树上的多操作... 题目大意: 树上 的初始值为0,然后有下列三种操作和求和. 1  x y c  在X-Y的之间全部加上C. 2  x y c  在X-Y的之间全部乘上C. 3  x y c   ...

  3. jQuery 源码解析一：jQuery 类库整体架构设计解析

    如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...

  4. DATE_FORMAT() 函数

    DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据DATE_FORMAT(now(),'%Y-%m-%d %T')

  5. secureCRT使用VIM时对语法高亮

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  6. 教你50招提升ASP.NET性能（二十三）：StringBuilder不适用于所有字符串连接的场景；String.Join可能是

    (41)StringBuilder is NOT the answer for all string concatenation scenarios; String.Join could be 招数4 ...

  7. 【HMTL】文字飞舞的美

    这是在一个大神那看到的就拿过来了,希望能够更多人能看到. 这个是效果: 源文件下载: 点 击 下 载

  8. 开始学习web前端技术

    不能再蹉跎了,不能再徘徊了,不能再犹豫了,犹豫徘徊等于白来…… 感觉之前浪费了太多的岁月,必须得学习一门实用的技术来充实自己空虚的心情了. 想来想去网页应该是万金油的,大大小小多多少少都得用到.既然如 ...

  9. 【M8】了解各种不同意义的new和delete

    1.首先考虑new operator,new operator 可以认为做了三件事情:a.调用operator new分配一块内存:b.在这块内存上调用构造方法构造对象:返回指针. 2.operato ...

  10. Codeforces Round #333 (Div. 2) C. The Two Routes flyod

    C. The Two Routes Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/602/pro ...