精华内容
参与话题
问答
  • 主要结合CSS3的布局新特征谈谈常见布局方法,进行一次基于CSS2、3的各种布局的方法总结,感兴趣的小伙伴们可以参考一下
  • css居中布局方法

    2019-10-17 21:51:36
    1.水平居中最简单的办法: margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而...3.文字的垂直居中方法: .center{ line-height: 200px;/*垂直居中关键*/ height: 200px; font-size: 3...

    1.水平居中最简单的办法:

    margin:0 auto;
    也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果。

    2.文字的水平居中方法:

    text-align:center;

    3.文字的垂直居中方法:

    .center{
    	  line-height: 200px;/*垂直居中关键*/
    	  height: 200px;
    	  font-size: 36px;
    }
    

    4.padding填充:

    利用padding和background-clip配合实现div的水平垂直居中:

    <div class="parent">
      <div class="children"></div>
    </div>
    

    通过background-clip设置为content-box,将背景裁剪到内容区外沿,再利用padding设为外div减去内div的差的一半,来实现:

    .parent{
     margin:0 auto;
     width:200px;
     height:200px;
     background-color:red;
    }
    .children {
     width: 100px;
     height: 100px;
     padding: 50px;
     background-color: black;
     background-clip:content-box;/*居中的关键*/
    

    5.translate(-50%,-50%):

    用 position 加 translate translate(-50%,-50%) 比较奇特,百分比计算不是以父元素为基准,而是以自己为基准。

    示例:

    <style>
    #ex3_container{
    width:200px;
    height:200px;
    background-color:yellow;
    position:relative;
    }
    #ex3_content{
    left:50%; top:50%; 
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    background-color:gray; color:white; position:absolute;
    }
    </style>
    <div id="ex3_container"><div id="ex3_content">Hello World</div></div>
    

    这个技巧相当嚣张,同样适用于没固定大小的内容,min-width,max-height,overflow:scroll等。

    6.绝对定位居中:

    绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

    父容器元素:position: relative;

    .Absolute-Center {
      width: 50%;
      height: 50%;
      overflow: auto;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }
    

    注意:高度必须定义,建议加 overflow: auto,防止内容溢出。

    7.视口居中:

    内容元素:position: fixed,z-index: 999,记住父容器元素position: relative

    .center {
      width: 50%;
      height: 50%;
      overflow: auto;
      margin: auto;
      position: fixed;
      top: 0; left: 0; bottom: 0; right: 0;
      z-index: 999;
    }
    

    8.响应式:

    百分比宽高,最大、最小宽度均可以,加 padding 也可以

    .center {
      width: 60%;
      height: 60%;
      min-width: 400px;
      max-width: 500px;
      padding: 40px;
      overflow: auto;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }
    

    9.偏移:

    只要margin: auto; 在,内容块将垂直居中,top, left, bottom, right 可以设置偏移。

    .center {
      width: 50%;
      height: 50%;
      margin: auto;
      overflow: auto;
      position: absolute;
      top: 0; left: auto; bottom: 0; right: 20px;
      text-align: right;
    }
    

    10.溢出:

    居中内容比父容器高时,防止溢出,加 overflow: auto (没有任何 padding 时,也可以加 max-height: 100%;)。

    .Absolute-Center.is-Overflow {
      width: 50%;
      height: 300px;
      max-height: 100%;
      margin: auto;
      overflow: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }
    

    11.调整尺寸:

    resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸,确定加了 overflow: auto 。

    .Absolute-Center.is-Resizable {
      min-width: 20%;
      max-width: 80%;
      min-height: 20%;
      max-height: 80%;
      resize: both;
      overflow: auto;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
    }
    

    12.margin填充:

    首先我们还是定义父子div:

    <div class="parent">
      <div class="children"></div>
    </div>
    

    这里我们利用将子div的margin-top设置为父div高度减去子div高度的一半,然后再通过overflow设置为hidden来触发父div的BFC,LESS代码如下:

    @parentWidth:200px;
    @childrenWidth:50px;
    .parent {
     margin:0 auto;
     height:@parentWidth;
     width:@parentWidth;
     background: red;
     overflow:hidden;/*触发BFC*/
    }
    .children {
     height:@childrenWidth;
     width:@childrenWidth;
     margin-left:auto;
     margin-right:auto;
     margin-top: (@parentWidth - @childrenWidth) / 2;
     background:black;
    }
    

    13.absolute定位:

    利用position:absolute搭配top,left 50%,再将margin设为负值也可以对div进行水平垂直居中,首先还是需要定义父子div:

    <div class="parent">
      <div class="children"></div>
    </div>
    

    然后设置相应的css:

    .parent {
     position:relative;
     margin:0 auto;
     width:200px;
     height:200px;
     background-color:red;
    }
    .children {
     position:absolute; 
     left:50%; 
     top:50%; 
     margin:-25px 0 0 -25px ;
     height:50px;
     width:50px;
     background-color: black;
    }
    

    其中的margin中的值为该div宽度的一半

    14.图片居中:

    一般的图片居中都是和text-align一样,将图片包装在一个div中,将该div的text-align设为center即可。

    有一种特殊的方式,利用了一个图片进行占位,以让父容器获得高宽,从而让进行-50%偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小,随便放张尺寸不超过父容器的图片上去都能做到居中,而且兼容性好。代码如下:

    <div class="parent">
      <p>
        <img class="hidden-img" src="http://nec.netease.com/img/s/1.jpg" alt="" />
        <img class="show-img" src="http://nec.netease.com/img/s/1.jpg" alt="" /></p>
    </div>
    .parent {
     position:relative;
     width:100%;
     height:200px;
     background:red;
    }
    p {
     position:absolute;
     top:50%;
     left:50%;
    }
    .hidden-img {
     visibility:hidden;
    }
    .show-img {
     position:absolute;
     right:50%;
     bottom:50%;
    }
    

    15.transform居中:

    遇到不定宽的div,特别是响应式或者移动端的设计中。下面介绍一种不需要定宽的div水平垂直居中方法。

    <div class="parent">
      <div class="children">
        <div class="children-inline">我是水平垂直居中噢!</div>
      </div>
    </div>
    .parent {
     float: left;
     width: 100%;
     height: 200px;
     background-color: red;
    }
    .children {
     float:left;
     position:relative;
     top:50%;
     left:50%;
    }
    .children-inline {
     position: relative;
     left: -50%;
     -webkit-transform : translate3d(0, -50%, 0);
     transform : translate3d(0, -50%, 0);
     background-color: black;
     color:white;
    }
    

    首先我们利用float,将需要居中的div的父div也就是children的宽度收缩,然后left:50%,将children的左边与水平中线对齐。这个时候,还没有真正居中,我们需要将children-inner左移动-50%,这样就水平居中了。

    再来说说垂直方向,先将children的top设为50%,然后其上边和垂直中线对齐了,同样,我们需要将children-inner上移动-50%。但是这个50%是计算不出来的,所以我们用到了transform : translate3d(0, -50%, 0);
    这个方法非常好用噢。

    16.flex居中:

    最后来介绍一下CSS3中的display:flex来实现的水平垂直居中的方法。

    <div class="parent">
      <div class="children">我是通过flex的水平垂直居中噢!</div>
    </div>
    html,body{
     width: 100%;
     height: 200px;
    }
    .parent {
     display:flex;
     align-items: center;/*垂直居中*/
     justify-content: center;/*水平居中*/
     width:100%;
     height:100%;
     background-color:red;
    }
    .children {
     background-color:blue;
    }
    
    展开全文
  • 网页制作Webjx文章简介:在CSS网页布局中,不可避免的会涉及到CSS伪类的问题。 在CSS网页布局中,不可避免的会涉及到CSS伪类的问题。到底该如何正确的定义CSS伪类呢?虽然webjx中有很多相关的介绍,但复习一下也无妨...
  • css页面布局方法总结

    2018-08-20 15:04:22
    目前有以下方法可以实现: 1. 浮动布局 2. 绝对定位布局 3. flex布局 4. 表格布局 5. 网格布局 浮动布局 浮动布局会导致元素脱离文档流,造成高度塌陷,这时候就要清楚浮动。 优点是兼容性较好,...

    题目:假设高度已知,请写出三栏布局,其中左右栏各宽300px,中间自适应

    目前有以下方法可以实现:
    1. 浮动布局
    2. 绝对定位布局
    3. flex布局
    4. 表格布局
    5. 网格布局


    • 浮动布局
      浮动布局会导致元素脱离文档流,造成高度塌陷,这时候就要清楚浮动。
      优点是兼容性较好,如果浮动清楚处理的比较合理是没有什么问题的。
    <style>
        *{margin:0;padding: 0;}
        .box{width: 100%;}
        .box div{height: 500px;}
        .left{float: left;width: 300px;background: skyblue;}
        .right{float: right;width: 300px;background: green;}
        .content{background: #ccc;}
    </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
            <div class="content">
                <h2>浮动布局</h2>
            </div>
        </div>
    </body>

    • 绝对定位布局
      绝对定位布局优点,很快捷,设置很方便,而且也不容易出问题,你可以很快的就能想出这种布局方式。
      缺点就是,绝对定位是脱离文档流的,意味着下面的所有子元素也会脱离文档流,这就导致了这种方法的有效性和可使用性是比较差的。
    <style>
        *{margin:0;padding: 0;}
        .box{width: 100%;position: relative;}
        .box div{height: 500px;}
        .left{width: 300px;background: skyblue;position: absolute;left: 0;}
        .right{width: 300px;background: green;position: absolute;right: 0;}
        .content{background: #ccc;position: absolute;left: 300px;right: 300px;}
    </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
            <div class="content">
                <h2>绝对定位布局</h2>
            </div>
        </div>
    </body>

    • flex布局
      flexs布局是css3的内容,就是为了解决上面两种方式的不足而出现的,目前的移动端几乎都是用的flex布局。
      缺点就是不支持低版本的浏览器(ie8及其一下)。
    <style>
        *{margin:0;padding: 0;}
        .box{width: 100%;display: flex;}
        .box div{height: 500px;}
        .left{width: 300px;background: skyblue;}
        .right{width: 300px;background: green;}
        .content{background: #ccc;flex:1;}
    </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="content">
                <h2>flex布局</h2>
            </div>
            <div class="right"></div>
        </div>
    </body>

    • table布局
      表格布局兼容性比较好,当flex布局处理不好的问题时候可以考录。
      缺点是当一个单元格的高度发生改变变得很长的时候其他的表格会跟着一起变动。
    <style>
        *{margin:0;padding: 0;}
        .box{width: 100%;display: table;}
        .box div{height: 500px;}
        .left{width: 300px;background: skyblue;display: table-cell;}
        .right{width: 300px;background: green;display: table-cell;}
        .content{background: #ccc;flex:1;display: table-cell;}
    </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="content">
                <h2>表格布局</h2>
            </div>
            <div class="right"></div>
        </div>
    </body>

    • 网格布局
      网格布局是新得规范,目前 ie11+ 支持
    <style>
        *{margin:0;padding: 0;}
        .box{width: 100%;display: grid;grid-template-columns: 300px auto 300px;}
        .box div{height: 500px;}
        .left{background: skyblue;}
        .right{background: green;}
        .content{background: #ccc;}
    
    </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="content">
                <h2>网格布局</h2>
            </div>
            <div class="right"></div>
        </div>
    </body>


    扩展:如果高度未知,那些布局方式还可以使用?
    可以使用的只有:flex布局、table布局

    展开全文
  • CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局
  • css 网格布局 This article was updated on 23rd March, 2017. Specifically: browser support for CSS Grid Layout. 本文已于2017年3月23日更新。特别是:浏览器对CSS Grid Layout的支持。 In this article, we ...

    css 网格布局

    Placing elements using Grid Layout module

    This article was updated on 23rd March, 2017. Specifically: browser support for CSS Grid Layout.

    本文已于2017年3月23日更新。特别是:浏览器对CSS Grid Layout的支持。

    In this article, we are going to learn seven ways in which you can place elements in a web page using the Grid Layout module.

    在本文中,我们将学习使用Grid Layout模块将元素放置在网页中的七种方法。

    Previously, SitePoint published Introducing the CSS Grid Layout. Recently, I also wrote Where Things Are at in the CSS Grid Layout Working Draft.

    先前,SitePoint发布了CSS网格布局简介 。 最近,我还在CSS Grid Layout Working Draft中写了《事物在哪里》

    Here, the focus will be entirely on specific ways in which you can lay out elements on the web using CSS Grid. Now, let’s go over each one of them.

    在这里,重点将完全放在使用CSS Grid在Web上布置元素的特定方式。 现在,让我们逐一检查它们。

    解决浏览器对网格布局的支持 (Addressing Browser Support for Grid Layout)

    At this time, Grid Layout doesn’t yet have consistent browser support. However, as of March 2017, both latest versions of Chrome and Firefox browsers have been released with CSS Grid Layout support by default. IE still supports the old implementation, Opera needs the Experimental Web Platform flag turned on, and Safari has no support at all. To properly work with all the examples in this article, I suggest you use either Chrome or Firefox. For readers who for some reason find it problematic to use these browsers, I have added a screenshot to show the final result of each technique.

    目前,网格布局尚未获得一致的浏览器支持。 但是,截至2017年3月,默认情况下,最新版本的Chrome浏览器和Firefox浏览器均已发布并具有CSS Grid Layout支持。 IE仍然支持旧的实现,Opera需要打开Experimental Web Platform标志,而Safari完全不支持。 为了正确处理本文中的所有示例,建议您使用Chrome或Firefox。 对于出于某种原因发现使用这些浏览器有问题的读者,我添加了一个屏幕截图以显示每种技术的最终结果。

    #1在各个属性中指定所有内容 (#1 Specifying Everything in Individual Properties)

    CSS Grid Layout-Specifying Everything in Individual Properties Example

    This is the version we have been using to place the elements in our previous articles. This method is verbose but easy to understand. Basically, the left/right and top/bottom bounds of an element are specified using grid-column-start/grid-column-end and grid-row-start/grid-row-end properties. If an element is only going to span one row or column, you can omit the -end properties, this way you will have to write a little less CSS.

    这是我们在以前的文章中用来放置元素的版本。 此方法冗长但易于理解。 基本上,使用grid-column-start / grid-column-endgrid-row-start / grid-row-end属性指定元素的左/右边界和上/下边界。 如果一个元素仅跨越一行或一列,则可以省略-end属性,这样,您将需要编写更少CSS。

    In the demo below, element A has been placed in the second row and second column using the following CSS:

    在下面的演示中,使用以下CSS将元素A放置在第二行和第二列中:

    .a {
      grid-column-start: 2;
      grid-column-end: 3;
      grid-row-start: 2;
      grid-row-end: 3;
    }

    The same effect could be achieved by using:

    通过使用以下方法可以达到相同的效果:

    .a {
      grid-column-start: 2;
      grid-row-start: 2;
    }

    See the Pen Specifying Everything in individual Properties by SitePoint (@SitePoint) on CodePen.

    见笔指定一切都在个人属性由SitePoint( @SitePoint上) CodePen

    #2使用grid-rowgrid-column (#2 Using grid-row and grid-column)

    CSS Grid Example Using grid-row and grid-column

    Even though the CSS in our first example was readable and easy to understand, we had to use four different properties to place a single element. Instead of using four properties, we can just use two — grid-column and grid-row. Both these properties will take two values separated by a slash where the first value will determine the start line and the second value will determine the end line of our element.

    即使我们第一个示例中CSS可读易懂,我们也必须使用四个不同的属性来放置单个元素。 除了使用四个属性,我们还可以只使用两个属性grid-columngrid-row 。 这两个属性都将采用两个值,并以斜杠分隔,其中第一个值将确定元素的起始行,第二个值将确定元素的结束行。

    Here is the syntax you need to use with these properties:

    这是您需要对这些属性使用的语法:

    .selector {
      grid-row: row-start / row-end;
      grid-column: col-start / col-end;
    }

    To place item C in the bottom right corner of our grid, we can use the following CSS:

    要将项目C放置在网格的右下角,可以使用以下CSS:

    .c {
      grid-row: 2 / 4;
      grid-column: 2 / 4;
    }

    See the Pen Using grid-row and grid-column by SitePoint (@SitePoint) on CodePen.

    请参阅CodePen上的SitePoint ( @SitePoint )的使用网格行和网格列

    #3使用grid-area (#3 Using grid-area)

    CSS Grid - Example Using grid-area

    Technically, the item we are laying out covers a specific area of the webpage. The boundary of that item is determined by the values we provide for the grid lines. All of these values can be supplied at once using the grid-area property.

    从技术上讲,我们要布置的项目涵盖了网页的特定区域。 该项目的边界由我们为网格线提供的值确定。 使用grid-area属性可以一次提供所有这些值。

    This is what your CSS would look like when using this property:

    这是使用此属性时CSS的外观:

    .selector {
      grid-area: row-start / col-start / row-end / col-end;
    }

    If you have trouble remembering the correct order of these values, just keep in mind that first you have to specify the position of the top-left ( row-startcol-start ) corner and then the bottom-right ( row-endcol-end ) corner of your element.

    如果您在记住这些值的正确顺序时遇到麻烦,请记住,首先必须指定左上角( row-start - col-start )角的位置,然后指定右下角( row-end col-end )元素的一角。

    Just like the previous example, to place item C in the bottom right corner of our grid, we can use the following CSS:

    就像前面的示例一样,要将项目C放置在网格的右下角,我们可以使用以下CSS:

    .c {
      grid-area: 2 / 2 / 4 / 4;
    }

    See the Pen Using grid-area by SitePoint (@SitePoint) on CodePen.

    请参阅CodePen上的SitePoint笔( @SitePoint ) 使用网格区域

    #4使用span关键字 (#4 Using the span Keyword)

    CSSGrid-Example Using the span Keyword with Grid Lines

    Instead of specifying the end line while laying out elements, you can also use the span keyword to set the number of columns or rows a particular element will span.

    您也可以使用span关键字来设置特定元素将跨越的列数或行数,而不是在布置元素时指定结束线。

    This is the proper syntax when using the span keyword:

    使用span关键字时,这是正确的语法:

    .selector {
      grid-row: row-start / span row-span-value;
      grid-column: col-start / span col-span-value;
    }

    If your element spans across only one row or column you can omit both the span keyword and its value.

    如果您的元素仅跨越一行或一列,则可以忽略span关键字及其值。

    This time let’s place item C in the top left corner of our grid. We can use the following CSS to do so.

    这次让我们将项目C放置在网格的左上角。 我们可以使用以下CSS来做到这一点。

    .c {
      grid-row: 1 / span 2;
      grid-column: 1 / span 2;
    }

    See the Pen Using span with grid lines by SitePoint (@SitePoint) on CodePen.

    请参阅CodePen上的SitePoint ( @SitePoint )的钢笔使用带有网格线跨度

    #5使用命名行 (#5 Using Named Lines)

    CSSGrid-Example with Named Lines

    Until now, we have been using raw numbers to specify grid lines and it is easy to use when we are working with simple layouts. However, when you have to place several elements, it can get a bit confusing. Most of the times, an element on your page will fall under a specific category. For example, the header may go from column line c1 to column line c2 and from row line r1 to row line r2. It would be a lot easier to properly name all the lines and then place your elements using these names instead of numbers.

    到目前为止,我们一直在使用原始数字来指定网格线,并且在使用简单布局时很容易使用。 但是,当您必须放置多个元素时,可能会有些混乱。 大多数情况下,页面上的元素会属于特定类别。 例如,标题可以从列线c1到列线c2并且从行线r1到行线r2 。 正确命名所有行,然后使用这些名称而不是数字放置元素会容易得多。

    Let’s create a very basic layout to make the concept clearer. First, we will have to modify the CSS applied to our grid container:

    让我们创建一个非常基本的布局以使概念更清晰。 首先,我们将必须修改应用于网格容器CSS:

    .container {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: [head-col-start] 180px [content-col-start] 180px [content-col-mid] 180px [head-col-end];
      grid-template-rows: [head-row-start] auto [head-row-end] auto [content-row-end] auto [footer-row-end];
    }

    What I have done above is assign names to all the lines based on the type of content that they will enclose. The idea here is to use names that provide us with some insight into the placement of different elements. In this particular example, our header element spans across all the columns. Therefore, assigning the name “head-col-start” and “head-col-end” to the first and last column line respectively will make it clear that these lines represent the left and right end of our header. All other lines can be named in a similar fashion. After all the lines have been named, we can use the following CSS to place all our elements.

    上面我所做的就是根据行将包含的内容类型为所有行分配名称。 这里的想法是使用使我们对不同元素的位置有一些了解的名称。 在此特定示例中,我们的标头元素跨越所有列。 因此,将名称“ head-col-start”和“ head-col-end”分别指定给第一列和最后一列,将使这些行分别代表标题的左端和右端。 其他所有行都可以类似的方式命名。 在命名所有行之后,我们可以使用以下CSS放置所有元素。

    .header {
      grid-column: head-col-start / head-col-end;
      grid-row: head-row-start / head-row-end;
    }
    
    .sidebar {
      grid-column: head-col-start / content-col-start;
      grid-row: head-row-end / content-row-end;
    }
    
    .content {
      grid-column: content-col-start / head-col-end;
      grid-row: head-row-end / content-row-end;
    }
    
    .footer {
      grid-column: head-col-start / head-col-end;
      grid-row: content-row-end / footer-row-end;
    }

    Although we had to write more CSS than usual, now just looking at the CSS will give us an idea of where an element is located.

    尽管我们不得不编写比平时更多CSS,但是现在只要看一下CSS,就可以使我们了解元素的位置。

    See the Pen Using Named Lines by SitePoint (@SitePoint) on CodePen.

    见笔使用命名线由SitePoint( @SitePoint上) CodePen

    #6使用具有通用名称和span关键字的命名行 (#6 Using Named Lines with a Common Name and the span Keyword)

    CSSGrid-Example with Named Lines and the span Keyword

    In the previous method, all lines had different names marking the starting, midpoint or the end of an element. For example, “content-col-start” and “content-col-mid” marked the starting and mid point of the content section of our webpage. If the content section covered a few more rows, we would have to come up with additional line names like “content-col-mid-one”, “content-col-mid-two” and so on.

    在以前的方法中,所有行都有不同的名称来标记元素的开始,中点或结束。 例如,“ content-col-start”和“ content-col-mid”标记了我们网页内容部分的起点和中点。 如果内容部分涵盖了更多行,我们将不得不提出其他行名称,例如“ content-col-mid-one”,“ content-col-mid-two”等等。

    In situations like these, we can just use a common name like “content” for all grid lines of our content section and then use the span keyword to specify how many of those lines an element spans. We can also just mention a number along with the line name to set the number of rows or columns an element would span.

    在这种情况下,我们可以对内容部分的所有网格线使用通用名称(例如“ content”),然后使用span关键字来指定元素跨越多少行。 我们还可以随行名称一起提及数字,以设置元素将跨越的行数或列数。

    Using this method, the CSS would look like this:

    使用此方法,CSS将如下所示:

    .selector {
      grid-row: row-name row-start-number/ row-name row-end-number;
      grid-column: col-name col-start-number / span col-name col-to-span;
    }

    Like the last method, this one also requires you to modify the CSS of your grid container.

    与最后一种方法一样,该方法也需要您修改网格容器CSS。

    .container {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: [one-eighty] 180px [one-eighty] 180px [one-eighty] 180px;
      grid-template-rows: [head-row] auto [content-row] auto [content-row] auto [content-row] auto [footer-row] auto;
    }

    Each of the named column lines has the same name representing their width in pixels and each named row line represents the rows covered by a specific section of the webpage. In this demo, I have introduced an advertisement section just under the sidebar. Here is the CSS:

    每条命名的列线都具有相同的名称,以像素为单位表示其宽度,而每条命名的行线则代表网页的特定部分所覆盖的行。 在此演示中,我在侧边栏下方介绍了广告部分。 这是CSS:

    .header {
      grid-column: one-eighty 1 / one-eighty 4;
      grid-row: head-row / content-row 1;
    }
    
    .sidebar {
      grid-column: one-eighty 1 / one-eighty 2;
      grid-row: content-row 1 / content-row 2;
    }
    
    .advert {
      grid-column: one-eighty 1 / one-eighty 2;
      grid-row: content-row 2 / content-row 3;
    }
    
    .content {
      grid-column: one-eighty 2 / one-eighty 4;
      grid-row: content-row 1 / span content-row 2;
    }
    
    .footer {
      grid-column: one-eighty 1 / span one-eighty 3;
      grid-row: content-row 3 / footer-row;
    }

    See the Pen Using Named Lines with Span by SitePoint (@SitePoint) on CodePen.

    见笔使用与跨度命名线由SitePoint( @SitePoint上) CodePen

    #7使用命名网格区域 (#7 Using Named Grid Areas)

    CSSGrid-Example with Named Grid Areas

    Instead of using lines, we can also place elements by assigning names to different areas. Again, we will have to make some changes to the CSS of our grid container.

    除了使用线条,我们还可以通过将名称分配给不同的区域来放置元素。 同样,我们将不得不对网格容器CSS进行一些更改。

    The CSS for our container should now look like this:

    现在,我们容器CSS应该如下所示:

    .wrapper {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 180px  180px  180px;
      grid-template-areas:  "header  header   header"
                            "content content  advert"
                            "content content  ......"
                            "footer  footer   footer";
    }

    A single dot (.) or a sequence of dots will create an empty cell with nothing in it. All the strings need to have the same number of columns. That’s why we had to add the dots instead of leaving it completely blank. For now, the named grid area can only be rectangular. However, this may change in future versions of the spec. Let’s take a look at the CSS of all our elements.

    单个点( . )或点序列将创建一个没有任何内容的空单元格。 所有字符串必须具有相同的列数。 这就是为什么我们必须添加点而不是将其完全空白。 目前,命名的网格区域只能是矩形。 但是,这可能会在规范的将来版本中发生变化。 让我们看一下所有元素CSS。

    .header {
      grid-area: header;
    }
    
    .content {
      grid-area: content;
    }
    
    .advert {
      grid-area: advert;
    }
    
    .footer {
      grid-area: footer;
    }

    Once you have defined all the grid areas, assigning them to various elements is pretty straightforward. Keep in mind that you can’t use any special characters while assigning names to areas. Doing so will make the declaration invalid.

    定义所有网格区域后,将它们分配给各种元素非常简单。 请记住,在为区域分配名称时不能使用任何特殊字符。 这样做会使声明无效。

    See the Pen Using Named Grid Areas by SitePoint (@SitePoint) on CodePen.

    见笔使用命名网格地域由SitePoint( @SitePoint上) CodePen

    结论 (Conclusion)

    That’s it! We have covered seven different methods of laying out elements using the CSS grid layout. Is there any tip that you would like to share with other readers regarding this article? Which of these methods would you prefer to use in your own projects? Let us know in the comments.

    而已! 我们已经介绍了使用CSS网格布局对元素进行布局的七种不同方法。 您是否想与其他读者分享有关此文章的提示? 您希望在自己的项目中使用以下哪种方法? 让我们在评论中知道。

    翻译自: https://www.sitepoint.com/seven-ways-you-can-place-elements-using-css-grid-layout/

    css 网格布局

    展开全文
  • CSS3 布局

    2016-10-29 21:50:34
    1、多列布局 Columns 2、root选择器 定义::root选择器,匹配元素E所在文档的根元素。在HTML文档中,根元素始终是。 注:“:root”选择器等同于元素。建议使用:root方法。在IE9以下还可以借助“:root”实现hack...

    1、多列布局 columns

    语法:columns:<column-width> || <column-count>

    注:<column-width>:列宽,主要用来定义多列中每列的宽度,column-width: auto | <length>(由数值和长度单位组成,不过其值只能是正值,不              能为负值)。

      <column-count>: 列数,主要用来定义多列中的列数,column-count:auto | <integer>(此值为正整数值,主要用来定义元素的列数,取值为大              于0的整数,负值无效)。


    2、列间距 column-gap

    语法:column-gap: normal || <length>

    注:normal:默认值,默值为1em(如果你的字号是px,其默认值为你的font-size值)。

      <length>:此值用来设置列与列之间的距离,其可以使用px,em单位的任何整数值,但不能是负值。


    3、列表边框 column-rule

    定义:用来定义列与列之间的边框宽度、边框样式和边框颜色。column-rule是不占用任何空间位置的,在列与列之间改变其宽度不会改变任何列的位     置。


    语法:column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>


    注:column-rule-width:用来定义列边框的宽度,其默认值为“medium”,column-rule-width属性接受任意浮点数,但不接收负

                   值。可以使用关键词:medium、thick和thin。

       column-rule-style:用来定义列边框样式,其默认值为“none”。属性值包括none、hidden、dotted、dashed、solid、

                    double、groove、ridge、inset、outset。

       column-rule-color:用来定义列边框颜色,其默认值为前景色color的值,使用时相当于border-color。column-rule-color

                    接受所有的颜色。如果不希望显示颜色,也可以将其设置为transparent(透明色)


    4、跨列设置 column-span

    语法:column-span: none | all


    注:none:此值为column-span的默认值,表示不跨越任何列。

      all:这个值跟none值刚好相反,表示的是元素跨越所有列,并定位在列的Z轴之上。


    5、盒子模型

    定义:box-sizing属性定义盒元素尺寸的计算方法。


    语法:box-sizing : content-box padding-box border-box inherit ;


    注:content-box:默认值,计算方法为width/height=content,表示指定的宽度和高度仅限内容区域,边框和内边距的宽度不包含在内。

               element width/height = border + padding + content width / height

      padding-box:计算方法为width/height=content+padding,表示指定的宽度和高度包含内边距和内容区域,边框宽度不包含在内。

      border-box:计算方法为width/height=content+padding+border,表示指定的宽度和高度包含边框、内边距和内容区域。这里的内容宽度或高度包

              含了元素的border、padding、内容的宽度或高度(此处的内容宽度或高度=盒子的宽度或高度—边框—内距)。

      inherit:表示继承父元素中box-sizing属性的值。


    6、伸缩布局

    定义: 布局 ---> display: flex;

         方向 ---> flex-direction: row(横)||column(竖);

         上下 ---> align-items: flex-start||center||flex-end;

         左右 ---> justify-content: 同上 设置主轴; align-items:设置副轴

         倒序 ---> row-reverse

         兼容加-webkit-前缀






    展开全文
  • 来设置居中效果时,除去博客下介绍的css3方法外,还可以使用负的margin来居中,这样解决了兼容性的问题,但是只适用于宽高已知的情况(因为负的偏移量为元素宽高的一半)。宽高改变时,不再是居中效果。 在这些布局...
  • CSS等分布局方法

    2019-10-03 19:44:45
    CSS等比例划分,在CSS布局中是比较重要的,下面分享几种常用方法和探讨一下兼容性。 一:浮动布局+百分比 emmet html代码:ul.float-ul>li*5>.con>h3{等分标题}+p{等分内容等分内容} .float-ul{width: ...
  • CSS布局居中方法

    2018-11-27 12:31:11
    3、块级元素 width: 百分数; margin-left: (1-百分数)/2; 垂直居中对齐 1、单行文本,设置行高等于所在区域的高度 height: 200px; line-height: 200px; 2、多行文本居中 高度不固定时,高度只能通过内部文本来...
  • CSS-20.css布局方法

    2018-01-30 09:27:20
    布局时垂直方向使用标准流,水平方向使用浮动流 拿到复杂界面时如何入手? 1.从上到下 2.从外向内 3.水平方向先划分为一左一右再对左边或者右边进行进一步的布局
  • 这是一篇关于html+css布局的总结博文,这些布局在日常开发中非常常见。本文提供的方法只是其中一种,现实中解决问题的办法往往不止一种,需要具体问题具体分析。 本文主要讲述的布局 1.字体居中:水平居中、垂直...
  • 上篇文章说到常见css布局水平居中的方法,前端开发css布局还有垂直居中,也是很常见的布局方法,本文分享3种垂直居中布局的方法,table-cell + vertical-align、absolute + transform、flex + align-items,很常见,...
  • CSS3布局模型分析

    千次阅读 2017-03-08 21:30:22
    flex弹性盒子布局模型布局模型中经典布局有:三栏或者二栏布局中主内容自适应宽度且侧栏主栏可随意换位置,本文将针对这个需求进行分析。 这次布局模型将从absolute+margin–>float+margin–>圣杯布局
  • css3布局相关样式

    2016-03-21 15:32:00
    1、多栏布局 2、盒布局 3、弹性盒布局 4、对calc方法的使用 转载于:https://www.cnblogs.com/sdwrz/p/5302158.html
  •  在CSS3中,通过该属性来使用多栏布局方式,该属性的含义是将一个元素中的内容分为多栏进行显示。 (1)浏览器书写 Firefox:“-moz-column-count” Safari、Chorme、Opera:“-webkit-column-coun...
  • 这个地方的竖线,首先他不用css3的nth-child或last-child的选择器来解决的话,还有什么更好的方法呢? 如果我还用上次优惠券那种,加一个<b>的话,类似如下 以后不可能就三个标签,以后程序往里边传东西肯定...
  • 幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。 CSS代码 CSS3里的column系列属性提供了各种不同的功能,通过组合...
  • 主要介绍了css3实现元素环绕中心点布局方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • CSS3布局

    2017-12-13 09:29:27
    布局CSS3发展的新型布局方式。 相比于传统的浮动布局,盒布局更加灵活,使用方法也相对简单。 开启盒布局方法,就是把display属性值设为box或inline-box。 开启盒布局时,可同时设置如下; display: -...
  • CSS居中布局

    2020-12-28 22:30:02
    方式一:CSS3 transform .parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); } 方式二:Flex 布局 .parent { display: flex; justify-content: center;...
  • 本篇文章主要介绍了浅谈CSS3中display属性的Flex布局方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 移动端基础2.1 浏览器现状2.2 手机屏幕的现状2.3 常见移动端屏幕尺寸2.4 移动端调试方法3. 视口3.1 布局视口 layout viewport3.2 视觉视口 visual viewport3.3 理想视口 ideal viewport3.4 meta标签3.4.1 最标准的...
  • 主要介绍了 CSS3的calc()做响应模式布局的实现方法,需要的朋友可以参考下
  • css3弹性布局

    2016-12-12 21:03:57
    弹性布局CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。 其中flex-flow是flex-direction和flex-wrap属性的简写方式,语法如下: flex-flow...

空空如也

1 2 3 4 5 ... 20
收藏数 1,855
精华内容 742
关键字:

css3布局方法