专栏首页菜鸟计划CSS布局(一) 盒子模型基础

CSS布局(一) 盒子模型基础

一、盒子模型

标准盒子模型

 从下图可以看到标准 w3c 盒子模型的范围包括 content、padding、border、margin,并且 content 部分不包含其他部分。

怪异盒子模型

从下图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。

例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,

假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px;盒子的实际大小为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px;

假如用ie 盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px、高 20*2+50=70px,盒子的实际大小为:宽 200px、高 50px。

  那应该选择哪中盒子模型呢?当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢?很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

<!doctype html>
<html>
<head>
  <title>你用的盒子模型是标准w3c盒子模型</title>
  <script language="javascript" src="jquery.min.js"></script>
    var sbox = $.boxmodel ? "标准w3c":"ie";
    document.write("您的页面目前支持:"+sbox+"盒子模型");
  </script>
</head>
<body>
</body>
</html>

说一下css3 box-sizing属性

box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。

content-box,border和padding不计算入width之内

padding-box,padding计算入width内

border-box,border和padding计算入width之内,其实就是怪异模式了~

<style type="text/css">
    .content-box{
        box-sizing:content-box;
        -moz-box-sizing:content-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #E6A43F;
        background: blue;
    }
    .padding-box{
        box-sizing:padding-box;
        -moz-box-sizing:padding-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #186645;
        background: red;                
    }
    .border-box{
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        width: 100px;
        height: 100px;
        padding: 20px;
        border: 5px solid #3DA3EF;
        background: yellow;
    }
</style>

二、组成盒子模型的标签类型

在CSS中,html中的标签元素大体被分为三种不同的类型:块级元素、行级元素和行内块元素。

常用的块级元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>  设置display:block转换

特征:1.一个块级元素独占一行;

   2.元素的高度、宽度、行高以及顶和底边距都可设置;

   3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

常用的行级元素有:

<a>、<span>  设置display:inline转换

特征:1、和其他元素都在一行上;

   2、元素的高度、宽度及顶部和底部边距不可设置;

   3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

  4、内联元素之间的间距问题:当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。解决方法:写在一行,之间不要有空格之类的符号。

常用的行内块元素有:

<img>、<input>  设置display:inline-block转换  

 特点:1、和其他元素都在一行上;(而块状元素是另起一行)

    2、元素的高度、宽度、行高以及顶和底边距都可设置。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS布局(六) 对齐方式

    一、水平居中: (1). 行内元素的水平居中? 如果被设置元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将...

    柴小智
  • CSS布局(二) 盒子模型属性

    盒子模型的属性 宽高width/height   在CSS中,可以对任何块级元素设置显式高度。   如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效...

    柴小智
  • CSS布局(三) 布局模型

    布局模型 在网页中,元素有三种布局模型: 1、流动模型(Flow) 默认的 2、浮动模型 (Float) 3、层模型(Layer) 1、流动模型(Flow) ...

    柴小智
  • 益联益家内蒙古游学从草原到沙漠,感受蒙古豪情!

    2018年7月4日,草原狂欢后,益联益家家人们踏上新的征程——库布齐沙漠,库布齐沙漠是中国第七大沙漠,“库布齐”是蒙语,意思是弓上的弦。这次,益联益家带你驼行大...

    益联益家
  • Android Keystore漫谈

    今天使用高德地图为应用添加Key的时候,发现有一项需要用到安全码SHA1,而SHA1存在于Keystore中,遂简单地了解了一下Keystore。虽然之前实习开...

    代码咖啡
  • Email 服务器之 SPF 记录

    节选自《Netkiller Mail 手札》 6.1. Sender Policy Framework 6.1.1. 分析 SPF 记录 从主域开始查看 txt...

    netkiller old
  • 七年改变,如今年薪60W,分享这些年的经验总结!

    本人做Java开发的,第2年月薪7k(是不是很可伶),做金融风控相关项目,难听点,就是外包,每天增删改查,坐吃等死状态,每天就期待下班。但是心里总觉得这样下去要...

    美的让人心动
  • node-sass 安装失败的解决措施

    在测试gulp-webapp的时候遇到了 styles 不能被正常编译的问题,究其原因是node-sass没有被正常安装。 根本原因是国内网络的原因。 最终的解...

    叙帝利
  • OpenCV基于DLCO描述子匹配

    2014年VGG发表了一篇基于凸优化的局部特征描述子学习(DLCO)的论文,OpenCV3.2以后在扩展模块中对该论文的完成了代码实现并发布了API支持,提供了...

    OpenCV学堂
  • 使用 Wintersmith + Serverless Framework 快速创建个人站点

    首先我们来介绍下,Wintersmith 是一个简单而灵活的静态站点生成器。采用 markdown 构建,这个是我们的基础条件。 而 Serverless F...

    腾讯云serverless团队

扫码关注云+社区

领取腾讯云代金券