css盒子就是它的盒模型，所有css的布局都是以此作为基础的，很有必要来详细记录一下。

　　1、盒子的尺寸就是margin+padding+border+content的总和，这很好理解，但令人迷惑的可能就是四个顶角是怎样产生的，可以由两个例子来看一下：

 <div style="width:10px; height:10px; border:30px solid; border-color:#ff3300 #0000ff #339966 #00ff00;"></div>

 <div style="width:10px; height:10px; border-width:20px 30px;border-style:solid; border-color:#ff3300 #0000ff #339966 #00ff00;"></div>

效果如图：和。从这两幅图可以看出：四个顶角的矩形是由相邻两个边框各分一半形成的。

　　此时如果将某些边框的颜色设为背景色或者透明，则可以形成梯形；如果在将宽和高设为0，就可以产生三角形，

 <div style="width:10px;height:10px;border:15px solid #000; border-color:#f00 #fff #fff #fff;"></div>

 <div style="width:0;height:0;border:15px solid #000; border-color:#f00 transparent transparent transparent;"></div>

效果如图：和。

　　2、如果没有显式的设置盒子大小，其尺寸该怎样确定呢，还是看几个例子吧：

 <div style=" margin: 20px auto;width:300px; background: gray; padding: 10px;">

     <p style="  background-color: Orange;">

         上官云野</p>

 </div>

 <div style=" margin: 20px auto; width: 300px; background: gray; padding: 10px;">

     <p style="  background-color: Orange; margin: 0 -20px;">

         上官云野</p>

 </div>

 <div style=" margin: 20px auto; width: 300px; background: gray; padding: 10px;">

     <p style="  background-color: Orange; width:100px">

         上官云野上官云野</p>

 </div>

效果如图：、、。由图可以看出：未设置的盒子的宽度由包含它的盒子确定，原则为填满包含盒子的content。而它的高由内含的盒子确定。

　　3、有了以上两点知识就可以做一个圆角框了：

   <div style="width:500px">

     <div style="border-bottom:3px solid #cc0000; border-top-color:#cc0000; border-left:3px dotted transparent;border-right:3px dotted transparent"></div>

     <div style="padding:10px 20px; color:white; font-size:14px; background:#cc0000;">上官云野！</div>

     <div style="border-top:3px solid #cc0000; border-bottom-color:#cccccc; border-left:3px dotted transparent;border-right:3px dotted transparent;"></div>

   </div>

。

