“盒子的嵌套布局”的版本间的差异
来自CloudWiki
(创建页面,内容为“ == 前情回顾 == === 上下布局=== === 左右布局=== ==盒子的嵌套布局==”) |
|||
第2行: | 第2行: | ||
== 前情回顾 == | == 前情回顾 == | ||
=== 上下布局=== | === 上下布局=== | ||
+ | *盒子的居中,在现在网页设计技术中,我们总是通过设置盒子的水平方向的边距来实现。 | ||
+ | *具体方案为:margin:值1 auto; | ||
+ | *[[文件:范例.jpg]][[文件:范例.jpg]] | ||
+ | *使用这种方案设置盒子居中时,页面必须要设置为xhtml标准的,否则将不起作用 | ||
=== 左右布局=== | === 左右布局=== | ||
+ | *[[文件:范例.jpg]][[文件:范例.jpg]] | ||
+ | *盒子的height属性要设置为auto,否则会导致盒子的高度过分的死板,不能随浏览器的大小而自动调整。 | ||
==盒子的嵌套布局== | ==盒子的嵌套布局== | ||
+ | ===什么是盒子的嵌套=== | ||
+ | *先在网页中进行大框架的布局,然后将每个分块再划分为更小的分支。 | ||
+ | *[[文件:范例.jpg]][[文件:范例.jpg]] | ||
+ | ===盒子的高度塌陷=== | ||
+ | *盒子的高度塌陷需要满足的条件有两个: | ||
+ | 第一,盒子的高度被设置为auto; | ||
+ | 第二,盒子中所有子元素都是浮动的。 | ||
+ | *盒子的高度塌陷问题需要使用清除浮动的样式属性clear来解决。 | ||
+ | 第一步,在样式中定义.clear{clear:both;},选择符的名称可以改变,类型也可以是id选择符,样式属性clear的取值可以根据实际情况使用left或者right。<br/> | ||
+ | 第二步,在作为父元素的盒子内部最下方增加一个空白盒子,引用定义的class类选择符clear即可。 |
2017年11月2日 (四) 13:26的版本
前情回顾
上下布局
- 盒子的居中,在现在网页设计技术中,我们总是通过设置盒子的水平方向的边距来实现。
- 具体方案为:margin:值1 auto;
- 使用这种方案设置盒子居中时,页面必须要设置为xhtml标准的,否则将不起作用
左右布局
盒子的嵌套布局
什么是盒子的嵌套
盒子的高度塌陷
- 盒子的高度塌陷需要满足的条件有两个:
第一,盒子的高度被设置为auto; 第二,盒子中所有子元素都是浮动的。
- 盒子的高度塌陷问题需要使用清除浮动的样式属性clear来解决。
第一步,在样式中定义.clear{clear:both;},选择符的名称可以改变,类型也可以是id选择符,样式属性clear的取值可以根据实际情况使用left或者right。
第二步,在作为父元素的盒子内部最下方增加一个空白盒子,引用定义的class类选择符clear即可。