结构与布局-css垂直居中以及内容、背景自适应、表格定宽等技巧

结构与布局

css垂直居中

css对于水平居中对他的父元素应用text-aligin: center, 垂直居中块级元素元素就相对于自身元素了margin:auto

固定宽高

第一种基于定位的垂直居中

<style>
    /* 固定宽高 */
    /* css对于水平居中对他的父元素应用text-aligin: center, 垂直居中块级元素元素就相对于自身元素了margin:auto */
    /* 第一种基于定位的垂直居中 */
    *{
        margin: 0px;
        padding: 0px;
       
    }
    body{
      background-color: darkkhaki;
      font-size: 14px;
    }
    /* 核心代码块 */
     main{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -9em;
        margin-top: -3px;
        width: 18em;
        height: 6em;
        background-color: #000;
        color: rgb(134, 125, 125);
     }
     /* 文字居中 */
     main h1, main p{
         text-align: center;
     }
    </style>

 <!-- 第一种基于定位的垂直居中 -->
   <main>
       <h1>我居中了没有</h1>
       <p>谢天谢天我居中了</p>
   </main>

效果如下：

这段代码本质做了几个事情：先把这个元素的左上角放到视口（或最近，具有定位属性的祖先元素）正中心，然后再利用负边距分别向上和左移动

（移动距离分别是它自身宽高的一半从而把元素放置在视口的正中心）

第二种基于定位的垂直居中

 /* 第二种基于定位的垂直居中 */
    /* 核心代码块  借助强大的calc函数 代码还能省两行*/
      main{
        position: absolute;
        /* top: calc(50%-3em); 注意-两边要有空格，否则css无效
        left: calc(50%-9em); */
        /* top: 50%;
        left: 50%;
        margin-left: -9em;
        margin-top: -3px; */
        top: calc(50% - 3em);
        left: calc(50% - 9em);
        width: 18em;
        height: 6em;
        background-color: #000;
        color: rgb(134, 125, 125);
     }

不固定宽高

第三种基于定位的垂直居中

 /* 不固定宽高 */
    /* 第三种种基于定位的垂直居中 */
    main{
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        background-color: #000;
        color: rgb(134, 125, 125);
     }

看着容器完美居中了

上面方法其实也有需要注意的地方：

1、都依赖绝对定位

2、高度超视图窗口顶部会被裁掉，见下图

3、某些浏览器可能会导致元素显示模糊因为元素可能会被放置在半个像素上。这个问题可以用transform-style: preserve-3d来修复

文字多的时候首部截掉了

尾部也截张图对比一下

固定宽高

第四种基于视口

/* 固定宽高 */
    
    /* 第四种 基于视口*/
    main{
        width: 18em;
        padding: 1em 1.5em;
        /* 上边 | 左边右边 | 下边 */
        margin: 50% auto 0;  /*margin上设置top 50%*/
        transform: translateY(-50%); /*根据自身的一半向上移动*/
        background-color: #000;
        color: rgb(134, 125, 125);
    }

看起来好像是没什么问题，让我们看下效果

这个让我疑惑但是看到书上显示中部偏下，我运行浏览器效果中部偏上的，transform: translateY(-50%)去掉反而更像是居中的效果.

transform: translateY(-50%)去掉反而更像是居中的效果

之所以会有偏差是因为 margin是以父元素的宽度作为解析的即使对margin-top和margin-bottom也是这样

CSS的值与单位（第三版）定义了一套新的单位称为视口相关的长度单位：

1vw实际表示视口宽度的1% 不是100%，1vh实际表示视口高度的1%

当视口宽度小于高度时，1vmin等于1vw,否则等于1vh.(这句有点绕没太懂，记录下)

当视口宽度小大于高度时，1vmax等于1vw,否则等于1vh.(这句有点绕没太懂，记录下)

main{
        width: 18em;
        padding: 1em 1.5em;
        margin: 50vh auto 0;  
        transform: translateY(-50%);
        background-color: #000;
        color: rgb(134, 125, 125);
    }
    /*这种效果堪称完美不过只适用于视口中居中场景*/

