精华内容
下载资源
问答
  • 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...
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>垂直布局</title>
      <style>
        *{
          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-flexbox;
          display: flex;
          display: -webkit-flex;
          -ms-flex-direction: column;
          flex-direction: column;
          background-color: #f4f4f4;
          position: relative;
        }
        header {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 44px;
          display: flex;
          background:rgba(255,255,255,1);
          box-shadow:0px 1px 1px 0px rgba(0,0,0,0.12);
          display: -ms-flexbox;
          display: flex;
          display: -webkit-flex;
          background-color: #fff;
        }
        footer {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 44px;
          display: flex;
          background:rgba(255,255,255,1);
          box-shadow:0px 1px 1px 0px rgba(0,0,0,0.12);
          display: -ms-flexbox;
          display: flex;
          display: -webkit-flex;
          background-color: #fff;
        }
        .content {
          position: fixed;
          top: 44px;
          left: 0;
          width: 100%;
          height: 100%;
          display: -ms-flexbox;
          display: flex;
          display: -webkit-flex;
          -ms-flex-direction: row;
          flex-direction: row;
        }
        aside {
          width: 20%;
          background: blue;
        }
        section {
          width: 80%;
          background: red;
        }
      </style>
    </head>
    <body>
      <div id="list">
        <header>
          1
        </header>
        <div class="content">
          <aside>2</aside>
          <section>3</section>
        </div>
        <footer>4</footer>
      </div>
    </body>
    </html>

    图

     

    展开全文
  • 上篇文章说到常见css布局水平居中的方法,前端开发css布局还有垂直居中,也是很常见的布局方法,本文分享3种垂直居中布局的方法,table-cell + vertical-align、absolute + transform、flex + align-items,很常见,...

       上篇文章说到常见css布局水平居中的方法,前端开发css布局还有垂直居中,也是很常见的布局方法,本文分享3种垂直居中布局的方法,table-cell + vertical-align、absolute + transform、flex + align-items,很常见,很实用。

    3种垂直居中布局的方法

    垂直居中布局方法一:table-cell + vertical-align

    1

    2

    3

    4

    5

    6

    7

    8

    9

    <div class="parent">

         <div class="child">Demo</div>

    </div>

    <style type="text/css">

      .parent {

        display: table-cell;

        vertical-align: middle;

      }

    </style>

            说明:兼容性好(IE 8以下版本需要调整页面结构至 table)

    垂直居中布局方法二:absolute + transform

           强大的absolute对于这种小问题当然也是很简单的

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    <div class="parent">

         <div class="child">Demo</div>

    </div>

    <style type="text/css">

      .parent {

        position: relative;

      }

      .child {

        position: absolute;

        top: 50%;

        transform: translateY(-50%);

      }

    </style>

          说明:

              1.绝对定位脱离文档流,不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。

              2.transform为 CSS3 属性,有兼容性问题

             3.同水平居中,这也可以用margin-top实现,原理水平居中

    垂直居中布局方法三:flex + align-items

           如果说absolute强大,那flex只是笑笑,因为,他才是最强的。。。但它有兼容问题

    1

    2

    3

    4

    5

    6

    7

    8

    9

    <div class="parent">

         <div class="child">Demo</div>

    </div>

    <style type="text/css">

      .parent {

        display: flex;

        align-items: center;

      }

    </style>

     


    原文地址:http://tangjiusheng.com/divcss/177.html

    展开全文
  • 常见css垂直自适应布局(css解决方法)

    常见css垂直自适应布局(css解决方法)

    参考文章:

    (1)常见css垂直自适应布局(css解决方法)

    (2)https://www.cnblogs.com/qingkong/p/4448945.html


    备忘一下。


    展开全文
  • css水平布局与垂直布局

    千次阅读 2020-03-22 11:10:49
    水平布局 盒子模型水平方向的布局 宽度为父类的全部宽度 水平方向盒子由以下几个自属性构成: 外边距左 + 边框左 + 内边距左 + 内容 + 内边距右 + 边框右 + 外边距右 = 父类全部宽度 当上面等式不不足时,则称为:...
  • CSS垂直方向布局

    2020-07-07 17:53:44
    垂直方向布局比较简单… overflow是在父元素当中设置的。。。
  • 盒子的垂直布局: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子的垂直布局</title> <style> .outer{ background-color: #...
  • 垂直居中布局解决方案HTML结构如下 <div class="child">demo </div>1. table-cell + vertical-align.parent { display: table-cell; vertical-align: middle; } 优点:兼容性很好,兼容至IE6(*zoom) 2. a
  • CSS 水平/垂直布局css 样式

    千次阅读 2018-06-07 16:39:34
    地址 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • 简介 CSS布局可以分为几大块, 盒子内部布局 ·文本布局 ...·盒模型本身的布局盒子之间的布局 ...·脱离正常流的布局 ...·absolute布局上下文下的...css grid布局上下文下的布局 具体内容 一、文本的水平垂直居中
  • CSS flex布局使div上下左右垂直居中

    千次阅读 2019-03-13 16:22:23
    CSS flex布局使div上下左右垂直居中 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案...
  • css垂直水平居中(三栏布局合集)

    万次阅读 2020-05-31 17:58:24
    记录下,因为入职早的原因在公司面过别人,总结下前端面试的问题吧,供大家以后面试做参考(我自己出的相对使用框架,基础多一些,也添加下别人) css 三栏布局问题(左右固定宽度 中间自适应) loat + margin(浮动...
  • CSS实现垂直居中布局

    千次阅读 2020-02-28 11:03:43
    垂直居中 首先将<html>与<body>的高度设置为100%(为演示父元素不定宽高的效果),并清除<body>的默认样式 html,body{ margin: 0; height: 100%; } 垂直居中大致分为两类,父元素定宽高与父...
  • css-水平和垂直布局

    千次阅读 2016-04-02 17:06:19
    水平布局2.1 盒子模型理解水平布局父元素width=子元素margin-left+border-left+padding-left+width+padding-right+border-right+margin-right;2.2 行内元素实现水平居中text-align="center";2.3 使
  • 原来一直使用flex布局来实现水平垂直居中,今天才知道还有grid也是很好用的,参考阮一峰大神的博客,简单记录一下学习; <div class="container"> <div class="item">1</div> <div class=...
  • 在没使用flex之前,垂直居中最常用的方法就是将容器的line-height设置为和容器一样的高度,但这种方法很生硬,每次需要更改容器高度的时候都需要考虑line-height,使用以下这种方法可以实现自适应的垂直居中!...
  • 为了更好的学习,现在将css常见的七中垂直居中布局方案梳理一下,同样这也是面试常被问到的知识点哦。 先放一张效果图,这是用7种不同的方法实现的垂直居中。 接着放实现这张效果图的全部代码。 <!DOCTYPE ...
  • .parent { display: table-cell; vertical-align: middle; } .child { display: table; margin: 0 auto; }
  • CSS布局之-水平垂直居中
  • CSS布局之水平居中和垂直居中

    千次阅读 2018-03-26 11:59:13
    CSS布局之水平居中和垂直居中前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架搭建之中,又有居中布局/多列布局/全局布局。今天介绍一下居中布局的一些技巧。居中布局水平居中1.使用inline-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,469
精华内容 24,187
关键字:

css垂直布局