最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • css 世界学习总结 - 第三章 流、元素与基本尺寸

    正文概述 掘金(wxy201008)   2021-02-02   242

    css 世界学习总结 - 第三章 流、元素与基本尺寸

    流体布局引出的几种网页布局方式

    布局方式描述特点场景
    静态布局Static Layout,传统Web设计,网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。一般需要设置最小宽度不能根据用户的屏幕尺寸做出不同的表现传统PC网页流式布局Liquid Layout,页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。代表作栅栏系统(网格系统)网页中主要的划分区域的尺寸使用百分数(搭配min-、max-属性使用)屏幕分辨率变化时,页面里元素的大小会变化而但布局不变自适应布局Adaptive Layout,使用@media分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围屏幕分辨率变化时,页面里面元素的位置会变化而大小不会变化-响应式布局Responsive Layout,一个页面在所有终端上(各种尺寸的PC、手机、手表、冰箱的Web浏览器等等)都能显示出令人满意的效果每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变多终端页面弹性布局rem/em布局,包裹文字的各元素的尺寸采用em/rem做单位,而页面的主要划分区域的尺寸仍使用百分数或px做单位理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应移动端

    结论:

    1. 如果只做pc端,那么静态布局(定宽度)是最好的选择;
    2. 如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的3选择,一份css+一份js调节font-size搞定;
    3. 如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。

    流体布局是什么

    所谓“流体布局”,指的是利用元素“流”的特性实现的各类布局效果。因为“流”本身 具有自适应特性,所以“流体布局”往往都是具有自适应性的。 但是,“流体布局”并不等同于 “自适应布局”。 “自适应布局”是对凡是具有自适应特性的一类布局的统称,“流体布局”要狭窄得多。例如,表格布局也可以设置为100%自适应,但表格和“流”不是一路的,并不属于“流体布局”。 通俗的说,流体布局就是在width:auto;或者格式化宽/高中,通过设定margin/border/padding来影响content的布局的方式

    什么是块级元素

    HTML标签通常分为块级元素(block-level element)和内联元素(inline element) 块级元素:一个水平流上只能单独显示一个块级元素如 内联元素:一个水平流可显示多个内联元素(常用如 img a span button input etc)

    哪些元素是内联元素

    从表现看就行为表现来看,“内联元素”的典型特征就是可以和文字在一行显示。因此,文字是内联元素,图片是内联元素,按钮是内联元素,输入框、下拉框等原生表单控件也是内联元素

    为什么list-item元素会出现项目符号

    list-item 使用附加的标记盒子,专门用来放圆点、数字这些项目符号。

    盒子模型

    盒子模型外在盒子内在盒子
    blockblockblockinlineinlineinlineinline-blockinlineblock

    深藏不露的width:auto

    1. 充分利用可用空间 块级元素的默认宽度是父级元素的宽度的100%
    2. 收缩与包裹 当元素处于浮动、绝对定位或者为内联块元素或table元素,父级元素失去原有宽度收缩到与内部元素一样
    3. 收缩到最小 这个容易出现在table-layout为auto的表格中,为了不超过父级元素的宽度
    4. 超出容器限制 除非有明确的width相关设置,否则上面3种情况尺寸都不会主动超过父级容器宽度,但是存在一些特殊情况。除非是很长的英文,或者设置white-space: nowrap

    外部尺寸与流体特性

    1.正常流宽度 100%

    在页面中随便扔一个div元素,其尺寸表现就会和水流一样铺满容器。这就 是block 容器的流特性。

    举一个书中的例子

    See the Pen <a href='https://codepen.io/wxy521/pen/oNYgyEJ'>oNYgyEJ</a> by wxy (<a href='https://codepen.io/wxy521'>@wxy521</a>) on <a href='https://codepen.io'>CodePen</a>.

    这是一个对比演示,上下两个导航均有margin和padding,前者无width设置,完全借助流的特性,后者宽度width:100%。 结果,后者的尺寸超出了外部的容器,完全就不像“水流”那样完全利用容器空间,即所谓的“流动性丢失”

    2.格式化宽度

    格式化宽度仅出现在"绝对定位模型"中,也就是出现在position属性值为absolute和fixed的元素中,在预设情况下绝对定位元素的宽度表现是"包裹性","宽度由内部尺寸决定",但是有一中情况下由外部尺寸决定。

    典型的可替换元素有:<iframe><video><embed><img>

    对于非替换元素,当 left/right 或 top/bottom 对立方位的属性值同时存在的时候,元素的宽度表现为“格式化宽度”,其宽度大小相对于最近的具有定位特性 (position属性值不是static) 的祖先元素计算

    例子格式化宽度实现水平垂直居中

    See the Pen <a href='https://codepen.io/wxy521/pen/zYoxLry'>格式化宽度实现水平垂直居中</a> by wxy (<a href='https://codepen.io/wxy521'>@wxy521</a>) on <a href='https://codepen.io'>CodePen</a>.

    内部尺寸与流体特性

    1.包裹性

    包裹性”除了“包裹”,还有“自适应性”。所谓“自适应性”指的是元素尺寸由内部元素决定,但永远小于“包含块”容器的尺寸(除非容器尺寸小于元素的“首选最小宽度”)。

    2.首选最小宽度

    图片和文字的权重要远大于布局,当布局中存在更高权重元素时(如width:0 不生效)最小宽度受其内容影响 (文字中的最小宽度为单个字符宽度)

    break-all 对于non-CJK (CJK 指中文/日文/韩文) 文本,可在任意字符间断行。

    3.最大宽度

    最大宽度就是元素可以有的最大宽度。“最大宽度”实际等同于“包裹性”元素设置white-space: nowrap 声明后的宽度。(连续的空白符会被合并。但文本内的换行无效) 如果内部没有块级元素或者块级元素没有设定宽度值,则“最大宽度”实际上是最大的连续内联盒子的宽度

    css流体布局下的宽度分离原则

    使用双层嵌套实现内容自适应

    See the Pen <a href='https://codepen.io/wxy521/pen/dyOPLXv'>宽度分离</a> by wxy (<a href='https://codepen.io/wxy521'>@wxy521</a>) on <a href='https://codepen.io'>CodePen</a>.

    改变width/height作用细节的box-sizing

    box-sizing的作用

    box-sizing属性是改变width的作用细节,改变了width作用所在的盒子

    .box1 { box-sizing: content-box; } /* 默认值 */
    .box2 { box-sizing: padding-box; } /* firefox曾经支持 */
    .box3 { box-sizing: border-box; } /* 全线支持 */
    .box4 { box-sizing: margin-box; } /* 从未支持过 */
    

    如何评价*{box-sizing: border-box}

    这种做法易产生没必要的消耗。通配符 * 应该是一个慎用的选择器,因为它会选择所有的标签元素。其对与某些元素 box-sizing 无论是什么值,对其渲染表现都没有影响,* 对这些元素而言就是没有必要的消耗。

    /* 这样重置更合理 */
    input, textarea, img, video, object {
        box-sizing: border-box;
    }
    

    box-sizing发明的初衷

    box-sizing:border-box最常见的用途就是原生普通文本框input和文本域textarea的100%自适应父容器宽度

    例如textarea宽度100%自适应

    See the Pen <a href='https://codepen.io/wxy521/pen/dyOPLrd'>textarea宽度100%自适应</a> by wxy (<a href='https://codepen.io/wxy521'>@wxy521</a>) on <a href='https://codepen.io'>CodePen</a>.

    相对简单而单纯的height:auto

    关于height:100%

    div {
        width: 100%; /* 这是多余的 */
        height: 100%; /* 这是无效的 */
        background: url(bg.jpg);
    }
    

    为何height:100%无效

    要明白其中的原因要先了解浏览器渲染的基本原理。 首先,先下载文档内容,加载头部样式资源(如果有的话),然后按照从上而下、自外而内的顺序渲染DOM内容。 套用本例就是,先渲染父级元素,后渲染子元素,是有先后顺序的。因此,当渲染到父元素的时候,子元素的width:100%并没有渲染,宽度就是图片加文字内容的宽度;等渲染到文字这个元素的时候,父元素的宽度已经固定,此时的width:100%就是已经固定好的父元素的宽度。 宽度不够怎么办?溢出就好了,overflow属性就是为此而生的

    因为没有显示定义height由仅内容填充,则解释成了auto。

    'auto' * 100/100 = NaN
    

    height:100%无效

    如何让元素支持height:100%效果

    设定显式的高度值

    html, body {
        height: 100%;
    }
    

    使用绝对定位

    div {
        height: 100%;
        position: absolute;
    }
    

    如绝对定位和非绝对定位元素百分比值计算区别

    See the Pen <a href='https://codepen.io/wxy521/pen/vYyEqaX'>绝对定位和非绝对定位元素百分比值计算区别</a> by wxy (<a href='https://codepen.io/wxy521'>@wxy521</a>) on <a href='https://codepen.io'>CodePen</a>.

    任意大小图片的左右半区布局

    See the Pen <a href='https://codepen.io/wxy521/pen/YzpPmyV'>任意大小图片的左右半区布局</a> by wxy (<a href='https://codepen.io/wxy521'>@wxy521</a>) on <a href='https://codepen.io'>CodePen</a>.

    CSS min-width/max-width和min-height/max-height

    为流体而生的min-width/max-width

    比如,网页宽度在1200~1400像素自适应,既满足大屏的大气又满足笔记本的良好显示,此时,min-width/max-width就可以大显神威了

    .container {
        min-width: 1200px;
        max-width: 1400px;
    }
    

    公众号的热门文章中,经常会有图片,这些图片都是用户上传产生的,因此尺寸会有大有小,为了避免图片在移动端展示过大的影响体验,常常会有下面的max-width限制

    img {
        max-width: 100%;
        height: auto!important;
    }
    

    但这样也会有体验上的问题,那就是在加载时图片占据高度会从0变成计算高度,图文会有明显的瀑布式下落

    与众不同的初始值

    超越!important,超越最大

    超越 !important 指的是 max-width 会覆盖 width

    比方说,针对下面的 HTML 和 CSS 设置,图片最后呈现的宽度是多少?

    <img scr="1.jpg" style="width: 480px!important;"/>
    <style>
        img {
            max-width: 256px;
        }
    </style>
    

    答案是256px。style、!important通通靠边站!因为max-width会覆盖width

    超越最大指的是 min-width 的值大于 max-width 值时取 min-width 的值 超越最大值得是 min-width 覆盖 max-width ,此规则发生在 min-width 和 max-width 冲突时

    .container {
        min-width: 1400px;
        max-width: 1200px;
    }
    

    最小宽度比最大宽度设置得还要大,遵循“超越最大”规则(注意不是“后台者居上”规则) 值取min-width,max-width被忽略,于是,.container元素表现为至少1400像素宽

    任意高度元素的展开收起动画技术

    第一反应就是使用height + overflow:hidden实现,但是,很多时候我们展开的元素内容是动态的,换句话说高度不是固定的,因此,height使用的值是默认的auto,应该都知道的auto是个关键字值,并非数值,正如height: 100%的100%无法和auto相计算一样,从0px到auto是无法计算的,因此无法形成过渡或动画效果

    /* 因此,下面代码呈现的效果也是生硬的展开和收起 */
    .element {
        height: 0;
        overflow: hidden;
        transition: height .25s;
    }
    
    .element.active {
        height: auto; /* 没有transition效果,只是生硬的展开 */
    }
    
    /* 难道就没有什么一劳永逸的实现方法吗?有,不妨试试max-height */
    .element {
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s;
    }
    
    .element.active {
        max-height: 666px /* 一个足够大的高度值 */
    }
    

    在本交互中,也就是height: auto时候的高度值。于是,一个高度不定的任意元素的展开动画就实现了

    应用:

    /* 使用max-height实现任意高度元素的展开收起动画 */
    @mixin slide-vertical($maxHeight, $initMaxHeight:0, $duration:.25s) {
      max-height: $initMaxHeight;
      overflow: hidden;
      transition: max-height $duration;
      &.active {
        max-height: $maxHeight;
      }
    }
    
    See the Pen <a href='https://codepen.io/wxy521/pen/WNovRzd'>max-height与任意高度元素滑动展开收起效果</a> by wxy (<a href='https://codepen.io/wxy521'>@wxy521</a>) on <a href='https://codepen.io'>CodePen</a>.

    因此,建议max-height使用足够安全的最小值,这样,收起时即使有延迟效果,也会因为时间很短,很难给用户察觉,并不会影响体验

    点击原文链接查看代码案例:个人博客


    起源地 » css 世界学习总结 - 第三章 流、元素与基本尺寸

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元