贴下完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中几种方法</title>
    <style>
    /* 固定宽高 */
    /* css对于水平居中对他的父元素应用text-aligin: center, 垂直居中块级元素元素就相对于自身元素了margin:auto */
    /* 第一种基于定位的垂直居中 */
    *{
        margin: 0px;
        padding: 0px;
       
    }
    body{
      background-color: darkkhaki;
      font-size: 14px;
    }
    /* 核心代码块 */
     /* main{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -9em;
        margin-top: -3em;
        width: 18em;
        height: 6em;
        background-color: #000;
        color: rgb(134, 125, 125);
     } */
     /* 文字居中 */
     main h1, main p{
         text-align: center;
     }
    /* 这段代码本质做了几个事情： 先把这个元素的左上角放到视口（或最近，具有定位属性的祖先元素）正中心，然后再利用负边距分别向上和左移动
    （移动距离分别是它自身宽高的一半从而把元素放置在视口的正中心） */
    /* 第二种基于定位的垂直居中 */
    /* 核心代码块  借助强大的calc函数 */
      /* main{
        position: absolute; */
        /* top: calc(50%-3em);
        left: calc(50%-9em); */
        /* top: 50%;
        left: 50%;
        margin-left: -9em;
        margin-top: -3px; */
        /* top: calc(50% - 3em);
        left: calc(50% - 9em);
        width: 18em;
        height: 6em;
        background-color: #000;
        color: rgb(134, 125, 125);
     } */
    /* 不固定宽高 */
    /* 第三种种基于定位的垂直居中 */
    /* main{
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        background-color: #000;
        color: rgb(134, 125, 125);
     } */
    /* 固定宽高 */
    
    /* 第四种 基于视口*/
    /* main{
        width: 18em;
        padding: 1em 1.5em; */
        /* 上边 | 左边右边 | 下边 */
        /*margin上设置top 50%*/
        /* margin: 50% auto 0;   */
         /*根据自身的一半向上移动*/
        /* transform: translateY(-50%); */
        /* background-color: #000;
        color: rgb(134, 125, 125);
    } */
     /*看起来好像是没什么问题，让我们看下效果*/
     /*这个让我疑惑  但是看到书上显示中部偏下， 我运行浏览器效果中部偏上的，transform: translateY(-50%)去掉反而更像是居中的效果.*/
     

     /*之所以会有偏差是因为 margin是以父元素的宽度作为解析的即使对margin-top和margin-bottom也是这样*/
     /*CSS的值与单位（第三版）定义了一套新的单位 称为视口相关的长度单位：
      1vw实际表示视口宽度的1% 不是100%，1vh实际表示视口高度的1% 
      当视口宽度小于高度时，1vmin等于1vw,否则等于1vh.(这句有点绕没太懂，记录下)
      当视口宽度小大于高度时，1vmax等于1vw,否则等于1vh.(这句有点绕没太懂，记录下)
     */
      main{
        width: 18em;
        padding: 1em 1.5em;
        margin: 50vh auto 0;  
        transform: translateY(-50%);
        background-color: #000;
        color: rgb(134, 125, 125);
    }
    /*这种效果堪称完美不过只适用于视口中居中场景*/


    </style>
</head>
<body>
   <!-- 第一种基于定位的垂直居中 -->
   <main>
       <h1>我居中了没有</h1>
       <p>谢天谢地我居中了</p>
  </main>
    
</body>
</html>

不固定宽高

第五种 Flexbox的解决方案

    /*最佳方案诞生*/
    body{
      /*  */
      display: flex;
      min-height: 100vh;
      margin: 0;
      /*  */
      background-color: darkkhaki;
      font-size: 14px;
    }
    main{
        /*  */
        margin: auto;
        /*  */
        background-color: #000;
        color: rgb(134, 125, 125);
    }

请注意当我使用Flexbox时候，margin:auto不仅水平垂直方向也是居中的

如果想让文字居中可以这样写