　　附录：各种盒模型特点：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

  <head>

   <title> New Document </title>

   <meta http-equiv="Content-type" content="Text/html;charset=utf-8">

   <style type="text/css">

     table{

         display:inline-block;

         border-collapse:collapse;

         width:50px;

     }

     table, td

     {

         border: 1px solid blue;

     }

     td{width:15px;}

     .li1 li{background-color:#ccc;display:inline-block;}

     .li2{background-color:#ccc;display:inline-block;}

     .li3 li{background-color:#ccc;}

     .li4{background-color:#ccc;}

   </style>

  </head>

  <body>

   <div style="width:300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;display:inline;">

     框模型

   </div>

   <div style="width:300px;height:200px;padding-top:10px;background-color:#999;padding-left:10px;display:inline-block">

     框模型

   </div>

   <div style="width:300px;height:200px;padding-top:10px;background-color:#999;padding-left:10px;display:inline-block">

     框模型

   </div>

   <div style="width:300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;">

     框模型

   </div>

   <div style="width:300px;height:200px;padding-top:10px;background-color:#999;padding-left:10px;">

     框模型

   </div>

   <p style="width:300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;">

     框模型

   </p>

   <!--p为段落，所以前后有换行+空一行(16px;由margin指定的);而div只换行不空行-->

   <p style="width:300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;display:inline-block">

     框模型

   </p>

   <table>

   <tr>

     <td>1</td>

     <td>2</td>

     <td>3</td>

   </tr>

   <tr>

     <td>4</td>

     <td>5</td>

     <td>6</td>

   </tr>

   <tr>

     <td>7</td>

     <td>8</td>

     <td>9</td>

   </tr>

   </table>

   <ul class="li1">

     <li>春</li>

     <li>夏</li>

     <li>秋</li>

     <li>冬</li>

   </ul>

   <ul class="li2">

     <li>春</li>

     <li>夏</li>

     <li>秋</li>

     <li>冬</li>

   </ul>

   <ul class="li3">

     <li>春</li>

     <li>夏</li>

     <li>秋</li>

     <li>冬</li>

   </ul>

   <ul class="li4">

     <li>春</li>

     <li>夏</li>

     <li>秋</li>

     <li>冬</li>

   </ul>

  </body>

 </html>

块级盒模型

新手前端笔记之--css盒子的更多相关文章

  1. 2.前端笔记之css

    title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...

  2. 前端笔记之CSS（上）

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...

  3. 新手前端笔记之--初识css

    css样式表是为了容纳与html文档分离出来的样式属性而产生的,所以她理所当然的包含两个部分:1.样式的表示,使用{属性1:属性值:属性2:属性值:...},2.样式与标签的对应(如何找的对应标签), ...

  4. CSS3学习笔记(2)-CSS盒子模型

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  5. web前端笔记整理---CSS

    一   Css  文件 Css: 美化HTML的 4种选择器: 元素选择 类选择 ID选择 伪类选择 常用的布局方案 1 写在什么位置能好用. 1.1 元素里面 优先级是最高的 1.2 元素外,文件内 ...

  6. 前端笔记之CSS（下）浮动&BFC&定位&Hack

    一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/heigh ...

  7. 新手前端笔记之--初识html标签

    接触前端(好大气的名字啊)已经一个多月了,看了很多视频和博客,有了一定的感性认识,但还是需要总结一下以便系统化所学习的知识,就从html标签开始吧.关于标签,谈论最多的就是简洁和语义化.简洁指html ...

  8. 前端学习：学习笔记（CSS部分）

    前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...

  9. 2、前端学习笔记之——css

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 高性能网络编程 - select系统调用

         IO复用使得程序可以同一时候监听多个文件描写叙述符,比方client须要同一时候处理用户输入和网络连接,server端须要同一时候处理监听套接字和连接套接字,select系统调用可以使得我们 ...

  2. Qt creator 编译错误 ：cannot find file .pro qt

    事实上问题的解决的方法非常easy:就是Qt不支持中文的路径,把源代码的路径所有改成英文就可以解决这个问题. 首先问题发生在我执行网上的样例程序时,又一次构建编译也是出错.提示: Cannot fin ...

  3. 记一次struts2漏洞修复带来的问题

    struts2作为万年漏洞王,感觉已经被弃如敝屣了,除了一些古老的项目,比如我手上的一个项目,以前每次出现漏洞就如临大敌,手忙脚乱的赶在公司红头文件发出来前修复它.然后改了一两次后毅然决然用别的框架代 ...

  4. [BZOJ4026]dC Loves Number Theory 欧拉函数+线段树

    链接 题意:给定长度为 \(n\) 的序列 A,每次求区间 \([l,r]\) 的乘积的欧拉函数 题解 考虑离线怎么搞,将询问按右端点排序,然后按顺序扫这个序列 对于每个 \(A_i\) ,枚举它的质 ...

  5. Python(六) Python 函数

    一.认识函数 help(方法名字)  help(round) 1.功能性 2.隐藏细节 3.避免编写重复的代码 4.组织代码 自定义函数 二.函数的定义及运行特点 # 递归 def sum_num(n ...

  6. Win7+MSVC2010+PCL1.7.2

    我的配置环境是Win7+MSVC2010+PCL1.7.2. 网上关于点云库配置的文章已经很多,这里不做过多的重复,这里只讲一下自己在配置过程中遇到的问题及一些注意事项. K1: 在用Cmake编译时 ...

  7. Multi-process Architecture

    For Developers‎ > ‎Design Documents‎ > ‎ Multi-process Architecture This document describes Ch ...

  8. 织梦DedeCMS会员登录或退出后如何直接跳转到首页

    织梦dedecms默认情况下的会员登录后会直接跳转到会员中心,退出也是一样,但是如果我们想让会员登录后直接跳转到首页,那该如何实现呢? 经过我们的研究,已经找到解决办法,下面是详细的修改步骤: 首先在 ...

  9. expr---计算工具

    expr命令是一款表达式计算工具,使用它完成表达式的求值操作. expr的常用运算符: 加法运算:+ 减法运算:- 乘法运算:\* 除法运算:/ 求摸(取余)运算:% 语法 expr(选项)(参数) ...

  10. 编程里的API是什么意思？

    API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码 ...