盒子布局的使用技巧

盒子布局的使用技巧

• 结合样例，思考以下问题：项目实训4 项目实训4_答案

盒子如何命名

• 盒子的命名尽量有意义一些，如nav、section等等
• 不要随便用任意的字母和数字命名。

怎样为盒子内的不同标签设置不同的样式

• 使用选择符：标记名选择符、id选择符、class选择符、子对象选择符

• 拓展：CSS的选择符（二）

在水平方向只有一个盒子时，如何使盒子居中？

• 设置盒子的水平边距为auto,可使盒子水平居中

.layer2{width:70%; height:300px;margin:0px auto;color:black;}

如何设置盒子高度

• 问题：为什么有的页面看起来很好，但是浏览器一缩小之后盒子的布局会混乱？
• 
• 原因：盒子的height属性没有设置为auto，导致盒子的高度过分的死板，不能随浏览器的大小而自动调整。
• 解决方法：将盒子的高度设为auto

如何消除缝隙

*{margin:0;padding:0}

• 这是通用选择符，通过在CSS中加添这一句，可以消除所有盒子之间的缝隙。
• 注意，p标签也是盒子，加上这一句代码的副作用是，相邻p标签之间的间距也变小了。

各种属性的优先级

• 各个样式表的优先级根据选择符确定
• 原则是应用范围越广的选择符级别越低，限制条件越多即应用范围越小的选择符优先级越高。
• 比如，我们假如在CSS中加入了这两个规则之后，则后者的优先级比前者高
• p标签的样式优先执行后者

*{margin:0;padding:0}
p{margin:5%;padding:5%}

如何为盒子取色

• 用浏览器取色器
• 具体请百度搜索“如何用浏览器取色”

巩固练习

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