body{
      /*  */
      display: flex;
      min-height: 100vh;
      margin: 0;
      justify-content: center;
      align-items: center;
      /*  */
      background-color: darkkhaki;
      font-size: 14px;
    }
   
    
    main{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 18em;
        height: 10em;
        background-color: #000;
        color: rgb(134, 125, 125);
    }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中几种方法</title>
    <style>
    /* 固定宽高 */
    /* css对于水平居中对他的父元素应用text-aligin: center, 垂直居中块级元素元素就相对于自身元素了margin:auto */
    /* 第一种基于定位的垂直居中 */
    *{
        margin: 0px;
        padding: 0px;
       
    }
    /* body{
      background-color: darkkhaki;
      font-size: 14px;
    } */
    /* 核心代码块 */
     /* main{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -9em;
        margin-top: -3em;
        width: 18em;
        height: 6em;
        background-color: #000;
        color: rgb(134, 125, 125);
     } */
     /* 文字居中 */
     /* main h1, main p{
         text-align: center;
     } */
    /* 这段代码本质做了几个事情： 先把这个元素的左上角放到视口（或最近，具有定位属性的祖先元素）正中心，然后再利用负边距分别向上和左移动
    （移动距离分别是它自身宽高的一半从而把元素放置在视口的正中心） */
    /* 第二种基于定位的垂直居中 */
    /* 核心代码块  借助强大的calc函数 */
      /* main{
        position: absolute; */
        /* top: calc(50%-3em);
        left: calc(50%-9em); */
        /* top: 50%;
        left: 50%;
        margin-left: -9em;
        margin-top: -3px; */
        /* top: calc(50% - 3em);
        left: calc(50% - 9em);
        width: 18em;
        height: 6em;
        background-color: #000;
        color: rgb(134, 125, 125);
     } */
    /* 不固定宽高 */
    /* 第三种种基于定位的垂直居中 */
    /* main{
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        background-color: #000;
        color: rgb(134, 125, 125);
     } */
    /* 固定宽高 */
    
    /* 第四种 基于视口*/
    /* main{
        width: 18em;
        padding: 1em 1.5em; */
        /* 上边 | 左边右边 | 下边 */
        /*margin上设置top 50%*/
        /* margin: 50% auto 0;   */
         /*根据自身的一半向上移动*/
        /* transform: translateY(-50%); */
        /* background-color: #000;
        color: rgb(134, 125, 125);
    } */
     /*看起来好像是没什么问题，让我们看下效果*/
     /*这个让我疑惑  但是看到书上显示中部偏下， 我运行浏览器效果中部偏上的，transform: translateY(-50%)去掉反而更像是居中的效果.*/
     

     /*之所以会有偏差是因为 margin是以父元素的宽度作为解析的即使对margin-top和margin-bottom也是这样*/
     /*CSS的值与单位（第三版）定义了一套新的单位 称为视口相关的长度单位：
      1vw实际表示视口宽度的1% 不是100%，1vh实际表示视口高度的1% 
      当视口宽度小于高度时，1vmin等于1vw,否则等于1vh.(这句有点绕没太懂，记录下)
      当视口宽度小大于高度时，1vmax等于1vw,否则等于1vh.(这句有点绕没太懂，记录下)
     */
      /* main{
        width: 18em;
        padding: 1em 1.5em;
        margin: 50vh auto 0;  
        transform: translateY(-50%);
        background-color: #000;
        color: rgb(134, 125, 125);
    } */
    /*这种效果堪称完美不过只适用于视口中居中场景*/
    /* 不固定宽高 */
    /* 第五种 Flexbox的解决方案*/
    /*最佳方案诞生*/
    body{
      /*  */
      display: flex;
      min-height: 100vh;
      margin: 0;
      justify-content: center;
      align-items: center;
      /*  */
      background-color: darkkhaki;
      font-size: 14px;
    }
    /* main{
        margin: auto;
        background-color: #000;
        color: rgb(134, 125, 125);
    } */
    
    main{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 18em;
        height: 10em;
        background-color: #000;
        color: rgb(134, 125, 125);
    }
    
    </style>
</head>
<body>
   <!-- 第一种基于定位的垂直居中 -->
   <main>
       <!-- <h1>我居中了没有</h1> -->
       <p>谢天谢地我居中了</p>
  </main>
    
</body>
</html>

flexbox布局相关链接：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

grid布局相关链接：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

二、背景自适应

height不指定会自适应， width 不指定也能自适应呢

