一招带你解决头疼的屏幕适配-(静态布局、浮动布局、弹性(Flex)布局、自适应布局、响应式布局)

以下是 静态布局、浮动布局、弹性(Flex)布局、自适应布局、响应式布局 的具体实现方法,结合代码示例和核心知识点:

一、静态布局(Static Layout)

特点

固定宽高,居中显示,不随屏幕大小变化,适合PC端固定尺寸页面(如官网、门户网站)。
核心单位px,定宽常用 min-width 或固定宽度。

实现方法
DOCTYPE html>
<html>
<head>
    <style>
        /* 固定容器宽度并居中 */
        .container {
     
            width: 1200px; /* 固定宽度 */
            margin: 0 auto; /* 水平居中 */
            min-width: 960px; /* 最小宽度,防止小屏幕下布局破坏 */
            padding: 20px;
        }
        .header, .footer {
     
            height: 80px;
            background: #f5f5f5;
        }
        .content {
     
            height: 400px;
            background: #eee;
        }
    style>
head>
<body>
    <div class="container">
        <div class="header">Header (固定高度)div>
        <div class="content">Content (固定区域)div>
        <div class="footer">Footer (固定高度)div>
    div>
body>
html>
关键代码
  • width: 固定值:设定容器宽度(如1200px)。
  • margin: 0 auto:实现水平居中。
  • min-width:防止页面过窄时内容溢出(可选)。

二、浮动布局(Float Layout)

特点

通过 float 属性使元素脱离文档流,左/右排列,适用于多列布局(如图文混排),但需处理 浮动塌陷

实现方法
DOCTYPE html>
<html>
<head>
    <style>
        /*  clearfix:解决浮动塌陷 */
        .clearfix::after {
     
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
     

你可能感兴趣的:(css,css3,前端)