精华内容
下载资源
问答
  • CSS网站布局实录:基于Web标准的网站设计指南(第2...),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部]
  • 网页制作Webjx文章简介:CSS网页布局的宗旨是语义化具有良好结构的HTML文档,将外观表现分离到CSS文件,这是webjx.com一直强调的页面开发思维。 CSS网页布局的宗旨是语义化具有良好结构的HTML文档,将外观表现分离...
  • 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布局 CSS布局研究
  • DIV+CSS精美布局模板

    2015-10-14 17:20:35
    内含50套DIV+CSS 精美布局模板,简单修改便可以变成属于自己的网页,也可以作为布局设计的参考使用。
  • 本文从CSS3的布局(CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介)Header布局的实现(float实现布局、Header js的实现)向我们展示了HTML5与CSS3的魅力。
  • CSS常见的几种布局方式

    千次阅读 2019-12-09 02:34:05
    在看前端面试题的时候经常会看到css布局方式,今天整理一下分享给大家。 #单列布局 #两列自适应布局 #三栏布局(圣杯布局和双飞翼布局) 一、单列布局 常见的单列布局有两种: header、content、footer等宽的...

    在看前端面试题的时候经常会看到css的布局方式,今天整理一下分享给大家。

    #单列布局
    #两列自适应布局
    #三栏布局(圣杯布局和双飞翼布局)

    一、单列布局
    常见的单列布局有两种:

    • header、content、footer等宽的单列布局
      单列布局
      实现:
      对header、content、footer都用width或者max-width设置同样的宽度(当屏幕小于设置的宽度时,前者会出现滚动条,后者显示的是屏幕的实际宽度),然后再用margin:0 auto;实现水平居中。
      html部分:
      单列布局html
      css部分:
      在这里插入图片描述

    • header、footer占满屏幕宽度,content略窄的单列布局
      在这里插入图片描述
      实现:
      对header、footer不设置宽度,块级元素会占满屏幕宽度,对content用width或者max-width设置同样的宽度(区别同上),然后再用margin:0 auto;实现水平居中。
      html部分同上
      css部分:
      在这里插入图片描述
      二、两列自适应布局
      两列自适应布局是指一列由内容宽度撑开,剩余的一列由撑满屏幕剩余宽度的布局方式。
      在这里插入图片描述

    • 使用float+overflow:hidden实现
      自适应的两列布局主要是通过overflow:hidden触发BFC(格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。)来实现,BFC其中一个特性就是不重叠浮动元素。
      html部分:
      在这里插入图片描述
      css部分:
      在这里插入图片描述

    • 使用flex布局实现
      flex布局也叫弹性盒子布局,可以很方便的实现布局方式,缺点是不兼容IE10以下的。
      html部分同上。
      css部分:
      在这里插入图片描述
      flex是flex-grow(定义项目的方法比例)、flex-shrink(定义项目的缩写比例)、flex-basis(定义了在分配多余空间前,项目占据的主轴空间)的缩写,flex:1相当于flex-grow:1;flex-shrink:1;flex-basis:0;

    • 使用grid布局实现
      grid布局,是一个基于网格的二维布局系统,用来优化用户界面设计。
      html部分同上。
      css部分:
      在这里插入图片描述
      三、三栏布局

      三栏布局是指两侧栏目固定宽度,中间栏目自适应宽度。本文主要介绍圣杯布局和双飞翼布局。

    • 圣杯布局
      特点:dom结构必须先写中间列部分,这样中间列可以优先加载。
      html部分:
      在这里插入图片描述
      css实现步骤:
      1、将三个列部分都设置为左浮动,将中间列的宽度设置为100%,这样可以实现中间自适应,这时候,left和right会被挤到下一行。
      在这里插入图片描述在这里插入图片描述
      2、将left与right都设置margin-left的值为负值,这样可以使left与right回到与center同一行。
      在这里插入图片描述
      3、设置父元素container的padding-left与padding-right,为left列部分和right列部分腾出空间。
      在这里插入图片描述
      4、设置left列部分的和right列部分为相对定位,设置它们的left与right属性。
      在这里插入图片描述
      完整css代码:
      在这里插入图片描述
      缺点
      有一个最小宽度,当页面小于最小宽度时布局就会乱掉。所以最好给body设置一个min-width。这个min-width肯定不能是试出来的,怎么计算呢?就是left-width * 2 + right-width,至于为什么,简单的说就是:“由于设置了相对定位,所以当left原来的位置和right的位置产生重叠时,由于浮动的原因一行放不下就会换行”。所以布局就被打乱了。使用双飞翼布局就可以避免这个问题。

    • 双飞翼布局
      与圣杯布局差不多,不过双飞翼布局改变了一下DOM文档结构。
      html部分:
      在这里插入图片描述
      css实现步骤:
      1、设置left、right、center的float为left,再将center的width设置为100%。
      2、设置left的margin-left为-100%,设置right的margin-left为它宽度的负值。
      3、设置center里面的inner的margin属性值。
      完整css代码:
      在这里插入图片描述
      效果:
      在这里插入图片描述
      两种三栏布局的对比:
      1、两种布局都把主流文档放在最前面,使主列优先加载。
      2、双飞翼布局比圣杯布局少了一个relative定位,css结构更加简单。但是圣杯的html布局可能更加地一步了然。
      3、两种布局都是左右定宽,中间宽度自适应的布局结构,都用到了margin-left负值进行定位。

    还有一些其他的css布局方式再继续探索趴~还有头发可以掉,加油!

    展开全文
  • 高效学习CSS布局之道

    2017-11-26 22:31:56
    高效学习CSS布局之道:通过244个范例掌握网页样式与布局技术
  • CSS网站布局实录 (第二版)PDF版

    热门讨论 2012-12-10 18:46:01
    ),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准应用之先驱——闪客帝国... [显示全部] 《CSS网站布局实录:基于Web标准的网站设计指南...
  • 布局之美~~40个CSS布局源码,内含40个css布局案例,掌握了这40个案例css基本没什么问题了
  • css的3种布局方式

    千次阅读 2019-07-27 20:01:24
    无意发现了一个巨牛的人工智能教程,忍不住分享一下给大家。教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家。点这里可以跳转到教程。 1.文档流布局方式,这是最基本...

    无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家。教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家。点这里可以跳转到教程

     

    1.文档流布局方式,这是最基本的布局方式,就是按照文档顺序一个一个地显示,块元素独占一行,内联元素共享一行。

    2.浮动布局方式,某个元素浮动之后,其后面的元素就当其不存在而占用其原来的地方,按照原来文档流布局方式布局。

    可以通过清除(左或右)浮动清除掉浮动元素对后面的影响(clear)。可以向左向右浮动,在左边或者右边离其父元素的

    左边或者右边父元素的padding距离。浮动布局的经典就是列表横排。

        浮动元素对父元素的影响:如果父元素没有设置高度,其高度不会自动增加。清除浮动的三种方法:

         1.W3C推荐,在父元素的末尾添加一个clear:both的空元素,强迫父元素增加高度以容纳所有浮动的元素。

         2.最简单的,使用overflow:hidden,但是对于子元素通过position定位的不起作用。

              overflow:默认visible,既不剪切也不滚动;auto,自动;hidden,隐藏多余部分;scroll:滚动。

         3.利用伪对象after。

    3.定位布局方式,通过position属性定位。

        static:默认的

        absolute:绝对定位,对象从文档流中分离出来(别人当你不存在),通过设置left、right、top、bottom相对于父元素进行绝对定位

             没有父元素就是body。使用absolute必须具备两个条件:1:父元素使用position定位了,一般relative;

              2,:子元素absolute及方向距离。就是保证父亲是使用了position定位。

             这样一来的话就能推出要使用absolute,那么这个元素的直系父亲都是用position。(使用realative不是)。

        relative:相对定位,对象还在原来的文档流中(还占原来的空间),通过设置left、right、top、bottom相对于自己原来应该的位置进行相对定位。

     

     

     

     

    CSSPosition详解

    CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构,以及定位。正如positioniseverything,本文将主要讲述关于position的理解,力求让您看完本文后对position有着最全面的认识。

    position的四个属性值:

    1.   relative

    2.   absolute

    3.   fixed

    4.   static

    下面分别讲述这四个属性。

    <div id="parent">
         <div id="sub1">sub1</div>
         <div id="sub2">sub2</div>
    </div>


    1. relative

    relative属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同级关系,如果设定sub1一个relative属性,比如设置如下CSS代码:

    #sub1
    {
        position: relative;
        padding: 5px;
        top: 5px;
        left: 5px;
    }


    我们可以这样理解,如果不设置relative属性,sub1的位置按照正常的文档流,它应该处于某个位置。但当设置sub1为的position为relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移,relative的“相对的”意思也正体现于此。

    对于此,您只需要记住,sub1如果不设置relative时它应该在哪里,一旦设置后就按照它理应在的位置进行偏移。

    随后的问题是,sub2的位置又在哪里呢?答案是它原来在哪里,现在就在哪里,它的位置不会因为sub1增加了position的属性而发生改变。

    如果此时把sub2的position也设置为relative,会发生什么现象?此时依然和sub1一样,按照它原来应有的位置进行偏移。

    注意relative的偏移是基于对象的margin的左上侧的。

    2. absolute

    这个属性总是有人给出误导。说当position属性设为absolute后,总是按照浏览器窗口来进行定位的,这其实是错误的。实际上,这是fixed属性的特点。

    当sub1的position设置为absolute后,其到底以谁为对象进行偏移呢?这里分为两种情况:

    (1)当sub1的父对象(或曾祖父,只要是父级对象)parent也设置了position属性,且position的属性值为absolute或者relative时,也就是说,不是默认值的情况,此时sub1按照这个parent来进行定位。

    注意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以parent的哪个定位点来进行定位呢?如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位,这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。

    接下来的问题是,sub2的位置到哪里去了呢?由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于parent一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,它的文档流不再基于 sub1,而是直接从parent开始。

    (2)如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。

    3. fixed

    fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。

    4. static

    position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。

     

     

    展开全文
  • CSS布局方法 通过上一章的学习,读者了解到了CSS强大的表现控制功能,特别是在布局方面有很大的优势。相对于代码条理混乱、样式杂糅在结构的表格布局,CSS将带来全新的布局方法,让网页设计师更轻松、更自由。本章...
  • css常见布局

    千次阅读 2018-01-04 23:01:56
    1.两列布局 两列布局是一侧固定,另一侧自适应。一般一个浮动,另一个设置margin,或者一个绝对定位,另一个设置margin,代码如下(浮动方法) style> .left{ float: left; width: 200px; background: ...

    基础版

    1.两列布局

      两列布局是一侧固定,另一侧自适应。一般一个浮动,另一个设置margin,或者一个绝对定位,另一个设置margin,代码如下(浮动方法)

    <style>
      .left{
         float: left;
         width: 200px;
         background: green;
         height: 200px;
      }
      .right{
          margin-left:200px;
          background: red;
          height: 200px;
      }
    </style>
    <body>
    <div class="left">左边左边左边左边左边左边</div>
    
    <div class="right">右边右边右边右边右边右边</div>
    </body>
    

    效果如下:
    这里写图片描述

    2.三列布局

      三列布局特点是其中两列宽度固定,剩下一个自适应,方法是两个浮动自适应那个设置margin,比如左右固定,中间自适应可以左右分别设置float为left,right,然后中间那个设置margin left right分别为左右两栏宽度。代码如下

    <style>
        .left{
            float: left;
            width: 200px;
            background: green;
            height: 200px;
        }
        .center{
            margin: 0 300px 0 200px;
            background: yellow;
            height: 200px;
        }
        .right{
            float: right;
            width:300px;
            background: red;
            height: 200px;
        }
        </style>
    <body>
    <div class="left">左边左边左边左边左边左边</div>
    
    <div class="right">右边右边右边右边右边右边</div>
    
    <div class="center">中间中间中间中间中间中间</div>
    </body>
    

    效果如下:
    这里写图片描述
    其他三列布局思路和这个差不多,注意文档顺序即可。或者将浮动换成绝对定位,这样不需要注意文档顺序。

    进阶版

    1.两列布局
      还是那个效果,这次改用flex布局来写,代码如下:

    <style>
        body{
            display: flex;
            justify-content: flex-end;
        }
        .left{
            flex: 1;
            background: green;
            height: 200px;
        }
        .right{
            width:300px;
            background: red;
            height: 200px;
        }
        </style>
    <body>
    <div class="left">自适应自适应自适应自适应</div>
    
    <div class="right">固定固定固定固定固定固定</div>
    </body>
    

    效果如下:
    这里写图片描述
      对父元素设置flex布局主轴右对齐,有点类似文本的右对齐,这里为了让左边自动填充满屏幕,设置了一个flex
    2.三列布局
    不多说,代码如下:

    <style>
        body{
            display: flex;
            justify-content: space-between;
        }
        .left{
            width:200px;
            background: green;
            height: 200px;
        }
    
        .right{
            width:100px;
            background: red;
            height: 200px;
        }
        .center{
             flex: 1;
             background: yellow;
             height: 200px;
         }
        </style>
    <body>
    <div class="left">固定固定固定固定固定固定</div>
    
    <div class="center">自适应自适应自适应自适应</div>
    
    <div class="right">固定固定固定固定固定固定</div>
    </body>
    

    效果如下:
    这里写图片描述

    存在于面试中的版本

    1.圣杯布局
      特点是有个头部底部,中间是主要内容区,主要内容区又分成左中右三块,其中中间是最主要内容区,思路是朝一个方向浮动,再用负margin把挤下去的两侧给拉上来再设置相对定位,为了避免中间里面内容被拉上来的挡住再对中间内容设置padding。代码如下:

    <style>
       header{
           background: cadetblue;
       }
       footer{
           background: antiquewhite;
       }
       .center{
           width: 100%;
           background: coral;
    
       }
       .main{
            float: left;
            width: 100%;
            background: yellow;
            height: 200px;
        }
       .main p{
           padding: 0 100px 0 200px;
       }
        .left{
            float: left;
            margin-left: -100%;
            width:200px;
            position: relative;
            left: 0;
            background: green;
            height: 200px;
        }
        .right{
            float: left;
            margin-left: -100px;
            width:100px;
            position: relative;
            right: 100px;
            background: red;
            height: 200px;
        }
        </style>
    <body>
    <header>我是头部</header>
    
    <div class="center">
        <div class="main"><p>我最重要</p></div>
        <div class="left">左边边</div>
        <div class="right">右边边</div>
    </div>
    
    <footer>我是底部</footer>
    </body>
    

    效果如下:
    这里写图片描述

    2.双飞翼布局
      与圣杯布局类似,只是在中间内容区加了个父元素,这样可以省略对左右栏设置相对定位。代码如下:

    <style>
        header{
            background: cadetblue;
        }
        footer{
            background: antiquewhite;
        }
        .center{
            width: 100%;
            background: coral;
    
        }
        .main-father{
            width: 100%;
            float: left;
            background: blueviolet;
        }
        .main{
            padding: 0 100px 0 200px;
            background: yellow;
            height: 200px;
        }
        .left{
            float: left;
            margin-left: -100%;
            width:200px;
            background: green;
            height: 200px;
        }
        .right{
            float: left;
            margin-left: -100px;
            width:100px;
            background: red;
            height: 200px;
        }
    </style>
    <body>
    <header>我是头部</header>
    
    <div class="center">
        <div class="main-father">
            <div class="main">我最重要</div>
        </div>
        <div class="left">左边边</div>
        <div class="right">右边边</div>
    </div>
    
    <footer>我是底部</footer>
    </body>
    

    效果如下:
    这里写图片描述

    展开全文
  • css3 弹性布局瀑布流
  • CSS中的流式布局,浮动布局,层布局,flex布局 文章目录CSS中的流式布局,浮动布局,层布局,flex布局1. 流式布局2. 浮动布局2.1浮动的特点2.2 元素浮动会造成影响(清除浮动)3. 层布局4. flex布局4.1 容器相关的...
  • 主要为大家介绍了CSS实现左图右文混排布局的方法,涉及css图文混排布局的相关技巧,非常简单实用,需要的朋友可以参考下
  • css 粘性布局

    千次阅读 2020-10-31 16:54:37
    一、粘性布局 position: sticky 配合 [left, right, top, bottom] 中一个即可实现粘性布局 二、坑 粘性布局只在其父元素空间内生效,且要实现 “粘性” 效果,对...(2)父元素不能设置 overflow: hidden 或 overf
  • 重新设计网站以使用Ilya Bodrov的CSS网格布局 由Giulio Mainardi用CSS Grid重新设计基于卡的Tumblr布局 ...Diogo Souza逐步增强从浮动到Flexbox到网格的CSS布局 Craig Buckler用CSS Grid制作好的表格
  • CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局 要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件使用: @media 类型 and ...
  • 简单HTML5+CSS3页面布局

    2016-01-22 17:30:03
    自己写的一个简单HTML5+CSS3页面布局,适合新手学习,MIchael学院
  • 1、固定宽度CSS版式布局 2、自适应(弹性)宽度CSS版式布局 3、标准布局常见问题及解决办法 像素问题及解决办法 上边容器浮动后,下边的容器跟着浮动,造成页面错乱 当子元素浮动且未知高度时,怎么使父容器适应子...
  • DIV+CSS网页布局实例

    万次阅读 多人点赞 2019-03-16 21:07:57
    说明:非常基础的IDV+CSS,实现了一般网站布局CSS样式也比较基础,一些像定位等属性都没有使用。 二、代码实现 1、主体结构 (1)标签结构 (2)容器样式 2、头部 (1)头部标签 (2)头部样式、 ...
  • css3实现横向瀑布流布局,让图片看起来更美观。
  • CSSCSS经典布局之绝对底部布局

    千次阅读 2018-01-09 11:48:23
    转载自:CSS经典布局之Sticky footer布局 何为Sticky footer布局?  我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分。当页头区和内容区的内容较少时,页脚区...
  • css垂直布局

    千次阅读 2019-07-02 16:32:28
    垂直布局 *{ margin: 0; padding: 0; } html{height:100%} body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";background: #ffffff;} #list { width: 100%; height: 100%; display: -ms...
  • css布局

    千次阅读 2019-09-12 08:22:24
    css上下左右布局 样式如下: <!DOCTYPE html> <html> <header> <title>上布局</title> <style> html,body{height:100%;width:100%;margin:0;padding:0;overflow: ...
  • div+css网站布局案例精粹(第2版)50个案例赠送,书30个案例在另一资源文件,因只能上传60MB文件,所以分开传。
  • css相对布局和绝对布局的案例

    万次阅读 2018-10-31 10:41:20
    今天学习了一下css,感觉要记录一下常见案例。 简单的商品展示布局,如图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset=&...
  • 在传统表格式布局中,之所以能够进行页面的排版布局设计,完全依赖于表格对象table。如今,接触另一种布局方式——CSS布局。div正是这种布局方式的核心对象。仅从div的使用上说,做一个简单的布局只需要依赖两样东西...
  • 文章目录什么是黏连布局css sticky footer)方法一:footer 上用负的 margin-top方法二:负margin-bottom方法三:flex布局 什么是黏连布局css sticky footer) 当main的高度足够长的时候,紧跟在<\main...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 301,943
精华内容 120,777
关键字:

css中的布局