<style>
     *{
        margin: 0;
        padding: 0;
     }
     body{
         padding: 50px;
     }
     figure{
         border: 1px dashed #000;
     }
     p{
        line-height: 30px;
     }
     
    </style>

 <p>标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</p>
    <figure>
        <img src="./images/taozi.jpg" width="200" height="260" />
        <figcaption>桃子桃子桃子桃子桃子桃子桃子桃子桃子桃子桃子桃子桃子桃子</figcaption>
    </figure>
    <p>页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚页脚</p>

figure 加上浮动元素 float

float: left; 我看资料还多说浮动可以自适应做会影响布局

demo试了一下也不太行，布局影响了，也并没有根据图片自适应，有可能文字撑开了

display: inline-block;可以根据内容决定尺寸，但试了一下还是不行

css内部与外部尺寸模型新的规范 width和height定义新关键字，解析容器内部最大不可断行

元素的宽度（即最宽的的单词、图片或具有宽度的盒元素）

旧版浏览器一个平稳的回退样式，使用这个技巧同时，提供一个固定的max-width的值

 figure{
         border: 1px dashed #000;
         /* float: left; */
         /* display: inline-block; */
         /* 旧版浏览器一个平稳的回退样式，使用这个技巧同时，提供一个固定的max-width的值 */
         max-width: 300px;
         max-width: min-content;
         margin: auto;
     }
     figure > img{
         max-width: inherit;
     }

三、精确控制表格列宽


table{table-layout: fixed;} // 精确控制表格列宽
td(word-break: break-all; word-wrap:break-word;)
注释一下：
1.第一条table{table-layout: fixed;}，此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。
2.td{word-break: break-all}，一般用这句这OK了，但在有些特殊情况下还是会撑开，因此需要再加上后面一句(word-wrap:break-word;)就可以解决。
此样式可以让表格中的一些连续的英文单词自动换行。

/* 表格不换行word-break: keep-all;white-space:nowrap; */
    .cl-left2{ width: 33.3%;word-break: keep-all;white-space:nowrap;}
    .cl-right2{width: 66.6%;}
    /*  */
    .table3{
        table-layout: fixed;
        width: 100%;
    }

    .cl-left3{ width: 33.3%;word-break: keep-all;white-space:nowrap;}
    .cl-right3{width: 66.6%;}

word-break

CSS 属性 word-break 指定了怎样在单词内断行。

white-space

white-space CSS 属性是用来设置如何处理元素中的空白 (en-US)。

四、根据兄弟元素的数量来设置样式

/*  根据兄弟元素的数量来设置样式*/
    /* :only-child等于 :first-child:nth-last-child */
    ul{
       list-style: none;
       margin-top: 20px;
       overflow: hidden;
    }
   ul li{
       float: left;
       width: 50px;
       height: 50px;
       border-radius: 50%;
       background-color: cadetblue;
       display: flex;
        justify-content: center;
         align-items: center;
        color: #fff;
   }

/* */
   li:first-child:nth-last-child(1){
       background-color: coral
   }

/* li正好五项的时候命中所有li */
   li:first-child:nth-last-child(5),
   li:first-child:nth-last-child(5) ~ li
   {
       background-color:coral
   }
   /* 预处理器scss */
   /* @mixin n-items($n){
       &:first-child:nth-last-child(#{$n}),
       &:first-child:nth-last-child(#{$n}) ~ &{
           @content;
       }
   } */
   /* 调用 */
   li {
     @include n-items(5){
         /* 属性与值写在这里 */

     }
   }

 /*  根据兄弟元素的数量范围来匹配元素li:nth-child(n+b)从b开始所有的元素*/
  ul.ull2 li:nth-child(n+4)
   {
       background-color:coral
   }

 /*  当列表包含至少四个元素时候，命中所有元素*/
  ul.ull3 li:first-child:nth-last-child(n+4),
  ul.ull3 li:first-child:nth-last-child(n+4) ~ li
   {
       background-color:coral
   }

  /*  当列表包含最多包含四个元素时候，命中所有元素 */
  ul.ull4 li:first-child:nth-last-child(-n+4),
  ul.ull4 li:first-child:nth-last-child(-n+4) ~ li
   {
       background-color:coral
   }

更新中

posted @ 2021-08-14 17:05 pikachuWorld 阅读(164) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

sophia

多读书、会识人、去远方

结构与布局-css垂直居中以及内容、背景自适应、表格定宽等技巧