在了解了最基本和最简单的网页制作之后,我们需要开始关注细节问题,比如我们期望的背景和文本的分布问题,如何才能达到我们预期的效果,如何更加的美观,如何让用户具有更好的体验感受,才是我们更加需要关注的
故我们开始讲解盒子模型,也就是一个块内的分布以及块外的布局的逻辑关系
同时在开头介绍一个小技巧,刚设计网页的盒子模型时,你可能不能正确的设计外边距,内边距,导致一些块之间的距离不能得到很好的控制,故这个时候我们可以通过检查网页的源代码来得到
右键网页任意一个地方 – 检查 – 得到HTML代码
或者通过组合键ctrl+shift+I
或F12功能键
点击不同的代码块,左部分可显示该代码块所占的区域,从而可通过检查不同的块来知道是哪一块的内外边距没有设置好
在正式进行盒子模型叙述之前,我们先来看一段代码
这段代码位于body内
div {border: 1px solid red; /*边框样式*/margin: 10px; /*外边距*/padding: 16px; /*内边距*/width: 600px; /*宽度*/height: 500px; /*高度*/}
这为一个盒子的基本属性
一、盒子边框设置
边框包括盒子的内边距和内容
边框风格
即边框的形状,可同时设置4个边框也可以分别设置
e.g.
border-style: dashed; /*均为虚*/border-style: dashed solid; /*上下为虚,左右为实*/border-style: dashed solid dotted; /*上为虚,左右为实线,下为点;*/border-style: dashed solid double dotted; /*上为虚,右为实线,下为实线,左为点线*/
边框宽度
其上下左右设置宽度的方法同上边框类型
边框颜色
同理设置
统一设置边框的宽度,颜色,风格
一般都统一设置
e.g.
border: 1px solid red;
边框形状
由于四个边框颜色一致时看上去为一个矩形,但是当我们将边框四个颜色设为不一样的时候,且增加其宽度,会发现各个边框形状为等边三角形
当边框宽度大于或等于3px时,当值越大,三角形越明显
二、盒子内边距
内边距也就是设置了边框与内容之间的空白区域
内边距设置
内边距特点
撑大元素的尺寸在设置宽高的时候要减去内边距的数值背景延申到padding区域
即背景将占据整个盒子
三、盒子外边距设置
向外扩展盒子与盒子周围其他盒子的距离,margin用于定义盒子边框与周围其它盒子的空白区域
外边距设置
其四个方向的使用方法同上
外边距合并
即两个相邻块级元素的外边距的取值问题
全为正
较小的margin塌陷到较大的margin中存在负
合并后的外边距高度等于这些发生合并的外边距的和和为负
重叠深度等于外边距和的绝对值和为0
两个块级元素无缝连接
在进行了上述的学习,我们能自由放置我们的某一个盒子了,但是如果有多个块,我们就存在将它如何放置的问题,故需要学习浮动和定位
我们已经可以开始设计精美的某一个盒子了,快动手尝试一下吧!
贴出来我初学时做的某些盒子(嘻嘻嘻)
做这个真的就会有一个很明显的过程,看着丑不溜秋的盒子作品再到自己慢慢的喜欢,就真的需要慢慢专研和学习的呢!
该系列博客参考了聂常红 刘伟著的前端HTML+CSS修炼之道
第四篇HTML+CSS学习笔记到此结束 cheers! ?