Css布局系列-上下两栏应用场景_html/css_WEB-ITnose
程序员文章站
2022-04-09 23:47:43
...
今天讲讲上下两栏布局的应用场景,在此之前稍微提一下box-sizing这个属性。该属性有三个值分别为content-box|border-box|inherit。 面板通常分为标题栏、内容栏两部份; 对标题栏的高度进行固定,内容栏让其随内容的撑高而伸高也就是外撑; 内撑就是面板最外层容器的高度减去标题栏的高度等于内容栏的高度,如果内容太多内容栏就会出现滚动条。
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
通常我们设置的高宽度其实是指内容的高宽度,是没有将边框的高宽度算在内的。如果设置box-sizing:content-box就是只包含盒子内容的高宽度,边框的高宽不包含在内,默认就是这种算法(图1)。如果想将边框包含在我们设置的高宽度之内,设置box-sizing:border-box就可以(图2),这样你就会看内容的高宽度变成180*180,其计算公式:
内容的宽度=宽度-(边框的宽度*2+padding*2);内容的高度=高度-(边框的高度*2+padding*2);
(图1)
(图2)
这个属性就提到这了,如果想详细了解可以自已去搜,也欢迎大家一起来讨论。上下栏的应用场景其实有很多,前面布局系列综合应用中上下两栏布局就是个示例。面板其实也是一个,这个我平常工作用得最多,到处都是面板。还有extjs、ligerui面板组件其实也是这个样子的。请看效果图:
现对面板布局与实现原理进行分析:
至于什么时候用到外撑什么时候用到内撑这个就看具体需求具体分析。
外撑效果图:
代码:
外撑面板我是内容栏我是内容栏
下一篇: css3实现动画滚动条
推荐阅读
-
CSS:三栏布局,两边固定,中间自适应_html/css_WEB-ITnose
-
css实现圣杯布局(两栏固定-中列浮动-中列div排在前面)--详解_html/css_WEB-ITnose
-
css实现圣杯布局(两栏固定-中列浮动-中列div排在前面)--详解_html/css_WEB-ITnose
-
有没有较全的静态网站模板,给推荐一下,以两栏布局为主?_html/css_WEB-ITnose
-
Css布局系列-上下两栏应用场景_html/css_WEB-ITnose
-
有没有较全的静态网站模板,给推荐一下,以两栏布局为主?_html/css_WEB-ITnose
-
Css布局系列-上下两栏布局_html/css_WEB-ITnose
-
CSS:三栏布局,两边固定,中间自适应_html/css_WEB-ITnose
-
Css布局系列-上下两栏应用场景_html/css_WEB-ITnose
-
Css布局系列-上下两栏布局_html/css_WEB-ITnose