html初学者作业,html 初学者 第三篇

盒模型

盒子盒子, 盒子一般说的是块模型(block)和行内块模型(inline-block)

就像日常生活中的盒子: 盒子会有边框(border),里面还有有存放东西的空间(content), 还有内边距(padding),外边距(margin)

块元素

块元素可以设置宽高,那么在普通的盒子中, 这里的宽高指的是内容区(content)的宽高.如果设置的padding border值会撑开盒子(盒子尺寸变大).

在没有设置宽高的情况下,块元素会独占一行并且高度由内容撑开.那么看到高度由"内容撑开"这个字样是不是想到了什么应用方式.

在刚写一些小demo的时候,是不是会经常遇到自己量padding,margin,border和内容区的值,会发现元素掉下去了,或者是放个图片img时候高度超出了盒子高度. 这是因为你给盒子设置了固定的高度造成的.

这个在文章尾部会说一说用块元素的一些小技巧

border

border: width style color

很多标签都有复合写法和分开写法,有方向区别的顺序都是 上 右 下 左,这就不细说了.

padding 和 margin

这两个写法很相似, 可以放在一起记

怪异盒模型box-sizing

在默认情况下的box-sizing:content-box 从英文就可以理解, 盒子尺寸是内容区,因此设置宽高也是给内容区固定尺寸.

box-sizing: border-box怪异盒模型,设置宽高的情况下,宽高是固定 含border边框,内边距padding和内容content的总尺寸. 怎么理解这个呢?

普通盒子,在加padding和border的时候会撑开盒子总体大小并且内容区的大小保持不变

但是之所以叫怪异盒模型,估计就是他比较奇怪吧. 在box-sizing: border-box情况下设置border,padding 会去挤兑内容区,盒子总体大小不改变但是内容区尺寸会减小

盒子使用

很多时候我们更愿意使用怪异盒模型. 因为人的直观是先拿个盒子然后开始设置padding border这些东西,剩下的区域放内容. 比较容易做到样式尺寸的统一,不会说好几个盒子尺寸不一样,还得拿计算器算一下.在你自己写的时候可以这么做,但是上班时候这么做那还不得把老板给急死.

再说说高度由内容撑开的技巧吧...就之前写作业的时候,可以看到有些同学去量了最外面盒子的高度,图片高度.盒子里面放了文字又放图片的. 导致盒子并不能刚刚好放下图片,那么这时候你把量的高度去掉让他自行撑开是不是就不用担心误差什么的了.

还有一个块元素包裹多个行内块元素的时候, 会发现有些行内块怎么掉到第二行了?一脸懵逼是不?

这个是因为最外面的块元素的宽度不够放下你里面的行内块元素,那么这时候你把最外面的块元素改成行内块元素那么内容就不会掉下去了, 这时候看看你的大盒子需要多大尺寸才能使元素同行显示.并且把盒子尺寸设置成该尺寸