您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

超详细常用css布局

时间:2020-01-09 11:30:02  来源:  作者:

一、垂直居中布局

 

绝对定位布局

  1.  
        .parent {
            position: relative;
        }
        .child {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
复制代码

2.margin 负间距

       .child{
            width:200px;
            height: 200px;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
        }
复制代码
  1. Transforms 变形
      .child {
            width: 200px;
            height: 200px;
            position:absolute;
            left:50%;    /* 定位父级的50% */
            top:50%;
            transform: translate(-50%,-50%); /*自己的50% */
        }
复制代码

 

flex布局

  1.  
       .parent {
            display: flex;
            justify-content:center;
            align-items:center;
        }
复制代码
  1.  
        .parent {
            display: flex;
        }
        .child {
            margin: auto
        }
复制代码

 

table布局

父元素设置teable-cell元素,利用三层结构模拟父子结构

.parent {
            display: table;
            width: 200px;
            height: 200px;
        }

        .child {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .box {
            display: inline-block;
        }
复制代码

 

grid布局

  1.  
.parent {
            display: grid;
        }

        .child {
            justify-self: center;
            align-self: center;
        }
复制代码
  1.  
.parent {
            display: grid;
        }

        .child {
            margin: auto;
        }
复制代码

 

二、自适应布局

 

右边宽度固定,左边自适应

 

超详细常用css布局

 


float布局实现方式
实现步骤:

 

  1. 给子元素设置相同高度,left元素向左浮动,设置固定宽度100px
  2. right元素利用margin-left调整位置
    <style>
        .container > div {
            height: 200px;
        }

        .left {
            background-color: #ce5a4b;
            float: left;
            width: 100px;
        }

        .right {
            background-color: #499e56;
            margin-left: 100px;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

flex实现方式:

  1. 父元素设置display: flex,给left元素设置固定宽度
  2. 给right元素设置flex:1使其填充其余空间
    <style>
        .container {
            display: flex;
        }

        .left {
            background-color: #ce5a4b;
            height: 200px;
            width: 100px;
        }

        .right {
            background-color: #499e56;
            height: 200px;
            flex: 1;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

 

上部高度固定,下部高度自适应

 

超详细常用css布局

 


绝对定位实现方式:
实现步骤:

 

  1. 设置container元素高度与box-sizing属性,使padding计算入container元素中
  2. 设置top元素高度,并使用绝对定位将其放置在container头部
  3. 设置container元素内边距padding-top为top元素的高度,设置bottom元素高度为100%
    <style>
        .container {
            height: 100%;
            padding: 100px 0 0;
            box-sizing: border-box;
            position: relative;
        }

        .top {
            height: 100px;
            background: #ce5a4b;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .bottom {
            height: 100%;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
复制代码

普通布局实现:
实现步骤:

  1. 设置container元素高度与box-sizing属性,使padding计算入container元素中
  2. 设置top元素高度,使用margin移动元素位置到container元素顶部
  3. 设置container元素内边距padding-top为top元素的高度,设置bottom元素高度为100%
    <style>
        .container {
            height: 500px;
            padding-top: 100px;
            box-sizing: border-box;
        }

        .top {
            height: 100px;
            background: #ce5a4b;
            margin: -100px 0 0;
        }

        .bottom {
            height: 100%;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
复制代码

 

三、三栏式布局

三栏式布局的七种布局方式:float布局、绝对定位布局、圣杯布局、双飞翼布局、Flex布局、表格布局、网格布局

超详细常用css布局

 

 

float布局

实现步骤:
1.左右两栏设置float属性使其脱离文档流左边栏设置 float:left, 右边栏设置float: right
2.给中间元素设置margin-left、和margin-right,设置margin的原因是当中间元素高度超出左右两边时,中间元素会被覆盖
3.为了不影响其他元素,给父元素清除浮动

    <style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background: #ce5a4b;
        }

        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: #499e56;
        }

        .main {
            margin-left: 120px;
            margin-right: 220px;
            height: 200px;
            background: #f8cf5f;
        }

        .container::after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
复制代码

缺点:使用的时候只需要注意一定要清除浮动

 


position布局

实现步骤

  1. 给 container 设置position: relative,因为绝对定位的元素的参照物为第一个postion不为static的父元素。
  2. left 向左定位,right 向右定位。
  3. main 使用绝对定位,通过设置left和right并把两边撑开。
    <style>
        .container {
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            width: 100px;
            height: 300px;
            background-color: #ce5a4b;
        }

        .main {
            position: absolute;
            left: 120px;
            right: 220px;
            height: 300px;
            background-color: #f8cf5f;
        }

        .right {
            position: absolute;
            right: 0;
            width: 200px;
            height: 300px;
            background-color: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

缺点:绝对定位是脱离文档流的,意味着下面的所有子元素也会脱离文档流,导致了这种方法的有效性和可使用性是比较差的

 

float和BFC配合圣杯布局

实现步骤

  1. 使左、中、右三栏都通过float进行浮动。
  2. 将left的margin-left设置为-100%,此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值:-200px,则右栏也会移动到和左、中栏一行中
  3. 给container一个padding,该padding应该正好等于左、右栏的宽度
  4. 给左、右两栏加上相对布局,然后再通过设置left和right值向外移动。
    <style>
        .container {
            overflow: hidden;
            padding: 0 220px 0 120px;
        }

        .container>div {
            position: relative;
            float: left;
            height: 300px;
        }

        .main {
            width: 100%;
            background-color: #f8cf5f;
        }

        .left {
            width: 100px;
            margin-left: -100%;
            left: -120px;
            background-color: #ce5a4b;
        }

        .right {
            width: 200px;
            background-color: #499e56;
            margin-left: -200px;
            right: -220px;
        }
    </style>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
复制代码

 

双飞翼布局

实现步骤

  1. 使左、中、右三栏都通过float进行浮动。
  2. 将left的margin-left设置为-100%,此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值:-200px,则右栏也会移动到和左、中栏一行中
  3. 给 main 的子元素content设置margin: 0 220px 0 120px;,同时设置overflow: hidden使其成为一个BFC
  4. 为了不影响其他元素,给main清除浮动
    <style>
        .container {
            overflow: hidden;
        }

        .container>div {
            position: relative;
            float: left;
            height: 300px;
        }

        .main {
            width: 100%;
        }

        .main::after {
            content: '';
            display: block;
            clear: both;
        }

        .left {
            width: 100px;
            background-color: #ce5a4b;
            margin-left: -100%;
        }

        .right {
            width: 200px;
            background-color: #499e56;
            margin-left: -200px;
        }

        .content {
            height: 100%;
            margin: 0 220px 0 120px;
            overflow: hidden;
            background-color: #f8cf5f;
        }
    </style>
    <div class="container">
        <div class="main">
            <div class="content"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
复制代码

和圣杯布局类似,只是处理中间栏部分内容被遮挡问题的解决方案有所不同

 

flex布局

实现步骤

  1. 给 container 设置为一个 flex 容器display: flex
  2. main 的宽度设置为width: 100%,left 和 right 分别设置为width: 200px和width: 100px
  3. 为了不让 left 和 right 收缩,给它们设置flex-shrink: 0
  4. 使用order属性给三个部分的 DOM 结构进行排序:left:order: 1,main:order: 2,right:order: 3
    <style>
        .container {
            display: flex;
        }

        .main {
            background-color: #f8cf5f;
            width: 100%;
            height: 300px;
            order: 2;
        }

        .left {
            background-color: #ce5a4b;
            width: 100px;
            height: 300px;
            margin-right: 20px;
            flex-shrink: 0;
            order: 1;
        }

        .right {
            background-color: #499e56;
            width: 200px;
            height: 300px;
            flex-shrink: 0;
            margin-left: 20px;
            order: 3;
        }
    </style>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

极其灵活(还有其他实现方式),需要注意浏览器兼容性

 

table-cell布局

实现步骤

  1. 给三栏都设置为表格单元 display: table-cell
  2. left 和 right分别设置 width: 100px和width: 200px,container设置 width: 100%
  3. 这时 left 和 right 被挤到两边去了,因此要分别设置min-width确保不会被挤压。
    <style>
        .container {
            width: 100%;
            display: table;
        }
        .container > div {
            display: table-cell;
            height: 300px;
        }

        .content {
            height: 100%;
            margin: 0 20px;
            background: #f8cf5f;
        }

        .left {
            width: 100px;
            min-width: 100px;
            background-color: #ce5a4b;
        }

        .right {
            width: 200px;
            min-width: 200px;
            background-color: #499e56;
        }
    </style>
    <body>
        <div class="left"></div>
        <!-- 这时的main要放在中间 -->
        <div class="main">
            <div class="content"></div>
        </div>
        <div class="right"></div>
    </body>
复制代码

这种布局方式能使得三栏的高度是统一的,但不能使main放在最前面得到最先渲染

 

网格布局

实现步骤

  1. 给 container 设置为display: grid
  2. 设置三栏的高度:grid-template-rows: 300px
  3. 设置三栏的宽度,中间自适应,两边固定:grid-template-columns: 100px auto 200px;
    <style>
        .container {
            display: grid;
            width: 100%;
            grid-template-rows: 300px;
            grid-template-columns: 100px auto 200px;
        }
        .left {
            background-color: #ce5a4b;
            margin-right: 20px;
        }
        .main {
            background-color: #f8cf5f;
        }
        .right {
            background-color: #499e56;
            margin-left: 20px;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

使用起来极其方便,代码简介,但是兼容性很差

 

四、多列等高

 

利用背景图片

    <style>
        .container {
            background: url("column.png") repeat-y;
            width: 960px;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 220px;
        }

        .main {
            float: left;
            width: 480px;
        }

        .right {
            float: left;
            width: 220px;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

 

使用正padding和负margin对冲实现多列布局方法

实现步骤:

  1. background 会填充内边距 padding,而不会填充外边距 margin 。margin具有坍塌性,可以设置负值。
  2. float:left。使用float,元素会脱离文档流,使其浮动至最近的文档流元素。在这里的作用是,将三个div元素并排。
  3. overflow:hidden; 设置overflow属性为hidden,这样会让父容器产生BFC(Block Fromatting Context块级格式化上下文)效果,消除float带来的影响。同时,根据需要,会截取内容以适应填充框,将超出容器的部分隐藏。
    <style>
        .container {
            overflow: hidden;
        }

        .container>div {
            /**
            * padding-bottom 设置比较大的正值。
            * margin-bottom 设置绝对值大的负值。
            **/
            padding-bottom: 10000px;
            margin-bottom: -10000px;
            float: left;
            width: 30%;
        }

        .left {
            background-color: #ce5a4b;
        }

        .main {
            background-color: #f8cf5f;
        }

        .right {
            background-color: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

 

布局 flex实现等高

实现思路:

  1. 父元素设置display:flex, 弹性盒子布局flex,默认值就是自带等高布局的特点
    <style>
        .container {
            display: flex;
        }

        .left {
            width: 200px;
            background-color: #ce5a4b;
        }

        .main {
            flex: 1;
            height: 400px;
            background: #f8cf5f;
        }

        .right {
            width: 300px;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

 

table-cell等高布局

实现步骤:
1.父元素设置dispaly:table, table布局天然就具有等高的特性。

    <style>
        .container {
            display: table;
        }
        .left {
            display: table-cell;
            width: 300px;
            background-color: #ce5a4b;
        }

        .main {
            display: table-cell;
            width: 300px;
            height: 400px;
            background: #f8cf5f;
        }

        .right {
            display: table-cell;
            width: 300px;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

 

grid布局

    <style>
        .container {
            display: grid;
            grid-auto-flow: column;
        }

        .left {
            background-color: #ce5a4b;
        }

        .main {
            background-color: #f8cf5f;
            height: 300px;
        }

        .right {
            background-color: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
复制代码

 

五、品字形布局

 

超详细常用css布局

 

inline或float布局方式

实现步骤:

  1. 三块高宽是确定的;
  2. 上面那块用margin: 0 auto;居中;
  3. 下面两块用inline-block或者float不换行
  4. 用margin调整位置使他们居中(使left元素margin-left为宽度的一般则可居中)

实现方式一:

    <style>
        .container > div {
            height: 300px;
            width: 300px;
        }

        .top {
            margin: 0 auto;
            background-color: #f8cf5f;
        }

        .left {
            display: inline-block;
            // float: left;
            margin-left: 150px;
            background-color: #499e56;
        }

        .right {
            display: inline-block;
            // float: left;
            background-color: #ce5a4b;
        }
    </style>
<body>
    <div class="container">
        <div class="top">上</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
复制代码

实现方式二:

//  与上述实现道理基本相同,不同的是left和right元素布局     
    <style> 
        .container>div {
            height: 300px;
            width: 300px;
        }

        .top {
            margin: 0 auto;
            background-color: #f8cf5f;
        }

        .left {
            display: inline-block;
            // float: left;
            margin-left: -600px;
            background-color: #499e56;
        }

        .right {
            display: inline-block;
            // float: left;
            margin-left: 50%;
            background-color: #ce5a4b;
        }
    </style>
<body>
    <div class="container">
        <div class="top">上</div>
        <div class="right">右</div>
        <div class="left">左</div>
    </div>
</body>
复制代码

缺点:使用inline-block会有小的间隙

 

全屏的品字布局

实现步骤:

  1. 上面的div宽100%,下面的两个div分别宽50%,然后用float或者inline使其不换行即可
    <style>
        .container>div {
            height: 200px;
        }

        .top {
            width: 100%;
            background-color: #f8cf5f;
        }

        .left {
            // display: inline-block
            float: left;
            width: 50%;
            background-color: #499e56;
        }

        .right {
            // display: inline-block
            float: left;
            width: 50%;
            background-color: #ce5a4b;
        }
    </style>
<body>
    <div class="container">
        <div class="top">上</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
复制代码

 

六、瀑布流布局

 

超详细常用css布局

 

multi-columns 方式

实现步骤:

  1. 瀑布流容器中设置 column-count(列数) 和 column-gap(列间距)
  2. item 中设置 break-inside:avoid,这是为了控制文本块分解成单独的列,以免项目列表的内容跨列,破坏整体的布局。
  3. 为了布局具有响应式效果,可以借助媒体查询属性,在不同屏幕大小的条件下设置瀑布流容器 container 的 column-count 来自适应改变列数
    <style>
        .container {
            -moz-column-count: 3;
            /* Firefox */
            -webkit-column-count: 3;
            /* Safari 和 Chrome */
            column-count: 3;
            -moz-column-gap: 2em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            width: 70%;
            margin: 2em auto;
        }

        .item {
            padding: 2em;
            margin-bottom: 2em;
            -moz-page-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            background: #ce5a4b;
            color: #fff;
            text-align: center;
        }

        .item .content-lar {
            height: 200px;
        }

        .item .content-mid {
            height: 100px;
        }

        .item .content-sma {
            height: 50px;
        }

        @media screen and (max-width: 800px) {
            .container {
                column-count: 2;
                /* two columns on larger phones */
            }
        }

        @media screen and (max-width: 500px) {
            .container {
                column-count: 1;
                /* two columns on larger phones */
            }
        }
    </style>    
<body>
    <div class="container">
        <div class="item">
            <div class="item_content content-lar"> 1 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 2 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 3 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 4 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 5 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 6 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 7 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 8 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 9 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 10 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 11 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 12 我中等 </div>
        </div>
        <!-- more items -->
    </div>
</body>
复制代码

 

flex布局

实现步骤:

  1. 瀑布流容器设置dispaly:flex,并使用 flex-flow 来控制列,并且允许它换行
  2. 显式的设置 height 属性,当然除了设置 px 值,还可以设置100vh,让容器的高度和浏览器视窗高度一样(注意:不能不显式的设置,如果没有显式的设置,容器就无法包裹住项目列表)
  3. 为了布局具有响应式效果,可以借助媒体查询属性显示设置不同的高度值
    <style>
        .container {
            height: 800px;
            display: flex;
            flex-flow: column wrap;
            width: 70%;
            margin: 2em auto;
        }

        .item {
            padding: 2em;
            margin-bottom: 2em;
            break-inside: avoid;
            background: #f60;
            color: #fff;
            text-align: center;
            margin: 10px;
        }

        .item .content-lar {
            height: 200px;
        }

        .item .content-mid {
            height: 100px;
        }

        .item .content-sma {
            height: 50px;
        }

        @media screen and (max-width: 1100px) {
            .masonry {
                height: 800px;
            }
        }

        @media screen and (max-width: 800px) {
            .masonry {
                height: 1100px;
            }
        }

        @media screen and (max-width: 600px) {
            .masonry {
                height: 1300px;
            }
        }

        @media screen and (max-width: 460px) {
            .masonry {
                height: 1600px;
            }
        }
    </style>
<body>
    <div class="container">
        <div class="item">
            <div class="item_content content-lar"> 1 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 2 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 3 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 4 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 5 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 6 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 7 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 8 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 9 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 10 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 11 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 12 我中等 </div>
        </div>
        <!-- more items -->
    </div>
</body>
复制代码

缺点:两种实现方式都只能从上往下排列,不能从左往右排列


作者:Rashomon
链接:https://juejin.im/post/5e15ab745188253a8f656c7f
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



Tags:css   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
Chrome 正在试验 CSS @container 查询器功能,这是由 Oddbird 的 Miriam Suzanne 和一群网络平台开发者支持的 CSS 工作组 Containment Level 3 规范。@container 查询器使我...【详细内容】
2021-12-23  Tags: css  点击:(8)  评论:(0)  加入收藏
CSS选择器很强大下面是我在工作中使用最多的一些选择器:相邻元素, 英文称为sibling, 也就是兄弟姐妹的意思.其实很形象, 比喻两个dom是相邻的.但是邻居很多, 紧密相邻的, 还...【详细内容】
2021-12-23  Tags: css  点击:(6)  评论:(0)  加入收藏
这篇文章重点介绍一些强大的 CSS 代码片段,用它们可以执行一些繁重的布局编程工作,还能帮助我们构建强大的新式CSS布局。这里我们会介绍10 种新式 CSS 布局和大小调整技术,突出...【详细内容】
2021-12-21  Tags: css  点击:(9)  评论:(0)  加入收藏
CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所...【详细内容】
2021-12-06  Tags: css  点击:(15)  评论:(0)  加入收藏
作者:前端进阶者来源:前端进阶学习交流一、前言 我们经常在网页上 ,游戏界面加载时会看到加载进度条的效果,我们往往会以为这些加载进度条的效果,很难实现。今天教大家JS+CSS结合...【详细内容】
2021-11-05  Tags: css  点击:(45)  评论:(0)  加入收藏
<template> <div> <div class="triangle"></div> </div></template><style scoped> .triangle { width: 0; height: 0; border-width: 20px; border-styl...【详细内容】
2021-11-04  Tags: css  点击:(40)  评论:(0)  加入收藏
一提起图标,大家可能第一个会想到PS、美工等词语,但很多小图标现在根本都不需要再打开PS了。1、常见的括号( 前进或后退“>” ).arrow{ width:12rpx; height:12rpx; border-...【详细内容】
2021-10-12  Tags: css  点击:(55)  评论:(0)  加入收藏
在过去的几年里,Web开发已经变得非常流行。每年都会发布许多前端框架,Bootstrap一直是最受欢迎的一个,但是,还有许多其他的框架,你可能没有听说过,但绝对值得一试。想学的同学可以...【详细内容】
2021-09-27  Tags: css  点击:(74)  评论:(0)  加入收藏
水平和垂直对齐第一种方式 : grid + place-items .parent { display: grid; place-items: center; } /*注: place-items 是 justify-items 和 align-items 的简写属性 */...【详细内容】
2021-09-02  Tags: css  点击:(84)  评论:(0)  加入收藏
5个有用的 CSS 布局生成器1、 cssgr.id如果你是前端开发人员,这是一个非常有用的网站。你可以首先指定所需的行数和列数,或者在给定的选项中进行选择,然后为其生成代码。这使你...【详细内容】
2021-08-26  Tags: css  点击:(144)  评论:(0)  加入收藏
▌简易百科推荐
Chrome 正在试验 CSS @container 查询器功能,这是由 Oddbird 的 Miriam Suzanne 和一群网络平台开发者支持的 CSS 工作组 Containment Level 3 规范。@container 查询器使我...【详细内容】
2021-12-23  前端晚间课    Tags: CSS   点击:(8)  评论:(0)  加入收藏
CSS选择器很强大下面是我在工作中使用最多的一些选择器:相邻元素, 英文称为sibling, 也就是兄弟姐妹的意思.其实很形象, 比喻两个dom是相邻的.但是邻居很多, 紧密相邻的, 还...【详细内容】
2021-12-23  不只是个小前端    Tags:CSS选择器   点击:(6)  评论:(0)  加入收藏
这篇文章重点介绍一些强大的 CSS 代码片段,用它们可以执行一些繁重的布局编程工作,还能帮助我们构建强大的新式CSS布局。这里我们会介绍10 种新式 CSS 布局和大小调整技术,突出...【详细内容】
2021-12-21  前端晚间课    Tags:CSS   点击:(9)  评论:(0)  加入收藏
CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所...【详细内容】
2021-12-06  粤嵌教育    Tags:v   点击:(15)  评论:(0)  加入收藏
作者:前端进阶者来源:前端进阶学习交流一、前言 我们经常在网页上 ,游戏界面加载时会看到加载进度条的效果,我们往往会以为这些加载进度条的效果,很难实现。今天教大家JS+CSS结合...【详细内容】
2021-11-05  Nodejs开发    Tags:CSS   点击:(45)  评论:(0)  加入收藏
<template> <div> <div class="triangle"></div> </div></template><style scoped> .triangle { width: 0; height: 0; border-width: 20px; border-styl...【详细内容】
2021-11-04  荣邦小伙917    Tags:css   点击:(40)  评论:(0)  加入收藏
一提起图标,大家可能第一个会想到PS、美工等词语,但很多小图标现在根本都不需要再打开PS了。1、常见的括号( 前进或后退“>” ).arrow{ width:12rpx; height:12rpx; border-...【详细内容】
2021-10-12  滇東小贰锅    Tags:css   点击:(55)  评论:(0)  加入收藏
在过去的几年里,Web开发已经变得非常流行。每年都会发布许多前端框架,Bootstrap一直是最受欢迎的一个,但是,还有许多其他的框架,你可能没有听说过,但绝对值得一试。想学的同学可以...【详细内容】
2021-09-27  粤嵌教育    Tags:CSS框架   点击:(74)  评论:(0)  加入收藏
水平和垂直对齐第一种方式 : grid + place-items .parent { display: grid; place-items: center; } /*注: place-items 是 justify-items 和 align-items 的简写属性 */...【详细内容】
2021-09-02  又菜又爱学习的程序员    Tags:CSS   点击:(84)  评论:(0)  加入收藏
5个有用的 CSS 布局生成器1、 cssgr.id如果你是前端开发人员,这是一个非常有用的网站。你可以首先指定所需的行数和列数,或者在给定的选项中进行选择,然后为其生成代码。这使你...【详细内容】
2021-08-26  程序员文周    Tags:css布局   点击:(144)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条