网页设计的第一步就是设计版面布局
用最合适浏览的方式将图片、文字等对象放置在页面的不同位置。
在设计时必须遵循突出重点、平衡和谐的原则，将网站标志、主菜单等重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的摆放。
css布局基础-盒子模型
CSS盒模型是CSS布局的基础，每个网页元素都被抽象为一个盒子，而网页的排版布局可以看作对组成网页的盒子元素按照一定的规则进行摆放后的结果。
CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin（边界）、border（边框）、padding（填充）和content（内容）4部分组成。
margin也被称为外边距，用来设置网页中元素和元素之间的距离，即定义元素周围的空间范围。
border（边框）用来设置网页中元素边框的宽度、颜色和样式。
padding（填充），也称为内边距，用来设置元素的内容与边框之间的距离。
content（内容）是元素的真正内容部分，用来容纳和显示内容。
注意：一个元素出现在另一个元素上面时，上面元素的底外边距与下面元素的顶外边距发生叠加
当元素被设置宽度和高度后，如果元素的区域大小不能容纳元素中的内容，在CSS中需要通过overflow（溢出）属性来控制应该如何显示
visible：如果元素中的内容超出了元素的大小，则允许内容从元素中溢出。
hidden：任何溢出的内容将会被隐藏，不会显示出来。
scroll：元素中会出现水平和垂直的滚动条，可以滚动显示元素中的内容。需要注意的是，即使内容没有溢出元素，元素中仍然会显示水平和垂直滚动条。
auto：浏览器会根据内容溢出的情况，在需要时才显示水平或垂直滚动条。
这就是css布局基础-盒子模型的全部内容，学完了以后做些练习吧！
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/10663.html
微信扫一扫 
支付宝扫一扫