精华内容
下载资源
问答
  • css布局
    千次阅读
    2021-04-12 23:03:26

    垂直居中DIV

    HTML部分

        <div class="father">
            <div class="son">我是垂直居中的div</div>
        </div>
    

    这里简单给出几种
    1.绝对定位(盒子宽高已知)

            .father {
                position: relative;
                width: 500px;
                height: 500px;
                background-color: red;
            }
            
            .son {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -150px;-盒子一半宽度)
                margin-top: -150px;-盒子一半高度) 
                width: 300px;
                height:300px;
                background-color: blue;
            }
    

    2.绝对定位(宽高已知)

            .father {
                position: relative;
                width: 500px;
                height: 500px;
                background-color: red;
            }
            
            .son{
                position:absolute;
                margin:auto;
                top:0; left:0; bottom:0;right:0;
                width: 300px;
                height:300px;
                background-color: blue;
            }
    

    3.定位 (宽高未知)

            .son {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: blue;
            }
    

    4.grid布局(父元素设置,宽高未知)(兼容性ie 10以上支持)

            .father {
                display: grid;
                align-items: center;
                justify-content: center;
                width: 500px;
                height: 500px;
                background-color: red;
            }
    

    5.flex布局(父元素设置,宽高未知)(兼容性ie 11以上支持)

            .father {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 500px;
                height: 500px;
                background-color: red;
            }
    

    6.表格布局(父元素设置,宽高未知)(兼容性较好)

            .father {
                display:table-cell
                text-align: center;
                vertical-align: middle
                width: 500px;
                height: 500px;
                background-color: red;
            }
            .son {
           		display: inline-block;
            }
    

    两栏布局左边固定右边自适应

    这与右边固定左边自适应,上固定下自适应是一个道理。

    HTML部分

            <div class="father">
                <div class="left"></div>
                <div class="right"></div>
            </div>
    

    1.float布局

                .left {
                    width: 200px;
                    height: 200px;
                    float: left;
                    background-color: blue;
                }
                .right {
                    margin-left: 200px;
                    height: 200px;
                    background-color: red;
                }
    

    2.绝对定位

                .father {
                    position: relative;
                    height: 200px;
                }
                
                .left {
                    position:absolute;
                    width: 200px;
                    height: 100%;
                    float: left;
                    background-color: blue;
                }
    
                .right {
                    position:absolute;
                    height: 100%;
                    left:200px;
                    right: 0;
                    background-color: red;
                }
    

    3.flex布局

                .father {
                    height: 300px;
                    width: 100%;
                    display: flex;
                }
    
                .left {
                    width: 300px;
                    height: 100%;
                    background-color: blue;
                }
    
                .right {
                    flex: 1;
                    height: 100%;
                    background-color: red;
                }
    

    三栏布局左右固定中自适应

    这与左中固定右边自适应,中右固定左边自适应,以及上下固定中间自适应是一个道理

    HTML部分

            <div class="father">
                <div class="left"></div>
                <div class="right"></div>
                <div class="main"> </div>
            </div>
    

    1.float布局

            .father{
                height: 50px;
                 div{
                    height: 100%;
                }
            }
    
            .left {
                width: 200px;
                float: left;
                background-color: red
            }
    
            .main {
                margin-left: 200px;
                margin-right: 200px;
                background-color: blue
            }
    
            .right {
                float: right;
                width: 200px;
                background-color: yellow
            }
    

    2.绝对定位

            .father{
                position: relative;
                height: 50px;
                  div{
                    position: absolute;
                    height: 100%;
                }
            }
    
            .left {
                left: 0;
                width: 200px;
                background-color: red
            }
    
            .main {
                left: 200px;
                right: 200px;
                background-color: blue
            }
    
            .right {
                right: 0;
                width: 200px;
                background-color: yellow
            }
    

    3.flex布局
    HTML部分

            <div class="father">
                <div class="left"></div>
                <div class="main"> </div>
                <div class="right"></div>
            </div>
    

    CSS部分

            .father {
                display: flex;
                height: 50px;
                 div{
                    height: 100%;
                }
            }
    
            .left {
                width: 200px;
                background-color: red
            }
    
            .main {
                flex: 1;
                background-color: blue
            }
    
            .right {
                width: 200px;
                background-color: yellow
            }
    

    总结

    这里列出的是一些我比较常用的方法,
    其他的像table布局,网格布局可以看阮一峰——网格布局教程
    想了解更多关于flex布局可以看阮一峰——Flex 布局教程

    如有不足之处,请指出。
    每天多一个掉头发技巧。
    谢谢您的观看。在这里插入图片描述

    更多相关内容
  • 高效学习CSS布局之道

    2017-11-26 22:31:56
    高效学习CSS布局之道:通过244个范例掌握网页样式与布局技术
  • div+css布局制作横向带箭头步骤流程样式 div+css布局制作横向带箭头步骤流程样式 div+css布局制作横向带箭头步骤流程样式
  • 圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应。接下来通过本文教程给大家介绍CSS布局之圣杯布局与双飞翼布局,感兴趣的朋友一起学习吧
  • css-adv 前端能力提升练习html/css布局实现技巧练习css 练习布局命名由css-前缀开头图片hover,1px公用边不对称的全宽背景平铺两列的经典布局(实现其中一列自适应?再优先加载?两列等高?)简单的tab切换,要压住...
  • 本章通过多个示例展示CSS布局网页的方法,并对CSS的“盒模型”作详细阐述。相信读者在深入理解“盒模型”后,布局网页、定位CSS网页元素将更加自如。 11.1 什么叫“Div+CSS” 上一章学习了Web标准的概念以及XHTML和...
  • CSS布局CSS布局研究

    2021-02-15 12:23:07
    CSS布局CSS布局研究
  • 本书共20章,主要内容包括网站...通过对不同布局的网站案例制作的讲解和分析,揭示网站制作的思路、方法和技巧。本书内容通俗易懂、简练精要,案例讲解全面详尽、由易到难、循序渐进,使读者最短时间内掌握DIV+CSS
  • DIV+CSS布局

    千次阅读 2021-10-17 11:29:06
    DIV+CSS布局

    目录

    一、简介

    二、div+CSS布局优势

    三、常见页面布局方式

    1、简单知识基础

    2、固定宽度布局

    3、自适应宽度布局


    一、简介

    DIV+CSS的网页标准化设计是web标准中的一种新的布局方式。在这种布局中,div承载的是内容,而CSS承载的是样式

    DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。

    CSS则提供对文档外观的更好更全面的控制,而且不干扰文档的内容。

    二、divCSS布局优势

    1、表现和内容分离,便于站点重构页面

    DIV+CSS模式具有比表格更大的优势,他将网页结构与内容相分离,代码简洁,利于搜索,方便后期维护和修改。

    2、结构清晰,对搜索引擎更加友好

    DIV+CSS构架的页面具备搜索引擎SEO的先天条件,配合优秀的内容和一些SEO处理,可以获得更好的网站排名。

    3、便于web项目开发分工协作

    DIV+CSS构架的表现和内容分离的特性使得程序员和页面设计者只要通过一定页面元素的约定便可进行各自擅长的程序控制和页面展示部分的开发,减少相互的关联性,大大提高了开发效率。

    三、常见页面布局方式

    1、简单知识基础

    ①CSS浮动(float)

    浮动框可以左右移动,直到它的外边缘碰到包含框或另一浮动框的边缘。

    浮动可以改变流布局,可以使多个div水平显示,有左浮动和右浮动。

    当元素浮动时,它将不再处于普通文档流中,相当于浮在文档之上,不占据空间,但是会缩短行框,产生文字环绕的效果。

    ②clear属性

    当属性设置float(浮动)时,它所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear来清除。如果要为浮动元素留出垂直空间,使其它的元素不在其两侧显示,可以对其周围的元素使用清理属性。

    clear的作用:如果div采用了float之后它所在的物理位置已经脱离文档流了,在该div后面的元素会占据它的水平位置,如果想让后面的元素重新另起一行,不受浮动的影响,那么就需要在后面的元素中加上float:both;就可以换一行了。

    注意:添加了clear属性的元素,通过自动增加空白边,达到留出垂直空间的效果,如下图,前者为加了clear属性的,后者未加。

    ③相对定位与绝对定位

    相对定位是相对于元素在普通文本流中的初始位置,以它所在普通流中的位置为初始点,可以通过设置垂直或水平位置,让这个元素”相对于“它的初始点进行移动。(position:relative)

    绝对定位使元素的位置与文档流无关,它的位置是相对于最近的父元素而言的。(position:absolute)

    2、固定宽度布局

    ①一列水平居中布局

    (盒子固定宽度高度)代码如下:

    <style>
    
        #one-center-col{
    
            width: 500px;
    
            height: 300px;
    
            background-color: chocolate;
    
            margin: 0 auto;
    
        }
    
    </style>
    
    <body>
    
        <div id="one-center-col"></div>
    
    </body>

    浏览器效果如下:

    ②两列布局

    两列布局可以使用float浮动的方式完成。

    代码如下:

    <style>
    
        #container{
    
            width: 800px;
    
            margin: 0 auto;
    
        }
    
        #left{
    
            width: 200px;
    
            height: 300px;
    
            background-color: dodgerblue;
    
            float: left;
    
        }
    
        #right{
    
            width: 500px;
    
            height: 300px;
    
            background-color: greenyellow;
    
            float: left;
    
        }
    
    </style>
    
    <body>
    
        <div id="container">
    
            <div id="left"></div>
    
            <div id="right"></div>
    
        </div>
    
    </body>

    浏览器效果如下:

    ③三列布局

    代码如下:

    <style>
    
        #container{
    
            width: 1000px;
    
            margin: 0 auto;
    
        }
    
        #left{
    
            width: 200px;
    
            height: 300px;
    
            background-color: dodgerblue;
    
            float: left;
    
        }
    
        #middle{
    
            width: 500px;
    
            height: 300px;
    
            background-color: hotpink;
    
            float: left;
    
        }
    
        #right{
    
            width: 300px;
    
            height: 300px;
    
            background-color: greenyellow;
    
            float: left;
    
        }
    
    </style>
    
    <body>
    
        <div id="container">
    
            <div id="left"></div>
    
            <div id="middle"></div>
    
            <div id="right"></div>
    
        </div>
    
    </body>

    浏览器效果如下:

    3、自适应宽度布局

    ①两列布局

    基本思路:

    利用浮动进行自适应布局(也可使用定位进行布局),左边盒子宽度固定,右边盒子的左外边距值设置为左边盒子的宽度即可。

    代码如下:

    <style>
    
        #container{
    
            width: 1000px;
    
            margin: 0 auto;
    
        }
    
        #left{
    
            width: 200px;
    
            height: 300px;
    
            background-color: dodgerblue;
    
            float: left;
    
        }
    
        #right{
    
            height: 300px;
    
            margin-left: 200px;
    
            background-color: greenyellow;
    
        }
    
    </style>
    
    <body>
    
        <div id="container">
    
            <div id="left"></div>
    
            <div id="right"></div>
    
        </div>
    
    </body>

    浏览器效果如下:

    ②三列布局

    基本思路:

    与两列自适应宽度布局原理相同,利用浮动进行自适应布局,中间列自适应(也可使用定位进行布局)

    代码如下:

    <style>
    
        #container{
    
            width: 1200px;
    
            margin: 0 auto;
    
        }
    
        #left{
    
            width: 200px;
    
            height: 300px;
    
            background-color: dodgerblue;
    
            float: left;
    
        }
    
        #middle{
    
            margin: 0 300px 0 200px;
    
            height: 300px;
    
            background-color: hotpink;
    
        }
    
        #right{
    
            width: 300px;
    
            height: 300px;
    
            background-color: greenyellow;
    
            float: right;
    
            margin-top: -300px;
    
        }
    
    </style>
    
    <body>
    
        <div id="container">
    
            <div id="left"></div>
    
            <div id="middle"></div>
    
            <div id="right"></div>
    
        </div>
    
    </body>

    浏览器效果如下:

    展开全文
  • CSS布局 文章目录CSS布局一、display二、标准三、浮动四、多列浮动布局1. 两列布局2. 三列布局3.浮动元素的特性五、清除浮动解决方法六、定位1. 边偏移2. 定位模式2.1、静态定位 static2.2、相对定位 relative2.3、...
  • div+css布局制作箭头步骤流程样式 - div+css教程 案例源码 志峰创业室提供技术支持微信公众平台开发,是移动互联网开发API供应商,是移动互联解决供应商
  • CSS布局篇——flex布局

    千次阅读 2021-08-31 10:44:34
    1.flex布局 布局的传统解决方案,基于盒模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以...

    1.flex布局

    布局的传统解决方案,基于盒模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

    2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

    Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

    任何一个容器都可以指定为 Flex 布局。

    2.flex布局属性

    容器属性

    • flex-flow

    • flex-direction

    • flex-wrap

    • justify-content

    • align-items

    • align-content

    元素属性

    • order

    • flex-grow

    • flex-shrink

    • flex-basis

    • flex

    • align-self

    3.flex弹性盒模型

    采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

    对于某个元素只要声明了display: flex;,那么这个元素就成为了弹性容器,具有flex弹性布局的特性。

     

    1. 每个弹性容器都有两根轴:主轴和交叉轴,两轴之间成90度关系。注意:水平的不一定就是主轴。

    2. 每根轴都有起点和终点,这对于元素的对齐非常重要。

    3. 弹性容器中的所有子元素称为<弹性元素>,弹性元素永远沿主轴排列

    4. 弹性元素也可以通过display:flex设置为另一个弹性容器,形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素

    弹性容器的两根轴非常重要,所有属性都是作用于轴的。

    3.1.主轴

    flex布局是一种一维布局模型,一次只能处理一个维度(一行或者一列)上的元素布局。

    也就是说,flex布局大部分的属性都是作用于主轴的,在交叉轴上很多时候只能被动地变化

    我们可以在弹性容器上通过flex-direction修改主轴的方向。如果主轴方向修改了,那么:

    1. 交叉轴就会相应地旋转90度。

    2. 弹性元素的排列方式也会发生改变,因为弹性元素永远沿主轴排列

    flex-direction属性

    取值:row(默认) | row-reverse | column | column-reverse

    用于控制项目排列方向与顺序,默认row,即横向排列,项目排列顺序为正序1-2-3;row-reverse同为横向排列,但项目顺序为倒序3-2-1。

    column 与row相反,为纵向排列,项目顺序为正序1-2-3,column-reverse同为纵向排列,项目顺序为倒序3-2-1。

     

    3.2.沿主轴的排列处理

    弹性元素永远沿主轴排列,那么如果主轴排不下,该如何处理?

    通过设置flex-wrap属性可使得主轴上的元素不换行、换行、反向换行。

    取值:nowrap(默认) | wrap | wrap-reverse

    用于控制项目是否换行,nowrap表示不换行;

    举个例子:比如容器宽度为300px,容器中有6个宽度为60px的元素,nowrap情况下,项目会强行等分容器宽度从而不换行,那么项目实际宽度也就只有50px了,而非我们自己设置的60px。

     

    wrap表示换行,即项目不会等分容器宽度,而是根据自身宽度进行排列,如果超出父容器宽度则自然换行。

     

    wrap-reverse同样表示换行,需要注意的是第一排会紧贴容器底部,而不是我们想象的项目6紧贴容器顶部,效果与wrap相反。

     

    3.3.flex-flow属性

    flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个。

    3.4.justify-content属性

    取值:flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

    用于控制项目在主轴的对齐方式,默认flex-start即左对齐,center 为居中,对应的flex-end为右对齐。

     

     

     

    space-between为左右两端对齐,即左右两侧项目都紧贴容器,且项目之间间距相等。

     

    space-around为项目之间间距为左右两侧项目到容器间距的2倍,比较特别的布局,日常使用不太多。

     

    space-evenly为项目之间间距与项目与容器间距相等,相当于除去项目宽度,平均分配了剩余宽度作为项目左右margin。

     

    3.5.align-items属性

    取值:flex-start | flex-end | center | baseline | stretch(默认)

    用于控制项目在交叉轴排列方式,默认stretch即如果项目没设置高度,或高度为auto,则占满整个容器,下面第一张图的项目没设置高度,其余均为50px。

     

    flex-start会让项目在交叉轴紧贴容器顶部,flex-end与之相反:

     

     

    center使用最多,自然不会陌生,在交叉轴中心位置排列:

     

    baseline比较特殊,它让项目以第一行文字的基线为参照进行排列:

     

    注意,常理来说justify-content与align-items默认分别处理项目主轴,交叉轴的对齐方式,但如果我们修改了flex-direction为column,它们处理的轴向会交换,也就是justify-content处理交叉轴,align-items处理主轴。

    想要使一个子元素垂直水平居中,只需要设置其父元素

    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */

    3.6.align-content

    取值:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

    用于控制多行项目的对齐方式,如果项目只有一行则不会起作用,需设置flex-wrap: wrap;默认stretch,即在项目没设置高度,或高度为auto情况下让项目填满整个容器,与align-items类似。注意,如下演示的12个项目均没有设置高度。

     

    flex-start ,center,flex-end 与align-items属性表现一致:

     

    space-around与justify-content保持一致,即项目之间间距为上下两端项目与容器间距两倍。

     

     

    space-evenly同理,项目之间间距与项目到容器之间间距相等,space-between为上下两侧项目紧贴容器。

    项目属性

    介绍完容器属性,简单介绍下项目属性。容器属性是加在容器上的,那么项目属性呢,就是写在项目上的,就好比容器属性给ul,项目属性给li差不多一个意思。

    3.8.order

    取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前。

    3.9.flex-grow

    取值:默认0,用于决定项目在有剩余空间的情况下是否放大,默认不放大;注意,即便设置了固定宽度,也会放大。

    假设默认三个项目中前两个个项目都是0,最后一个是1,最后的项目会占满剩余所有空间。

     

    假设只有第一个项目默认为0,后面两个项目flex-grow均为1,那么后两个项目平分剩余空间。

     

    假设第一个项目默认为0,第二个项目为flex-grow:2,最后一个项目为1,则第二个项目在放大时所占空间是最后项目的两倍。

     

    3.10.flex-shrink

    取值:默认1,用于决定项目在空间不足时是否缩小,默认项目都是1,即空间不足时大家一起等比缩小;注意,即便设置了固定宽度,也会缩小。

    但如果某个项目flex-shrink设置为0,则即便空间不够,自身也不缩小。

     

    上图中第二个项目flex-shrink为0,所以自身不会缩小。

    3.11.flex-basis

    取值:默认auto,用于设置项目宽度,默认auto时,项目会保持默认宽度,或者以width为自身的宽度,但如果设置了flex-basis,权重会比width属性高,因此会覆盖widtn属性。

     

    div{
      flex-basis: 80px;
      width: 60px;
      height: 50px;
      color: white;
    }

    上图中先设置了flex-basis属性,后设置了width属性,但宽度依旧以flex-basis属性为准。

    3.12.flex

    取值:默认0 1 auto,flex属性是flex-grow,flex-shrink与flex-basis三个属性的简写,用于定义项目放大,缩小与宽度。

    该属性有两个快捷键值,分别是auto(1 1 auto)等分放大缩小,与none(0 0 auto)不放大不缩小。

    还有最常用的flex:1 === flex: 1 1 0px

    3.13.align-self

    取值:auto(默认) | flex-start | flex-end | center | baseline | stretch,表示继承父容器的align-items属性。如果没父元素,则默认stretch。

    用于让个别项目拥有与其它项目不同的对齐方式,各值的表现与父容器的align-items属性完全一致。

     

    展开全文
  • Div+CSS布局的十六条技巧及详细用法-DivCSS教程.pdfDiv+CSS布局的十六条技巧及详细用法-DivCSS教程.pdfDiv+CSS布局的十六条技巧及详细用法-DivCSS教程.pdf
  • css 布局的几种方式

    万次阅读 多人点赞 2018-08-21 23:25:20
    前言 ...CSS布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局(早期),float 浮动布局和 flex 布局,还有针对于移动端的响应式布局,不论是工作还是面试都是非常重要的知识...

    前言

    CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局(早期),float 浮动布局和 flex 布局,还有针对于移动端的响应式布局,不论是工作还是面试都是非常重要的知识。

    1 table 布局

    table 布局是最简单的布局方式了,下面我们来看一个简单的例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 布局</title>
    </head>
    <style>
    .container{
        height:200px;
        width: 200px;
    }
    .left{
        background-color: red
    }
    .right{
        background-color: green
    }
    </style>
    <body>
        <table class=container>
            <tbody>
                <tr>
                    <td class=left></td>
                    <td class=right></td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

    效果如下
    图1
    table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式

    而且也加入了 display:table;dispaly:table-cell 来支持 teble 布局。用法如下

    <style>
    .table{
        display: table
    }
    .left{
        display: table-cell;
    }
    .right{
        display: table-cell
    }
    </style>
    
    <div class=table>
        <div class=left></div>
        <div class=right></div>
    </div>
    
    
    

    但是它也有自身的局限性,比如 table 比其它 html 标记占更多的字节(造成下载时间延迟,占用服务器更多流量资源),table 会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间),但是某些情况下,当采用其他方式不能很好的达到自己的效果时,采用 table 布局能适应当前场景。

    2 flex 布局

    2.1 盒模型

    在介绍 flex 布局之前,我们先了解一下盒模型的概念,这个是 css 最基础的概念,首先,我们引用一张图来解释
    盒模型
    这是百度百科里面盒模型的一张图。首先最中间的是 content 区域,即我们常说的内容区。我们通常设置的 height 和 width 就是设置的这部分的长度。内容区外部是 padding 区域,这部分指的是内容区到边框的区域,即我们常说的内边距。然后就是 border 区,border 区本身也是占据空间的。边框外面是 margin 区,这部分指的是当前元素与其他元素的距离,即常说的外边距。

    首先要明白我们平常说的宽度和高度指的是内容区的宽度和高度。

    然后计算一个盒子占用的空间是 content + padding + border + margin

    2.2 display / poistion

    这里还要介绍两个属性,display 和 poistion

    display 有如下几个值

    • block(元素表现为块级元素,有固定宽高,独占一行)
    • inline(元素表现为行内元素,不能设置宽高)
    • inline-block (对外表现为行内元素,对内表现为块级元素)3

    position 有如下几个值

    • static(默认情况,存在文档流当中)
    • relative(根据元素本身原来所应该处的位置偏移,不会改变布局的计算)
    • absolute(绝对定位,脱离文档流,不会对别的元素造成影响,相对的是父级最近的 relative 或者 absolute 定位元素)
    • fixed(绝对定位,脱离文档流,相对于的是屏幕,就是那些浮动的广告那样,怎么拉都固定在同一个位置,而 absolute 元素离开屏幕就看不见了)

    position 的层叠是按顺序层叠的,不过可以通过设置 z-index 来改变层叠顺序,只有 relative,absolute,fixed 可以设置 z-index。

    2.3 flexbox 布局

    flexbox 布局即弹性盒子布局,它的特点是盒子本来就是并列的,只需要指定宽度,来看一个经典的三栏布局的例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 布局</title>
    </head>
    <style>
    .container{
        height:200px;
        width: 200px;
        display: flex
    }
    .left{
        background-color: red; 
        flex: 1;
    }
    .middle{
        background-color: yellow; 
        flex: 1;    
    }
    .right{
        background-color: green;
        flex: 1;
    }
    </style>
    <body>
        <div class=container>
            <div class=left></div>
            <div class=middle></div>
            <div class=right></div>
        </div>
    </body>
    </html>

    效果如下
    这里写图片描述
    有时我们可能需要两边定宽,中间自适应,那么可以这样写

    .left{
        background-color: red; 
        width: 20px;
    }
    .middle{
        background-color: yellow; 
        flex: 1;    
    }
    .right{
        background-color: green;
        width: 20px;
    }

    效果如下
    这里写图片描述

    如果想深入了解可以看阮一峰老师的文章

    Flex 布局教程:语法篇
    flex布局案例

    但是 flexbox 布局方式浏览器的支持不是太好,有一些兼容性的问题,但是是未来布局的趋势。

    3 float 布局

    float 布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂,这里详细讲一下

    首先,什么是浮动?

    浮动元素是脱离文档流的,但不脱离文本流,这是什么意思呢,用过 word 的应该知道有一种图片环绕的方式是文字环绕吧,就是这种效果。

    那么它有什么特点呢

    • 对自身的影响
      • float 元素可以形成块,如 span 元素。可以让行内元素也拥有宽和高,因为块级元素具有宽高
      • 浮动元素的位置尽量靠上
      • 尽量靠左(float:left)或右(float:right),如果那一行满足不了浮动元素的宽度要求,则元素会往下掉
    • 对兄弟元素的影响
      • 不影响其他块级元素的位置
      • 影响其他块级元素的文本
      • 上面贴非 float 元素
      • 旁边贴 float 元素或者边框
    • 对父级元素的影响
      • 从布局上 “消失”
      • 高度塌陷

    3.1 高度塌陷

    什么是高度塌陷,举个例子吧

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 布局</title>
    </head>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 200px;
        background-color:red;
    }
    
    .left{
        background-color: yellow; 
        float: left;
        height: 50px;
        width:50px;
    }
    .right{
        background-color: yellow; 
        float: right;
        height: 50px;
        width:50px;
    }
    </style>
    <body>
        <div class=container>       
            <span class=left>float</span>
            <span>我是字</span>
            <span class=right>float</span>
        </div>
        <div class="container" style="height: 200px;background: blue">      
        </div>
    </body>
    </html>

    效果如下
    高度塌陷
    从图中可以看出,两个 float 元素虽然包含在第一个 container 中,但是却超出了第一个 container 的范围,在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。
    但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

    解决办法有下面几种

    • 父元素设置 overflow: auto 或者 overflow: hidden

      效果如下
      这里写图片描述

    • 给父元素加一个 after 伪类

        .container::after{
            content:'';
            clear:both;
            display:block;
            visibility:hidden;
            height:0; 
        }

    效果如下
    这里写图片描述
    这也是目前各大网站比较主流的清除浮动的方式,还有一些其他方式这里就不详细讲了,毕竟这是一篇讲布局的文章。

    3.2 两栏布局

    首先我们要明白为什么可以用 float 实现布局。其实上面的例子我们大概就可以看出来了,黄红黄这不就是一个标准的三栏布局吗。其实并没有,我们看看下面的例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 布局</title>
    </head>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 400px;
        height: 200px;
    }
    
    .left{
        background-color: yellow; 
        float: left;
        height: 100%;
        width:100px;
    }
    .right{
        background-color: red; 
        margin-left: 100px;
        height:100%;
    }
    .container::after{
        content: '';
        display: block;
        visibility: hidden;
        clear: both
    }
    
    </style>
    <body>
        <div class=container>       
            <div class=left></div>
            <div class=right></div>
        </div>
    </body>
    </html>

    效果如下
    这里写图片描述
    上面代码中最重要的是 margin-left: 100px;,这一句将浮动元素的位置空了出来,所以右边栏里面的元素不会影响到浮动的 div。

    这就是浮动布局的基本思想。

    3.3 三栏布局

    讲完两栏布局再讲一下三栏布局,思路主要是左边一个浮动元素,右边一个浮动元素。这里有个小问题,中间的元素要写在最后,因为中间元素假设有块级元素的话,会影响右边浮动元素的定位,这里演示一下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS 布局</title>
    </head>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 400px;
        height: 200px;
    }
    
    .left{
        background-color: yellow; 
        float: left;
        height: 100%;
        width:100px;
    }
    .right{
        background-color: green; 
        float: right;
        height: 100%;
        width:100px;
    }
    .middle{
        background-color: red; 
        margin-left: 100px;
        margin-right: 100px;
        height:100%;
    }
    .container::after{
        content: '';
        display: block;
        visibility: hidden;
        clear: both
    }
    
    </style>
    <body>
        <div class=container>       
            <div class=left></div>
            <div class="middle"></div>
            <div class=right></div>
        </div>
    </body>
    </html>

    这里写图片描述

    因为浮动元素会把块级元素的位置空出来,所以这里右边的浮动元素把上面的位置空了下来,所以正确的写法应该是

    <div class=container>       
            <div class=left></div>
            <div class=right></div>
            <div class="middle"></div>
    </div>

    效果如下
    这里写图片描述
    这样我们就实现了最基本的三栏布局

    4 响应式布局

    4.1 meta 标签

    最简单的处理方式是加上一个 meta 标签

    <meta name="viewport" content="width=device-width, initial-scale=1">

    其中,width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。

    4.2 使用 rem

    rem 指的是 html 元素的 font-size,html 元素的 font-size 默认是 16px,所以 1 rem = 16px;然后根据 rem 来计算各个元素的宽高,然后配合 media query 就可以实现自适应。

    4.3 media query

    css2 允许用户根据特定的 media 类型定制样式,基本语法如下

    @media screen and (max-width: 360px) {  
         html { font-size: 12px;    }
    }

    意思就是: 当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px。

    有一个需要注意的点是范围大的要放在上面,范围小的放在下面。假设有两个样式,一个适应 360px 以下,一个适应 640px 以下,如果 360px 的放在上面,但是小于 360px 同样满足小于 640px,这就不是我们想要的结果了,所以范围大的需要放在上面。

    5 总结

    这里只是简单的介绍了一下 css 的各种布局,如果想深入了解的话建议多看看相关的文章,比如浮动布局还包括圣杯布局,双飞翼布局等,本文只是 css 布局的基本入门,并不能真正满足一些需求,所以如果想深入了解的话还是需要多看看相关的文章、

    展开全文
  • 常见的CSS布局

    2016-11-14 12:55:53
    常见的基本CSS布局
  • html5新标签使用header、footer、nav、section布局css设定及使用方法
  • CSS网站布局实录

    2018-07-10 13:34:37
    内容很实际,如果你做过网页的话,会发现很多你想了很久但做不出来的东西,或者你做出来了,但他告诉你更简单的方法最主要的是你不仅会知道做,还知道原理。
  • 虽然jb51.net一直建议大家不用Dreamweaver可视化编辑的方式进行CSS网页布局,但依然很多朋友在使用。...今天向大家介绍Dreamweaver CS3网页制作中的CSS布局规则 。 CSS文件的链接方式 ·附加链接:外部CSS文件
  • 全国“创新杯”计算机类说课大赛一等奖作品:《DIV+CSS布局网页》教学设计方案.docx全国“创新杯”计算机类说课大赛一等奖作品:《DIV+CSS布局网页》教学设计方案.docx全国“创新杯”计算机类说课大赛一等奖作品:...
  • DIV+CSS布局:网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称 网页布局目的和思想 目的:使页面结构清晰、有条理、易读 思想: 确定"版心":页面主体内容所在位置 (通常在页面中水平居中) 分析...
  • 高效学习CSS布局之道244个范例代码

    热门讨论 2012-11-29 21:22:20
    此为《高效学习CSS布局之道——通过244个范例掌握网页样式与布局技术》一书的配套光盘,读者可自由取其示例文件做学习、研究之用。  CSS控制元素的大小;  CSS控制元素的定位;  CSS控制元素的布局;  CSS...
  • CSS那些事儿:掌握网页样式与CSS布局核心技术
  • HTML+CSS布局教程

    2019-03-06 16:57:52
    HTML+CSS布局本教程主要描述如何通过CSS来大大提升网页开发的工作效率!在我们的 CSS 教程中,您会学到如何使用 CSS 同时控制多重网页的样式和布局。 本 CSS 教程包含了数百个CSS在线实例,通过本站的在线编辑器,...
  • 网页设计(二)——DIV+CSS布局1

    千次阅读 多人点赞 2020-07-11 14:38:02
    前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者。...DIV+CSS布局 DIV+CSS布局概念 DIV+CSS布局方式并不是一种新的语言或者体系,它就是html语言中的一部分。 简单来说就是把标签中的样式...
  • css网站布局实录-2

    2018-12-15 11:38:21
    第二版书籍,一些布局,盒模型,圆角实现,一些兼容性
  • CSS 布局经典问题初步整理

    千次阅读 2017-05-19 00:10:25
    本文主要对 CSS 布局中常见的经典问题进行简单说明,并提供相关解决方案的参考链接,涉及到三栏式布局,负 margin,清除浮动,居中布局,响应式设计,Flexbox 布局,等等。
  • 几种常见的 CSS 布局

    万次阅读 多人点赞 2018-11-14 20:30:00
    (给前端大全加星标,提升前端技能)作者:浪里行舟 (本文来自作者投稿,简介见末尾)本文概要本文将介绍如下几种常见的布局:单列布局两列自适应布局圣飞布局和双飞翼布局伪等高布...
  • DIV+CSS布局基本流程及实例介绍

    千次阅读 2020-02-24 14:51:16
    都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称。DIV+CSS布局是现在非常流行的布局方法,替代了...
  • css布局的三种机制

    千次阅读 2020-09-14 10:50:07
    css布局的三种机制 网页布局的核心——就是用CSS来摆放盒子。 CSS提供了3种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中: 普通流(标准流) 块级元素会独占一行,从上向下顺序排列; ■常用...
  • CSS布局大全-案例

    千次阅读 2020-12-10 09:13:27
    CSS布局大全 前几天面试,问我某布局感觉回答不是很OK所以研究了一下各种布局。 一、单列布局 1.普通布局(头部、内容、底部) <div class="container"> <header></header> <div ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 370,334
精华内容 148,133
关键字:

css布局