css比较经典的例子

go4it 发布于2019-08-29 11:20 / 1307人阅读

摘要：九宫格布局为之后每个格子都要向左向上移动做准备，以免第一列和第一行超出范围清除浮动垂直水平居中这一步很关键保证起作用如果不设置这一步，则只会显示一半，另一半被旁边格子的掩盖了清除浮动方法一添加空元素，方法二父

九宫格布局

CSS清除浮动 方法一：添加空元素，clear:both

1
2


.clear{clear:both;height:0;line-height:0;}

方法二：父级定义overflow:hidden;


    1
    2
    3


.outer {overflow:auto/hidden;zoom:1}

方法三：父级元素:after

.outer:after{
    clear:both;
    content:".";
    display:block;
    width:0;
    height:0;
    visibility:hidden; //允许浏览器渲染，但不显示
    overflow:hidden;
}

CSS垂直水平居中


    
        Content goes here

方法一：表格显示方式

#wrapper {
    display:table;
}
#cell {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
} 
.content {
    display:inline-block;
}

方法二：文本水平垂直居中

.content{
    height:200px; 
    line-height:200px;
    text-align:center;
} //只适合单行文字的水平垂直居中

方法三：盒模型的水平垂直居中 padding填充


    


.wrap {
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    width:400px;
    height:400px;
    background-color:#ccc;
}
.content{    
    width:100px;
    height:100px;
    padding:(400-100) / 2;  //平分padding
    background-color:#333;
    background-clip:content-box;
}

margin填充

.content{
    margin-left:auto;
    margin-right:auto;//实现了水平居中
    margin-top:(400-100)/2;//平分margin
}

方法四：left:50%;top:50%

.wrap{
    width:400px;
    height:400px;
    position:relative;
}
.content{
    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
}
.content {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}


  
    
  


.wrap {
    width:400px;
    height:400px;
    position:relative;
}
.content-relative {
    position:absolute;
    width:200px;
    height:150px;
    left:50%;
    top:50%;
    background-color:transparent;
}
.content-inner {
    width:100%;
    height:100%;
    position:relative; //避免继承absolute
    left:-50%;
    top:-50%;
}

方法五：text-align:center+absolute

.wrap{
    text-align:center;//由于content的display:inline-block,所以起作用，相当于content设置left:50%;
    width:400px;
    height:400px;
}
.content{
    position:absolute;
    display:inline-block;
    width:200px;
    height:200px;
    margin-left:-(100px/2);
    margin-top:(400px-100px)/2;
}

.wrap{
    position:relative;
    width:400px;
    height:400px;
}
.content{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    width:200px;
    height:200px;
}

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

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

SegmentFault 社区访谈 | Linxz：只会写 CSS 不会写 JS 的“伪”前端

摘要：所以，现在的我是一个只会不会写的伪前端。技术升华环节如何理解你的微博简介一个只会写不会写的伪前端工程师你觉得和学习起来各有什么难点呢微博我好久没去碰了，其实现在应该是写一个连都不会写，更不会写的伪前端工程师。 showImg(https://segmentfault.com/img/bVT0Y4?w=900&h=385); 上周没和大家见面，是去邀请大佬来访谈了(///▽///)社区访...

libxd 2019-08-29 13:17 评论0 收藏0
CSS 布局经典问题初步整理

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

Amos 2019-08-29 12:36 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS之BFC

摘要：比如说最常见的块级元素内联元素文档模型层叠样式模型盒子模型等，但还有一种规范经常会被排除在规范的认知之外。属于同一个的两个相邻的会发生重叠。计算的高度时，浮动元素也参与计算。垂直方向的距离由决定，利用这一点可以解决塌陷问题。对于很多初学者来说，CSS是不讲道理的，但是如果去深究，会发现其实CSS是有一定道理的。比如说最常见的块级元素、内联元素、文档模型、层叠样式模型、盒子模型CSS等...

Jinkey 2019-08-29 17:27 评论0 收藏0