HTML在布局上, 有一个非常重要的模型, 那就是盒子模型, 在盒子模型中把标签内容理解为一个物品, 而css样式理解为包容着这个物品的盒子, 一般的块级标签都具有盒子模型的特征, 你可以在css中对这个盒子进行设置, 以达到自己布局的目的, 我这里绘制了个简图, 只写了内填充和外边距, 因为我感觉其他的属性更好用文字和代码理解. 同样的在学习这个的过程中, 要勤于代码试验, 测试, 否则是非常不便于掌握的知识.
盒子模型
首先盒子, 什么是盒子, 就是包含着内容的盒子, 也就是第一个黑色框, 这个盒子和内容(橘色块)间是内填充(padding)(绿色), 盒子和盒子间的间距称之为外边距(margin)(紫色), 盒子有边框(border)(蓝色), 这三个部分都有四个方向的属性, 比如内填充的padding-top, padding-left, padding-right, padding-bottom, 这个数值影响着内容的位置, 应该看起来还算明确吧(作图能力较为拙计).
盒子介绍完了, 简单说说各种属性, 方便大家测试学习, 后面不像前面介绍标签那么仔细了, 因为本人的能力有限, 有些东西自己能够理解, 但是表达起来可能就不是那么形象了, 所以大家看着一点点测试就好了.
边框(border)
盒子模型的边框是有其宽度, 线条类型, 颜色的, 代码如下:
div{
border-width:2px;
border-style:solid;
border-color:red;
}
这段代码也可以简写为
div{
border:2px solid red;
}
border-style(边框样式), 常见的有三种, dashed(虚线), dotted(点线), solid(实线)
border-color(边框颜色), 这个所有的设置颜色都是一样, 可以使用颜色英文名字, 也可以使用颜色的十六进制值.
border-width(边框宽度), 一般跟随的是像素值, 不过也有类型值thin, medium, thick, 不过非常不常用, 简单说下.
之前也说过border也有四个方向上的属性, 所以假如你需要单独只为一个边设置边框, 而不是四个边, 那么在设置的时候就不要了写border, 而是border-bottom.
盒模型计算宽度或高度
css样式表代码如示例:
div{
width:200px;
height:100px;
border:1px solid red;
margin:10px;
padding:20px;
)
那么计算这个div块的宽度应该由外至内, 两个外边距 + 两个边框 + 两个内填充 + 一个内容标签, 答案应该是 2 * 10px + 2 * 1px + 2 * 20px + 200px = 262px, 这个就是这个盒子模型的完整宽度, 高度同理, 不再赘述.
盒模型的填充
元素内容和边框之间的内填充是可以单独设置距离的, 填充可以通过两种代码设置形式设置, 分别演示.
完整代码内填充
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
顺时针简写填充(顺序和上面顺序一致, 上右下左)
div{
paddng:20px 10px 15px 30px;
}
这个实现的效果和上面的完整版是一样的.
如果上右下左的填充相同, 那么可以简写成一个
div{
padding:20px;
}
如果上下填充一样(10px), 左右填充一样(20px)
div{
padding:10px 20px;
}
外间距和内填充一样, 只是把padding改成margin, 上面所有设置的简写都适用, 所以就不重复了.