盒模型的一些解析

盒模型分类

盒模型分为两类: 普通盒模型(box-sizing: content-box), 怪异盒模型(box-sizing: border-box).
普通盒模型和怪异盒模型的区别就是 设置width, height的时候是给什么区域设置的. eg:

content-box设置width:100px; height:100px; 那么无论你怎么更改border padding的值,都不会影响到内容区的值.换句话说, 你设置padding 和 border值时候,会改变盒子的总尺寸
border-box(边框盒子)相对于上面的,这个更好理解.字面意思: 给盒子设置width和height的时候设置的是盒子的总尺寸, 那么这时候你再去改变border padding值,就会影响到内容区content的尺寸.

盒子的基本标签就先不说了

现在说说大家都懂的inline, block, inline-block的特性, 但往往忘记在哪使用, 或者是知道在哪用但是没注意到为什么这么用

inline

行内元素要居中的时候, 得给父元素设置text-align:center;行内元素也有细分的:有兴趣的同学可以看看

• 行内元素前后都能跟内容,就是可以同行显示.
• 行内元素不能设置宽高.
  那么有些同学就好好奇了,不设置高度可以,不设置宽度的话,我元素和元素间的空格怎么办??用 一个个敲吗?hmmm,可以试试用margin,宽度不能设置,那就用margin外边距 把别的元素顶开
• 在结构上:行内元素不能放块元素
  凡事都有特列的,a标签这个跳转链接就可以放个块元素.其实大家也经常见到,就比如去淘宝买东西,不是只能点图片或者文字他才跳转.点击整个区域任意部分,他都会跳转.
• 内边距只对内联元素产生影响,无视块元素
  这个说的是行内元素的margin-top, margin-bottom不会生效. 要注意的是这个padding, 他是会"生效"的 但是不会影响上下的布局. 这里说的"生效"意思是: 如果你给span 设置一个background-color会发现背景颜色会衍生到另一行,但是并不对挤开别的元素(换句话说就是不会影响布局,不占位置)

• 便签之间的空格解析:
  这个也挺头疼的,那怎么去除便签间的空格解析呢?
  我们可以给父元素设置font-size:0;,但是这么做的话就得给子元素重新设置font-size值, 因为这个属性是可以继承的.

  我们还可以使用margin:负值值去调节.这个比改变font-size靠谱多了.

block

• 独占一行, 这个属性同时也带来不设置宽度的话,默认宽度是100%. 这个100%不是相对于可视窗口的,100%是相对于父元素宽度的百分百,也可以理解为继承父元素的宽度.(怎么好理解怎么来)
• 高度是由内容撑开的 这个应用会在inline-block里面一起讲到.很方便的一个东西(一个小技巧)
• 可以设置内外边距(那么这个内外边距的设定加上边框就可以看上面的两种盒模型了)
• 块元素比行内元素好的是,块元素可以包含所有元素.但是p标签开始搞特殊了,这个p标签感觉就跟行内元素一样,不能放块元素.非要放个div进去的话,就会导致浏览器的fail silence把这个默认为是2个p标签包围1个div标签.

inline-block

相对来说inline-block 会比上面那两个用的多一点. 毕竟还没学float position的时候,还是要靠inline-block布局的.

• 看这个单词就大概理解了.inline 和 block加了个连字符.因此本质上是具备了inline元素的性质和块元素的性质.
• 支持宽高. 可以随意的给width height相当于是上面的盒模型
• 上下左右margin值都有效,但是不能像block那样用auto居中.margin:0 auto,那有些同学想要居中的话怎么办???? 这时候用到的是inline的性质,给父元素设置一个text-align: center(说下怎么去理解这个margin: auto 不生效, 行内元素的话是由多个的行内元素组成,auto普遍是100%的意思,block使用的时候左右两边100%就是居中, 但是多个行内元素auto到中间互相挤兑就放不下,所以不能用也无效)
• 标签间有解析空格: 处理方法和inline一样
• 上下左右padding 生效, 也占空间(这是和inline的区别),参考上面的盒模型理解
• img标签可以理解为inline-block 但是img是inline元素(怎么回事呢?)
• 如果不去设置宽高的话,inline-block的宽高就由内容撑开

inline-blcok 最后一个性质使用

不去设置内容的话就可以由里面的元素撑开,还在头疼每次做小demo(案例)的时候,因为1px,2px的测量误差,导致内容换行 或者是要用调试台去调的刚刚好?

这时候可以用宽高由内容撑开.给最外面的大盒子先设置成display:inline-block.然后只管往里面放你需要的元素tag/element,设置margin padding值,最外面的大盒子总会被撑开的. 全弄完了之后就可以打开调试台,看看你这个盒子多大, 然后设置固定的width值 或者是改回display:block

那么block,inline-block的height也是由内容撑开因此同样也可以先不设置(-->这里图文并茂)