css的经典问题

zhiwei 发布于2019-08-23 12:16 / 1291人阅读

摘要：最外层的是必须的，是的百分比参考物。网上其他的文章需要给和加，试了下不加也可以。缺点如果页面要内嵌在里的话，手机在里的系统标题会挡住页面顶部的一部分，设置了也没好使，应该是是导致的，无奈只能采取下面的方法。

布局问题 水平垂直居中

.box父元素，.innerbox子元素


     css设置元素水平垂直居中4显示

1,子元素不要求宽高

.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ffffd; 
    margin: 50px auto; 
    position: relative;
}
.innerbox{
    position: absolute; 
    left: 50%; 
    top: 50%; 
    border: 5px solid #f00; 
    transform: translate(-50%,-50%);
}

.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ffffd; 
    margin: 50px auto; 
    position: relative;
}
.innerbox{
    position: absolute; 
    left: 50%; 
    top: 50%; 
    border: 5px solid #f00; 
    width:20px;
    height:20px;
    margin-left:-10px;
    margin-top:-10px
}

.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ffffd; 
    margin: 50px auto; 
    position: relative;
}
.innerbox{
    position: absolute; 
    left: 0; 
    top: 0; 
    right:0;
    bottom:0;
    border: 5px solid #f00; 
    width:20px;
    height:20px;
    margin:auto
}

4，
flex布局

.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ffffd; 
    margin: 50px auto; 
    display: flex;
    align-items:center;
    justify-content: center;
}
.innerbox{
    width:50px;
    height:50px;
    background: mediumspringgreen;
}

5，

.cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border:1px solid #666;
}
.child{
    width:50px;
    height:100px;
    display: inline-block;
}

     我爱你

6,
水平居中
法一：子元素是非块级 text-align:center
法二：子元素是块级元素margin:0 auto;此法要求块级有宽度，但有时未知宽度，则可用width:fit-content
法三：父集relative 向左移动一半。子集relative，向右移动一半或向左移动-50%。最外层的#macji是必须的，是.macji-skin的百分比参考物。网上其他的文章需要给.macji-skin 和li加floatleft，试了下不加也可以。

#macji{
    width:100%;
    height:80px;
    background-color:#eee;
}

#macji .macji-skin{
    display: inline-block;
    position:relative;
    left:50%;
}

#macji .macji-skin li{
    position:relative;
    right:50%;
    display: inline-block;
    margin:10px;
    padding:0 10px;
    border:solid 1px #000;
    line-height:60px;
}

     
          列表一

7,垂直居中
line-height vertical-align

一列或多列定宽，另一列自适应

//tip1
.left{
    float: left;
    width: 100px;
}
.right{
    margin-left: 120px;
}
34343434
22222

