固定布局(为栏设定内边距和边框)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="./normalize.css">
<script>
   (function() {
     if (!
     /*@[email protected]*/
     0) return;
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(‘, ‘);
     var i= e.length;
     while (i--){
         document.createElement(e[i])
     }
})()
</script>
    <style type="text/css">
        * {padding:0;}
        #wrapper {width:960px; margin:0 auto; border:1px solid; }
        #wrapper li {list-style-type:none;}
        a{color: #fff; text-decoration: none;}
        nav{ width: 150px; float: left;background: red;}
        article {width:600px;float:left;background:#ffed53;}
        aside{ float: left; width: 210px; background: blue;}
        header{ background: #f90; }
        footer{ background: #000; clear: both; }
    </style>
</head>
<body>
    <div id="wrapper">
        <header>页头</header>
        <nav>
            <ul>
                <li><a href="#">无序列表</a></li>
                <li><a href="#">无序列表</a></li>
                <li><a href="#">无序列表</a></li>
                <li><a href="#">无序列表</a></li>
                <li><a href="#">无序列表</a></li>
            </ul>
        </nav>
        <article>
                这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素.
        </article>
        <aside>
            <ul>
                <li><a href="#">第三列导航链接</a></li>
                <li><a href="#">第三列导航链接</a></li>
                <li><a href="#">第三列导航链接</a></li>
                <li><a href="#">第三列导航链接</a></li>
                <li><a href="#">第三列导航链接</a></li>
            </ul>
        </aside>
        <footer>页脚</footer>
    </div>
</body>
</html>

如上代码所示,是一个设定固定宽高的三列布局。这种情况往往需要设置盒子的内外边距。但如果单纯在盒子里添加的话,必定导致总宽度增加,盒子滑移。一般这种情况下有三种解决方法:

1.从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。(每次有添加都得计算,麻烦)

2.在容器内部的元素上添加内边距或外边距。(需要添加额外div元素)

<article>
    <div class="inner">
        <!-- 文本 -->
    </div>
</article>    

看,也不过是单单添加一个div而已,然后给它添加个样式

article .inner {
    margin:10px;
    border:2px solid red;
    padding:20px;
}

中间栏的宽度并未因此有什么变化,因为内容区减少的宽度抵消了应用到内部 div 上的外边距、边框和内边距的总宽度。就是说如果布局中的栏是浮动的,而且都设定了宽度,你就根本不要去动它!要动,就把内容放在内部 div 里,动这个 div 。注意:如果容器的上、下边框不可见,内部 div 的上、下外边距会叠加。要是你遇到了这个问题,可以只为容器设定垂直内边距。但要小心一点,别一块儿也添加水平内边距。

3.使用 CSS3 的 box-sizing 属性切换盒子缩放方式,比如 section {box-sizing:border-box;}。应用 box-sizing 属性后,给 section 添加边框和内边距都不会增大盒子,相反会导致内容变窄。(老浏览器存在兼容问题 IE6和 IE7不支持 box-sizing属性)

这是最简单的一个办法,只要在三个浮动的栏的CSS规则中分别加上box-sizing:border-box 声明,再给栏添加内边距(和边框)就不会导致盒子的宽度变化了。此时,既不用调整栏宽去抵消增加的内边距,也不用使用内部 div ,添加内边距的结果就是内容收缩。

时间: 2024-10-20 00:11:34

固定布局(为栏设定内边距和边框)的相关文章

box-sizing:border-box 将元素的内边距和边框都设定在宽高内计算

http://www.w3school.com.cn/cssref/pr_box-sizing.asp box-sizing: content-box|border-box|inherit; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为. 宽度和高度分别应用到元素的内容框. 在宽度和高度之外绘制元素的内边距和边框. border-box 为元素设定的宽度和高度决定了元素的边框盒. 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制. 通过从已设定

css细节复习笔记——内边距、边框和外边距

一个元素的内边距.边框和外边距属性会影响着整个文档如何布局,更重要的是,它们会严重影响给定元素的外观. 高度和宽度 这两个属性不能应用到行内非替换元素,其高度和宽度由链接的内容确定,而不是由创作人员确定.正常流中的元素很少有设定的高度. 外边距和内边距 如果元素有背景,则会影响使用内边距和外边距,因为背景会延伸到内边距中,但不会延伸到外边距.为元素指定的内边距和外边距会影响元素的背景何时结束. 为内容区的个边增加10像素空白,margin:10px,类似于html的hspace和vspace,设

CSS框模型(框模型概述、内边距、边框、外边距、外边距合并)

CSS 框模型概述 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素. 内边距.边框和外边距都是可选的,默认值是零.但是,许多元素将由用户代理样式表设置外边距和内边距.可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式.这可以分别进行,也可以使用通用选择

(转)CSS3全局实现所有元素的内边距和边框不增加

全局设置 border-box 很好,首先它符合直觉,其次它可以省去一次又一次的加加减减 它还有一个关键作用--让有边框的盒子正常使用百分比宽度.但是使用了 border-box 可能会与一些依赖默认 box-sizing 的库冲突 不过这种问题大多数时候可以通过把交由这些库处理的块的 box-sizing 设置回 content-box 来解决. 推荐写法是 1 html { 2 box-sizing: border-box; 3 } 4 *, *:before, *:after { 5 bo

CSS 框模型——规定了元素框处理元素内容、内边距、边框和外边距的方式

转自:http://www.w3school.com.cn/css/css_boxmodel.asp 要知道在父元素:float, rel, abs位置情况下,box模型的变换情况,请见:http://www.cnblogs.com/hh54188/archive/2010/12/28/1919078.html,此外,对于如何计算父元素的width和height,该文章也说明了~ CSS 框模型概述 元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框

css 尺寸、边框、内边距、背景以及css Sprite

上节课回顾: HTML标签: 格式排版 p 段落 双br 换行 单hr 分隔线 单h1~h6 标题 双pre 原样格式化输出 双div 标签,无任何特殊意义 HTML标签 :文本 <em> 强调 倾斜 双<ruby></ruby> 加拼音 <rt></rt> <strong> 加粗 强调 双<mark></mark> 标记 选中 双<sub></sub> 下标<sup><

内边距《CSS权威指南》读书笔记

元素框的内边距在边框和内容区之间,属性为padding. 注意:内边距绝对不能为负 属性值:接受任何长度值或百分数值. 默认:元素默认没有内边距,段落之间的间隔传统上只由外边距保证.所以边框和元素本身的内容非常接近,所以在设置边框的同时最好增加内边距. 上下内边距是不会像外边距那样合并的. 使用内边距而不是外边距来分割段落的好处:可以在段落之间插入分隔边框,而这些边框在外观上会构成一条实线. 百分数值和内边距 和外边距一样,内边距也可以设置百分数值,相对于父元素的width计算. 单边内边距 和

jquery获取元素的所有宽高(包括内边距和外边距)

width() - 返回元素的宽度.height() - 返回元素的高度.innerWidth() 方法返回元素的宽度(包括内边距).                    innerHeight() 方法返回元素的高度(包括内边距).                    outerWidth() 方法返回元素的宽度(包括内边距和边框).             outerHeight() 方法返回元素的高度(包括内边距和边框).        outerWidth(true) 方法返回元素的

盒模型——内边距

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>postion</title>        <style>            .box1{                /*                 *使用width来设置盒子内容的宽度                 * height来