css_防止溢出_边框/元素水平居中/(响应式设计:媒体查询)适配不同尺寸的不同布局提高网页可读性

文章目录

layouts and position

references

Normal Flow - Learn web development | MDN (mozilla.org)

Flexbox - Learn web development | MDN (mozilla.org)

Ordering flex items

flex/complex-flexbox.html · xuchaoxin1375/webLearn - Gitee.com

布局和留白

开发者工具查看flex布局控制下留白

盒模型+position查看

  • 1642350734759

防止溢出

  • 此处讨论如何通过调整容器内元素尽可能防止溢出
    • 为了减少溢出,一般少设置具体的盒模型width/height(包括以绝对单位度量的值(px)以及百分比值
    • min-width/min-height此类值的使用可以移动程度避免溢出
    • 但是有时为了学习(试验)对齐效果(比如grid/flex布局中的对齐属性(align-/justify-),使用具体的值(设置的足够大),演示效果会比较好(更容易)
  • case1:
    • 为容器内元素设置了宽度为100%时,又外带各种padding/border/margin的情况下,元素容易溢出父容器;
    • 特别是:父容器(content-box)无法根据内容元素的增长而增长中

block元素和inline元素

回顾元素盒模型的变化规律

块级元素

  • 默认的，一个块级元素的内容宽度是其父元素的100%，其高度与其内容高度一致。

    • 元素会占据父容器的100%content-box可用空间,尽管没有足够的内容导致content 留白
    • 当元素内容过多,则引起换行行为,而非溢出
    • 例如 <p>元素

  • 内联元素的height width与内容一致。你无法设置内联元素的height width — 它们就那样置于块级元素的内容里。 如果你想控制内联元素的尺寸，你需要为元素设置 display: block; （或者，display: inline-block; inline-block 混合了inline 和 block的特性。)

  • 块级元素按照基于其父元素的书写顺序(默认值: horizontal-tb)的 块流动方向(block flow direction) 放置 —

    • 每个块级元素会在上一个元素下面另起一行，它们会被设置好的margin 分隔。
  • 在英语，或者其他水平书写、自上而下模式里，块级元素是垂直组织的。
内联元素
  • 内联元素的表现有所不同 — 它们不会默认另起一行；
  • 只要在其父级块级元素的宽度内有足够的空间，它们与其他内联元素、相邻的文本内容（或者被包裹的）被安排在同一行。
  • 如果空间不够，溢出的文本或元素将移到新的一行。

flex控制

  • flex布局可以控制主轴方向的收缩/拉伸(一定程度可以避免溢出)
  • 用flex竖向排布(flex-direction)的文章的各个block时可以将内容收缩在一个容器内而不用滚动(控制纵向溢出)
    • 虽然有时滚轴更加优雅
    • 默认的,flex元素是按 row排列,但这往往不适合排布大量内容的页面

box-sizing溢出控制

box-sizing:代替盒模型控制

  • margin不参与盒模型大小的计算(代替盒模型支持到border-box)
    • 这种情况下,如果设置了元素的margin(尤其是较大的margin),还是可能溢出(或者不居中的情况)
    • margin值设置成 auto往往会使得未溢出的(正常流)元素居中,经常可以满足排版需要

min-*属性

(比如max-width/max-height)

  • 这类属性很有用,可以以一个下限/上限来设定元素的基本内容(可以配合box-sizing)
  • 可以设置height 1%作为起点值(似乎不允许 em此类单位)
    • (这样即使容器中没有内容,也会绘制出一个矩形(前提是设置了border,且不是纯inline元素)
    • 或者根据需求,来决定是否显示设置height(如果考虑更好的自适应,可以设置min-height来代替)
  • 类似的,还有max-*元素

overflow控制

  • overflow的scroll/auto属性可以设置滚动条,有时可以满足需要

元素水平居中

水平居中

  • 在现代浏览器中实现水平居中，可以对需要居中的元素的父容器元素使用 display: flex;justify-content: center;

  • 如果需要具有收缩元素效果,依赖于被布局元素设置flex属性(flex-shrink)

    • 默认情况下,允许收缩(flex-item(flex-shrink==1))

  • 不过，在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 margin: 0 auto;。

响应式设计:媒体查询

reference

  • Responsive design - Learn web development | MDN (mozilla.org)
  • 尽管我们有各种方法可以减少溢出,但是有时做到不溢出却失去了可读性
  • 例如,为宽屏设备设计的网页布局再窄屏设备显示的时候,可能会由于收缩,使得文本狭长变得难以阅读
  • 于是,如果我们能够为小屏幕单独设计一种布局,使得布局在伸缩时有更合适的行为,而不会过度伸缩导致畸形的阅读体验

媒体查询实例

布局结构变化前(width<800px)

在这里插入图片描述

布局结构变化之后

屏幕宽度width>800px(采用浮动布局
在这里插入图片描述

css code
/*! CSS Used from: http://127.0.0.1:5500/styles/general_box.css */
body{min-height:10%;margin:auto;padding:5px;border:solid 5px red;}
body::after{content:"body-box(margin-auto)";border:dotted 2px;}
h1{text-align:center;}
h1{border:solid 2px blue;background-color:rgba(255, 192, 203, 0.562);border-radius:15px;}
p{background:rgba(0, 255, 255, 0.178);border-radius:9px;border:3px solid blue;padding:5px;}
.playground{min-width:1%;min-height:1%;padding:2px;border:dotted 2px orange;}
.playground::after{content:"playground-box";border:dotted 2px green;}
.playground>*{margin-block:20px 0;}
.yellow-bgc-a{background:rgba(255, 255, 0, 0.5);}
.green-bgc-a{background:rgba(39, 223, 39, 0.486);}
.border-dashed{border-style:dashed;}
.padding-20px{padding:20px;}
/*! CSS Used from: http://127.0.0.1:5500/styles/float.css */
body{width:90%;max-width:900px;margin:0 auto;}
p{line-height:2;word-spacing:0.1rem;}
.clear-both{clear:both;border:dotted 2px red;}
*{box-sizing:border-box;}
/*! CSS Used from: Embedded */
.col1,.col2{background-color:rgba(233, 72, 72, 0.096);}
@media screen and (min-width: 800px){
.col1{width:31.24999999%;float:left;}
.col2{width:64.58333331%;float:right;}
}
html code
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta
        http-equiv="X-UA-Compatible"
        content="IE=edge"
    >
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Document</title>
    <link
        rel="stylesheet"
        href="/styles/general_box.css"
    >
    <link
        rel="stylesheet"
        href="/styles/float.css"
    >
    <style>
        section {
            width: 90%;
            /* max-width: 900px; */
            margin: 0 auto;
        }
 
        .col1,
        .col2 {
            background-color: rgba(233, 72, 72, 0.096);
        }
 
        @media screen and (min-width: 800px) {
            .col1 {
                width: 31.24999999%;
                float: left;
            }
 
            .col2 {
                width: 64.58333331%;
                float: right;
            }
        }
    </style>
</head>
 
<body>
    <h1>simple media query</h1>
    <div class="wrapper playground border-dashed">
        <div class="col1">
            <p>This layout is responsive. See what happens if you make the browser window wider or narrow.</p>
            <p>This layout is responsive. See what happens if you make the browser window wider or narrow.</p>
            <p>This layout is responsive. See what happens if you make the browser window wider or narrow.</p>
            <!-- <div class="clear-both">clear-float</div> -->
 
        </div>
        <div class="col2">
            <p>One November night in the year 1782, so the story 😎runs, two brothers sat over their winter fire in the
                little
                French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their
                names
                were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing
                thoughtful
                minds and a deep interest in all scientific knowledge and new discovery.</p>
            <p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the
                rising
                smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
        </div>
 
        <div class="clear-both yellow-bgc-a">clear-float</div>
        <div class="green-bgc-a padding-20px"> after all columns </div>
 
    </div>
 
</body>
 
</html>
posted @   xuchaoxin1375  阅读(12)  评论(0)  编辑  收藏  举报  
相关博文：
· css_盒子模型:块级盒子/内联盒子_显示类型/盒模型border可见性
· css_flex弹性盒模型/flex布局/flex在线可视化工具
· 深入解析CSS
· CSS-架构教程-全-
· HTML5-和-CSS3-Web-演化入门指南-全-
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示