查看“盒子布局的使用技巧”的源代码


==盒子布局的使用技巧==
*结合样例，思考以下问题：[[项目实训4]] [[项目实训4_答案]]
===盒子如何命名===
*盒子的命名尽量有意义一些，如nav、section等等
*不要随便用任意的字母和数字命名。
===怎样为盒子内的不同标签设置不同的样式===
*使用选择符：标记名选择符、id选择符、class选择符、子对象选择符

*拓展：[[CSS的选择符（二）]]

===在水平方向只有一个盒子时，如何使盒子居中？===
*设置盒子的水平边距为auto,可使盒子水平居中
 <nowiki>.layer2{width:70%; height:300px;margin:0px auto;color:black;}</nowiki>

===如何设置盒子高度===
*问题：为什么有的页面看起来很好，但是浏览器一缩小之后盒子的布局会混乱？
*[[文件:w2-45.png]]
*原因：盒子的height属性没有设置为auto，导致盒子的高度过分的死板，不能随浏览器的大小而自动调整。
*解决方法：将盒子的高度设为auto
===如何消除缝隙===
 <nowiki>*{margin:0;padding:0}</nowiki>
*这是通用选择符，通过在CSS中加添这一句，可以消除所有盒子之间的缝隙。
*注意，p标签也是盒子，加上这一句代码的副作用是，相邻p标签之间的间距也变小了。
===各种属性的优先级===
*各个样式表的优先级根据选择符确定
*原则是应用范围越广的选择符级别越低，限制条件越多即应用范围越小的选择符优先级越高。
*比如，我们假如在CSS中加入了这两个规则之后，则后者的优先级比前者高
*p标签的样式优先执行后者
 <nowiki>*{margin:0;padding:0}</nowiki>
 <nowiki>p{margin:5%;padding:5%}</nowiki>

===如何为盒子取色===
*用浏览器取色器
*具体请百度搜索“如何用浏览器取色”

==巩固练习==
*自行设计上下排列和左右排列的盒子布局各一个。
*给你的盒子加上已知的各种属性：
**将盒子边框分别设置为点状线、实线、虚线、双线
**将盒子边框的粗细分别设置为粗、细、中等、10px
**为4个盒子的边框各设置不同的颜色
**将4个盒子的内填充设置为2% 4% 3% 4%;
**将4个盒子的外边距设置为2% 4% 3% 4%;
**将盒子设置为不同的背景颜色
**将盒子设置为不同的背景图像
**将盒子的背景图像设置为水平平铺
**将盒子的背景图像设置为盒子中央