//tip2
.left{
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
34343434
22222
//tip3
.parent{
    display: table; 
    width: 100%;
    table-layout: fixed;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 100px;
    padding-right: 20px;
}

   34343434
   22222

//tip4
.parent{
    display: flex;
}
.left{
    width: 100px;
    padding-right: 20px;
}
.right{
    flex: 1;
}

   34343434
   22222

一列或多列不定宽，一列自适应

//tip1
.left,.center{
    float: left;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}
34343434
34343434
22222
//tip2
.parent{
    display: table; 
    width: 100%;
}
.left,.right{
    display: table-cell;
}
.left{
    width: 0.1%;
    padding-right: 20px;
}

   34343434
   22222

//tip3
.parent{
    display: flex;
}
.left,.center{
    width: 100px;
    padding-right: 20px;
}
.right{
    flex: 1;
}

   34343434
   34343434
   22222

等分

1,等宽

//tip1
.parent{
    margin-left: -20px;
}
.column{
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}

     1
     2
     3
     4

//tip2
.parent-fix{
    margin-left: -20px;
}
.parent{
    display: table;
    width:100%;
    table-layout: fixed;
}
.column{
    display: table-cell;
    padding-left: 20px;
}

  
     1
     2
     3
     4

//tip3



    item1
    item2
    item3
    item1
    item2

n从0开始，选择第一个div并且是倒数第几个（暗示总共个数）以及它的邻居元素

效果如图
少于5个是一行显示

多于5个时，每行三个

//tip4
效果图

.main {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.item {
    display: inline-block;
    height:50px;
    width:200px;
}
.empty{
    height: 0;
    visibility: hidden;
}

            1
            2
            3
            4
            em
            em

就是要求多个元素并排排列，多出来的居左，empty的数量不小于单行最多元素的数量即可。试了下不加empty元素也可以达到呢。

2，等高

//tip1
.parent{
    overflow: hidden;
}
.left,.right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.left{
    float: left; width: 100px;
}
.right{
    overflow: hidden;
}

            34343434
        
            2323
            
        
        
  //tip2
.parent{
    display: table; 
    width: 100%;
}
.left{
    display:table-cell; 
    width: 100px;
    margin-right: 20px;
}
.right{
    display:table-cell; 
}
//tip3
.parent{
    display:flex;
    width: 100%;
}
.left{
    width: 100px;
}
.right{
    flex:1;
}

圣杯布局左右定宽，中间自适应

.wrapper {padding: 0 100px 0 100px; overflow:hidden;}
.col {position: relative; float: left;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}



    main
    left
    right

双飞翼布局（圣杯布局的不足屏幕窄时 dom会掉下来弥补）

.wrapper {padding: 0; overflow:hidden;}
.col {float: left;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}

    
        main
    
    left
    right

容易忘记的样式

::-webkit-input-placeholder{
    font-size:.35rem;
    color:#bdbdbd;
    text-align: center
}    /* 使用webkit内核的浏览器 */
:-moz-placeholder{
    font-size:.35rem;
    color:#bdbdbd;
    text-align: center
}                  /* Firefox版本4-18 */
::-moz-placeholder{
    font-size:.35rem;
    color:#bdbdbd;
    text-align: center
}                  /* Firefox版本19+ */
:-ms-input-placeholder{
    font-size:.35rem;
    color:#bdbdbd;
    text-align: center
}
::-ms-input-placeholder{
    font-size:.35rem;
    color:#bdbdbd;
    text-align: center
}
前面可加具体的input的选择器

不同宽度屏幕的一些适配方案

1，运用media媒体查询
2，运用max-width、margin:0 auto

用absolute模拟fixed定位


  Error
  



  
  这是一个可以滚动的div

iphonex的刘海胡子兼容

网页的内容只在安全区域内，不希望有元素出现的刘海胡子处。

/* iOS 11.0 */
constant(safe-area-inset-top)：在Viewport顶部的安全区域内设置量（CSS像素）
constant(safe-area-inset-bottom)：在Viewport底部的安全区域内设置量（CSS像素）
constant(safe-area-inset-left)：在Viewport左边的安全区域内设置量（CSS像素）
constant(safe-area-inset-right)：在Viewport右边的安全区域内设置量（CSS像素）
/* iOS 11.2 */
env(safe-area-inset-top)：在Viewport顶部的安全区域内设置量（CSS像素）
env(safe-area-inset-bottom)：在Viewport底部的安全区域内设置量（CSS像素）
env(safe-area-inset-left)：在Viewport左边的安全区域内设置量（CSS像素）
env(safe-area-inset-right)：在Viewport右边的安全区域内设置量（CSS像素）

viewport-fit必须为cover 否则constant和env不生效
viewport-fit 有3个值：
contain: 可视窗口完全包含网页内容（左图）
cover：网页内容完全覆盖可视窗口（右图）
auto：默认值，跟 contain 表现一致

底部有按钮fixed页面实例

在正常手机，按钮在底部，在iphonex，在安全区底部。

缺点bug：如果页面要内嵌在app里的话，iphonexr iphone8p手机在app里的系统标题会挡住页面顶部的一部分，设置了padding-top也没好使，应该是viewfits是cover导致的，无奈只能采取下面的方法。

另一种方法是通过媒体查询，这种方法局限在于如果ipx出了好多款，那么media不限制于以下一种


    
    

@media only screen and (-webkit-device-pixel-ratio: 3) and (device-height: 812px) and (device-width: 375px) {
  .has-bottombar {
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 34px;
  }

  .has-bottombar:after {
    content: "";
    z-index: 9999;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 34px;
    background: #fff;
  }
}

GPU云服务器云服务器 html与css入门经典经典的学习算法的经典经典网络的特点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98234.html

CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
Web前端经典面试试题（二）

摘要：上次由于时间有限只分享了一部分的前端面试题，所以本篇继续分享前端经典面试试题一栈和队列的区别栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。上次由于时间有限只分享了一部分的前端面试题，所以本篇继续分享前端经典面试试题一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。队列先进先出，栈先进后出。栈只允许在表尾一端进行插入和删...

rickchen 2019-08-29 17:04 评论0 收藏0
Web前端经典面试试题（二）

摘要：上次由于时间有限只分享了一部分的前端面试题，所以本篇继续分享前端经典面试试题一栈和队列的区别栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。上次由于时间有限只分享了一部分的前端面试题，所以本篇继续分享前端经典面试试题一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。队列先进先出，栈先进后出。栈只允许在表尾一端进行插入和删...

venmos 2019-08-02 11:47 评论0 收藏0
Web前端经典面试试题（二）

摘要：上次由于时间有限只分享了一部分的前端面试题，所以本篇继续分享前端经典面试试题一栈和队列的区别栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。上次由于时间有限只分享了一部分的前端面试题，所以本篇继续分享前端经典面试试题一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的。队列先进先出，栈先进后出。栈只允许在表尾一端进行插入和删...

Kross 2019-08-23 12:30 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0