首页 > 其他分享 >CSS3页面布局-三栏-固定宽度布局

CSS3页面布局-三栏-固定宽度布局

时间:2024-08-23 17:27:40浏览次数:11  
标签:CSS3 box 三栏 布局 width 宽度 background 合江

布局的基本概念

多栏布局三种基本实现方案:固定宽度,流动,弹性。

固定宽度布局:大小不会随用户调整浏览器窗口大小。

一版960-1100,960常见,可以被3,4,5,6,8,10,12,16整除。

流动布局:大小会随用户调整浏览器窗口大小而变化。

可以更好适应大屏幕,也叫响应式。

弹性布局:所有元素大小也会变换。

布局高度与布局宽度

布局高度:一般不该设定高度,除非页面上绝对定位的元素。

正常元素保持默认值auto不变,保持垂直居中。

布局宽度:精确控制布局宽度。

总结:一般原则,控制布局宽度,内容决定布局高度。

三栏-固定宽度布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>5.2 三栏-固定宽度布局</title>
    <style>
        #wrapper {
            width: 960px;
            margin: 0 auto;
            border: 1px solid;
        }

        nav {
            width: 150px;
            float: left;
        }

        nav li {
            list-style-type: none;
        }

        article {
            width: 600px;
            float: left;
            background: #ffed53;
        }

        aside {
            width: 210px;
            float: left;
            background: #3f7ccf;
        }

        header {
            background: #f00;
        }

        footer {
            color: aliceblue;
            clear: both;
            background: #000;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <header>
            固定宽度布局
        </header>
        <nav>
            <!-- 无序列表 -->
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
        </nav>
        <article>
            <!-- 文本元素 -->
            <h1>四川合江气温达42.2℃ 连续两天热到全国第一</h1>
            <p>
                【四川合江气温达42.2℃ 连续两天热到全国第一】财联社8月22日电,
                据中央气象台官网信息,截至8月22日17时,在逐小时气温实况排行榜中,
                川渝地区气温在当天11时至17时连续7个小时霸榜全国高温榜“前十”。
                其中,四川合江在17时以42.2℃热到了全国第一。
                而在8月21日下午,四川合江的气温也突破40℃,登顶全国高温榜第一。
            </p>
            <hr />
            <h1>外交部回应黑神话悟空全球大热</h1>
            <p>
                21日,外交部发言人毛宁就“中国的国产游戏《黑神话:悟空》上线后,受到国际玩家青睐”作出回应:反映了中国文化的吸引力。
            </p>
        </article>
        <aside>
            <h1>这是一个侧边栏</h1>
            <p>
                今年是南开大学建校105周年。8月21日,南开大学2001级校友、字节跳动创始人张一鸣与南开大学2001级校友、字节跳动CEO梁汝波共同捐赠人民币2亿元,主要用于支持南开数学研究和人才培养。
            </p>
        </aside>
        <footer>
            这是页脚
        </footer>
    </div>
</body>

</html>

为栏设定内边距和边框

  • 让内容和栏边边界空开距离,为栏添加水平外边距和内边距,栏与栏之间增加间距,导致布局宽度增大,使得浮动栏下滑。
  • 在栏中添加大图片,或者长字符串,导致栏宽超过布局宽度,也会导致右侧栏滑到左下方。

防止浮动栏下滑:

  • 从设定的宽度中减去内外边距加边框和,每次都得调整,容易布局错乱。
  • 容器内部元素加上内外边距,加inner的div,内部div自动填充父元素,给内部div设置内外边距,可以保持内容与栏边界的距离,如果容器上下边框不可见,内部div上下外边距会叠加。
  • 用CSS3的box-sizing切换缩放方式,border-box,内外边距不增大,内容变窄。最简单的一个方法,IE6,7不支持,用的腻子脚本(polyfill)解决。

Paul Irish 前端大神

预防过大的元素,加一条{max-width:100%}不超过父元素,另一个是给父元素添加overflow:hidden。

单词太长,添加word-wrap:break-word进行断词。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>5.2 三栏-固定宽度布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrapper {
            width: 960px;
            margin: 0 auto;
            border: 1px solid #000;
            overflow: hidden;
        }

        nav {
            box-sizing: border-box;
            width: 150px;
            float: left;
            background: #dcd9c0;
            padding: 10px;
        }

        nav .inner {
            padding: 10px;
        }

        nav li {
            list-style-type: none;
        }

        article {
            box-sizing: border-box;
            width: 600px;
            float: left;
            background: #ffed53;
            padding: 10px 20px;
        }

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

        aside {
            box-sizing: border-box;
            width: 210px;
            float: left;
            background: #3f7ccf;
            padding: 10px;
        }

        aside .inner {
            padding: 10px;
        }

        footer {
            text-align: center;
        }

        header {
            background: #f00;
        }

        footer {
            color: aliceblue;
            clear: both;
            background: #000;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <header>
            固定宽度布局
        </header>
        <nav>
            <!-- <div class="inner"> -->
            <!-- 无序列表 -->
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
            <!-- </div> -->
        </nav>
        <article>
            <!-- <div class="inner"> -->
            <!-- 文本元素 -->
            <h1>四川合江气温达42.2℃ 连续两天热到全国第一</h1>
            <p>
                【四川合江气温达42.2℃ 连续两天热到全国第一】财联社8月22日电,
                据中央气象台官网信息,截至8月22日17时,在逐小时气温实况排行榜中,
                川渝地区气温在当天11时至17时连续7个小时霸榜全国高温榜“前十”。
                其中,四川合江在17时以42.2℃热到了全国第一。
                而在8月21日下午,四川合江的气温也突破40℃,登顶全国高温榜第一。
            </p>
            <hr />
            <h1>外交部回应黑神话悟空全球大热</h1>
            <p>
                21日,外交部发言人毛宁就“中国的国产游戏《黑神话:悟空》上线后,受到国际玩家青睐”作出回应:反映了中国文化的吸引力。
            </p>
            <!-- </div> -->
        </article>
        <aside>
            <!-- <div class="inner"> -->
            <h1>这是一个侧边栏</h1>
            <p>
                今年是南开大学建校105周年。8月21日,南开大学2001级校友、字节跳动创始人张一鸣与南开大学2001级校友、字节跳动CEO梁汝波共同捐赠人民币2亿元,主要用于支持南开数学研究和人才培养。
            </p>
            <!-- </div> -->
        </aside>
        <footer>
            这是页脚
        </footer>
    </div>
</body>

</html>

标签:CSS3,box,三栏,布局,width,宽度,background,合江
From: https://blog.csdn.net/qq_36324341/article/details/141470373

相关文章

  • 分享一个基于ChatGPT实现基于Convars布局思路的实现过程
    一、思路在AI的大背景,应用层算法已经不是问题,那么程序员的差距主要在认知思维模式和创新上面。目前AI的局限主要却决于沟通的效率,这是双方的问题,AI可能理解能力不足,或者提问者表达能力不足。这里我以PDFsharp实现Grid布局模式分享一下基于GPT实现的过程。因为PDFsharp只提供了XG......
  • 前端开发中的大屏布局方案:使用 rem 单位与动态设置 html 的 font-size
    使用rem单位与动态设置html的font-size前言随着设备尺寸的多样化,网页需要能够在不同大小的屏幕上提供良好的用户体验。传统的布局方式(如使用px)在不同分辨率下可能会导致布局失真。为了解决这个问题,我们可以通过动态设置html元素的font-size并使用rem单位来构......
  • 理解HarmonyOS中的Flex布局
    在开发HarmonyOS应用时,布局是一个至关重要的方面。布局不仅决定了应用的外观,也影响了用户的体验和交互方式。在HarmonyOS中,Flex布局是一种强大且灵活的布局方式,适用于创建复杂的界面结构。本文将带您深入了解Flex布局的核心概念以及如何在实际开发中有效利用它。什......
  • Nuxt3【过渡】2024最新版 (含页面过渡、布局过渡、全局过渡、局部过渡、动态过渡、禁用
    全局布局过渡layoutTransitionnuxt.config.ts中exportdefaultdefineNuxtConfig({app:{layoutTransition:{name:'layout',mode:'out-in'}},})app.vue中需添加样式.layout-enter-active,.layout-leave-active{transition:all0.4s;......
  • CSS Grid布局 速查表
    grid概念容器和项目:采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)行和列:容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)行和列的交叉区域,称为"单元格"(cell)网格线:划分网格的线,称为"网格线"(gridline)。水平网格线划分出行,垂直网......
  • 前端必知必会-CSS 布局overflow属性
    文章目录CSS布局-溢出overflow:visibleoverflow:hiddenoverflow:scrolloverflow:autooverflow-x和overflow-y总结CSS布局-溢出overflow属性指定当元素内容太大而无法容纳在指定区域时是否剪切内容或添加滚动条。overflow属性具有以下值:visible-......
  • 前端必知必会-CSS布局-z-index属性
    文章目录CSS布局-z-index属性无z-index总结CSS布局-z-index属性z-index属性指定元素的堆叠顺序。z-index属性指定元素的堆叠顺序(哪个元素应放置在其他元素的前面或后面)。元素可以具有正或负的堆叠顺序:这是一个标题由于图像的z-index为-1,因此它将......
  • Android开发 - DisplayMetrics 类控制布局图形的缩放显示解析
    DisplayMetrics是什么DisplayMetrics类在Android中用于获取设备的显示属性(像素等)DisplayMetrics的主要属性metrics.density:屏幕密度,用于决定屏幕上每英寸的像素数DisplayMetricsmetrics=newDisplayMetrics();density=metrics.density;常见值:0.75(低密度)、1.0......
  • HTML5+CSS3学习笔记补充——移动端网页+Bootstrap框架
    移动端网页和Bootstrap框架1.视口:用来约束HTML尺寸<!--视口标签是HTML骨架默认生成的设置网页宽度与逻辑分辨率(即设备)宽度一致--><metaname="viewport"content="width=device-width,initial-scale=1.0">2.二倍图:防止设计稿图片在高分辨率屏幕下模糊失真3.......
  • CSS3第三天(盒子模型+浮动)
    盒子模型1.内边距padding指定了高宽,再指定内边距,则会撑开盒子。盒子未指定高宽(继承算未指定),则不会撑开盒子。2.外边距margin用于控制盒子之间的距离。同padding的简写方式。margin-left左外边距righttopbottom块级盒子水平居中,需满足两个条件:①盒子必须指定了宽度②盒......