Comments (4)
垂直居中
- 1、line-height
适用情景:单行文字垂直居中
<div class="content">Lorem ipsam.</div>
<style>
.content{
width: 400px;
background: #ccc;
line-height:100px;
margin: auto;
}
</style>
- 2、Line-height + inline-block
适用情景:多对象的垂直居中技巧
多行元素看做一行,设置为 inline-block ;外层元素设置 inline-height 来代替设置内层行高;
<div class="box box2">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔! </div>
</div>
<style>
h2{
text-align: center;
}
.box{
width: 500px;
border: 1px solid #f00;
margin: auto;
line-height: 200px;
text-align: center;
}
.box2 .content{
display: inline-block;
height: auto;
line-height:1;
width: 400px;
background: #ccc;
}
</style>
- 3、:before + inline-block
适用情景:多对象的CSS垂直居中技巧
子元素居中可以不需要特别设定高度,我们将利用:before伪类元素设定为100%高的inline-block;子元素设置为inline-block,及vertical-aline:middle; 缺点:inline-block 元素箭4,5像素间距需要处理;
<h2>3.:before + inline-block</h2>
<div class="box box3">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔!
</div>
</div>
<div class="box box3">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔!
</div>
</div>
<div class="box box3">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔!
</div>
</div>
<style>
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
text-align: center;
}
.box::before{
content:'';
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
.box .content{
width: 400px;
background: #ccc;
display: inline-block;
vertical-align: middle;
}
</style>
- 4、absolute + margin 负值
适用情景:多行文字的垂直居中技巧
<div class="box box4">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔! </div>
</div>
<style>
box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
position: relative;
}
.box4 .content{
width: 400px;
background: #ccc;
height: 70px;
position: absolute;
top:50%;
left: 50%;
margin-left: -200px;
margin-top: -35px;
}
</style>
- 5、absolute + margin auto
适用情景:多行文字的垂直居中技巧
当元素设置为绝对定位后,假设它是抓不到整体可运用的空间范围,所以margin:auto会失效,但当设置了top:0;bottom:0;时,绝对定位元素就抓到了可运用的空间了,这时margin:auto就生效了;
<div class="box box5">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔!
</div>
</div>
<style>
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
position: relative;
}
.content{
width: 400px;
background: #ccc;
height: 70px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
- 6、absolute + translate
适用情景:多行文字的垂直居中技巧
使用 css3 视觉上居中,类似于第 4 条
<style>
.box5 .content{
width: 400px;
background: #ccc;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
- 7、Flex + align-items
适用情景:多行文字的垂直居中技巧
只要设定父层display:flex以及设定次轴(cross axis)属性align-items:center 就好了;优点是此层不需要设定高度即可自动居中,且原始代码干净无比 - 8、Flex + :before + flex-grow
适用情景:多行文字的垂直居中技巧
Flex有多种方式可以让你把数据居中,适用Flex-grow的延展特性来达成,flex-direction:column直式排法,搭配:before伪元素适用flex-grow伸展值能够取得剩下所有空
<div class="box box8">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔! </div>
</div>
<style>
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.box:before{
content: '';
flex-grow: .5;
}
.content{
width: 400px;
background: #ccc;
}
</style>
- 9、Flex + margin
适用情景:多行文字的垂直居中技巧
由于Flex元素对空间解读的特殊性,我们只要在父层元素设定display:flex,接着在需要垂直居中的元素上设定margin:auto,即可自动居中
<div class="box box9">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔! </div>
</div>
<style>
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
}
.content{
width: 400px;
background: #ccc;
margin: auto;
}
</style>
- 10、Flex + align-self
适用情景:多行文字的垂直居中技巧
基本上就是对flex次轴cross axis 的个别对齐方式只要对单一子层元素设定align-self:center就能达成垂直居中的目的了。
<div class="box box10">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔! </div>
</div>
<style>
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
justify-content: center;
}
.content{
width: 400px;
background: #ccc;
align-self: center
}
</style>
- 11、Flex + align-content
适用情景:多行文字的垂直居中技巧
在正常的状况下,align-content 仅能对次轴多行flex item做居中,既然是多行子元素才能用,那我们就为单个子组件多加两个兄弟吧,使用:before以及:after 来让子元素增加到多个,这样就能使用flex的align-content属性来居中
<div class="box box11">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔! </div>
</div>
<style>
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.content{
width: 400px;
background: #ccc;
}
.box11:before,
.box11:after{
content: '';
display: block;
width:100%;
}
</style>
- 12、Grid + template
适用情景:多行文字的垂直居中技巧
CSS Grid最令人惊讶的就是这个template的功能了,简直就是把块元素当画布在使用,我们仅需要把模板设置成三列,就能搞定垂直居中了
<div class="box box12">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔! </div>
</div>
<style>
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
grid-template-rows: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
grid-template-areas:
'. . .'
'. amos .'
'. . .';
}
.content{
width: 400px;
background: #ccc;
grid-area: amos;
}
</style>
- 13、Grid + align-items
适用情景:多行文字的垂直居中技巧
在Flex中align-items是针对次轴cross axis作对齐,而在CSS Grid中则是针对Y轴做对齐,你可以把它想象成是表格中储存单元格的vertical-align属性看待,就可以很好理解了
<div class="box box13">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔! </div>
</div>
<style>
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
justify-content: center;
align-items: center;
}
.content{
width: 400px;
background: #ccc;
}
</style>
- 14、Grid + align-content
适用情景:多行文字的垂直居中技巧
CSS Grid的align-content跟Flex的align-content有点差异,CSS Grid对于空间的解释会跟Flex有一些些的落差,所以导致align-content在Flex中仅能针对多行元素起作用,但在Grid中就没这个问题
<div class="box box14">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔! </div>
</div>
<style>
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
justify-content: center;
align-content: center;
}
.content{
width: 400px;
background: #ccc;
}
</style>
- 15、Grid + align-self
适用情景:多行文字的垂直居中技巧
<div class="box box15">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔! </div>
</div>
<style>
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
justify-content: center;
}
.content{
width: 400px;
background: #ccc;
align-self: center;
}
</style>
- 16、Grid + place-items
适用情景:多行文字的垂直居中技巧
place-items这属性不知道有多少人用过,此属性是align-items与justify-items的缩写,简单的说就是水平与垂直的对齐方式,想当然的,设定center就能居中
<div class="box box16">
<div class="content">
立马来看Amos实际完成的 <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
CSS3精美相册效果 </a>
效果吧!別忘了拖拉一下窗口看看 RWD 效果喔! </div>
</div>
<style>
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
height: 150px;
margin: 0 auto;
place-items: center;
}
.content{
width: 400px;
background: #ccc;
}
</style>
- 17、Grid + place-content
适用情景:多行文字的垂直居中技巧
类似于 16 条 :place-items
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
height: 150px;
margin: 0 auto;
place-content: center;
}
18、Grid + margin
适用情景:多行文字的垂直居中技巧
from alexuse.
兼容 IE8 的三角
1. 使用 border 实现
<style>
.messageBox{
position: relative;
width: 240px;
height: 60px;
line-height: 60px;
background: #e9fbe4;
border: 1px solid #c9e9c0;
border-radius: 4px;
text-align: center;
color: #0c7823;
}
.triangleBorder{
position: absolute;
left: 30px;
overflow: hidden;
width: 0;
height: 0;border-width: 10px;border-style: solid dashed dashed dashed;
}
.tbBorder{
bottom: -20px;
border-color: #c9e9c0 transparent transparent transparent;
}
.tbBackground{
bottom: -19px;border-color: #e9fbe4 transparent transparent transparent;
}
</style>
<div class="messageBox">
<span>我是利用border属性实现的</span>
<div class="triangleBorder tbBorder"></div>
<div class="triangleBorder tbBackground"></div>
</div>
第2种:利用“♦ ”字符实现(谷歌浏览器显示不正常)
<style>
.messageBox{
position: relative;
width: 240px;
height: 60px;
line-height: 60px;
background: #e9fbe4;
box-shadow: 1px 2px 3px #e9f4e4;
border: 1px solid #c9e9c0;
border-radius: 4px;
text-align: center;
color: #0c7823;
}
.triangleBorder{
position: absolute;
left: 30px;
overflow: hidden;
width: 26px;
height: 26px;
font: normal 26px "SimSun";
}
.tbBorder{
bottom: -12px;
color: #c9e9c0;
}
.tbBackground{
bottom: -11px;color: #e9fbe4;
}
</style>
<div class="messageBox">
<span>我是利用♦字符实现的</span>
<div class="triangleBorder tbBorder">♦</div>
<div class="triangleBorder tbBackground">♦</div>
</div>
第3种
<style>
.triangle {
position: relative;
width: 100px;
height: 50px;
border: 2px solid #4ed621;
border-radius: 5px;
}
.triangle:before {
position: absolute;
content: "";
top: -10px;
left: 25px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #4ed621;
}
/* 白色覆盖*/
.triangle:after {
position: absolute;
content: "";
/*减少两像素*/
top: -8px;
left: 25px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
}
</style>
<div class="triangle"></div>
第4种
<style>
.box{
position: relative;
padding-top: 8px;
}
.con{
width: 200px;
height: 100px;
border: 1px skyblue solid;
border-radius: 3px;
background-color: skyblue;
}
.con-ret {
border: 7px solid transparent;
border-bottom-color: skyblue;
position: absolute;
left: 10px;
top: -6px;
}
<style>
<div class="box">
<div class="con-ret"></div>
<div class="con"></div>
</div>
第5种
<style>
.main{
width: 120px;
padding: 10px;
font-size: 14px;
color: #333;
line-height: 28px;
background: #F0981C;
border: 2px solid #FF0000;
position: relative;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius: 5px;
display: inline-block;
}
.main:before,.main:after{
content: ' ';
border-top: 12px solid #FF0000;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
position: absolute;
bottom: -12px;
left: 20px;
}
.main:after{
border-top: 12px solid #F0981C;
bottom: -9px;
}
</style>
<div class="main">
<p>这是内容这是内容这是内容</p>
</div>
from alexuse.
CSS 计数器 css counter
<div>
<h3>你好</h3>
<h3>hello</h3>
<h3>world css 计数器</h3>
</div>
<style>
div {
/*counter-reset: title; /* 重置计数器成0 */
counter-reset: title 5; /*起始值订为 5 */
}
h3:before {
/* counter-increment: title; /* 增加计数器值 */
counter-increment: title 3; /* 增加计数器值 递增值为3 */
content: "Title "counter(title) ": "; /* 显示计数器 */
}
/* 更换格式 */
div {
counter-reset: title; /* 重置计数器成0 */
}
h3:before {
counter-increment: title; /* 增加计数器值 */
content: "Title "counter(title, lower-latin) ": "; /* 显示计数器 */
}
</style>
<ol>
<li>item1</li>
<li>item2
<ol>
<li>item1</li>
<li>item2
<ol>
<li>item1</li>
<li>item2
<ol>
<li>item1</li>
<li>item2</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
</ol>
<style>
/* OL { counter-reset: item }
LI { display: block }
LI:before {
content: counter(item) ". ";
counter-increment: item
} */
OL { counter-reset: item }
LI { display: block }
LI:before {
content: counters(item, '.') " ";
counter-increment: item;
}
</style>
<dl>
<dt>example</dt>
<dd>example</dd>
<dd>example</dd>
<dd>example</dd>
<dt>example2</dt>
<dd>example2</dd>
<dd>example2</dd>
<dd>example2</dd>
<dd>example2</dd>
</dl>
<style>
dl { counter-reset:test1 0;}
dt { counter-increment: test1; counter-reset: test2 0;}
dt:before{ content:counter(test1)"、";}
dd{ counter-increment:test2;}
dd:before{
content:counter(test1)"-"counter(test2)"、";
}
</style>
使用场景
- 场景 1:嵌套列表 eg: 文章大纲
- 场景 2:已经勾选的复选框数量 eg:通过 checked 伪类,我们可以检查复选框是否被选中,选中的话,我们计数器的数值就会增加。
- 场景 3:自动追踪文档条目 eg:需要处理一些重复元素的时候,并且你同样想统计他们的数量
from alexuse.
less
循环
//less语法,from start to end ,end值不包括在里面
@for $i from 1 to 5 {
.width#{$i} {
width: $i * 1%;
}
}
//转成css后的样式
.width1{
width:1%;
}
.width2{
width:2%;
}
.width3{
width:3%;
}
.width4{
width:4%;
}
//less语法,from start through end ,end值包括在里面
@for $i from 1 through 5 {
.width#{$i} {
width: $i * 1%;
}
}
//转成css后的样式
.width1{
width:1%;
}
.width2{
width:2%;
}
.width3{
width:3%;
}
.width4{
width:4%;
}
.width5{
width:5%;
}
$list: 1 2 3 4 5; //$list 就是一个列表
@mixin images {
@each $item in $list {
.img#{$item} {
background-image: url("/assets/img/icon_#{$item}.png");
}
}
}
.store {
@include images;
}
css编译后的样式
.store .img1{background-image: url("/assets/img/icon_1.png");}
.store .img2{background-image: url("/assets/img/icon_2.png");}
.store .img3{background-image: url("/assets/img/icon_3.png");}
.store .img4{background-image: url("/assets/img/icon_4.png");}
.store .img5{background-image: url("/assets/img/icon_5.png");}
// 定义函数
.backgroundcard(@className,@pngName){
.@{className}{
background: url("./resource/@{pngName}.png") top/100% no-repeat;
}
}
@bgcardList:a,b,c,d,e,f,g;
.loop(@i) when (@i < length(@bgcardList)+1){
.backgroundcard(extract(@bgcardList, @i),extract(@bgcardList, @i));
.loop(@i+1);
}
.loop(1);
+ 列表函数
- 获取列表的长度 length(@bgcardList) //7
- 获取列表元素 extract(@bgcardList, 3) //c
+ 循环函数
- loop定义循环次数,when条件判断,符合进入函数,不符合不进入函数。之后次数+1,形成循环。
- loop函数调用,直接传值1。
from alexuse.
Related Issues (20)
- css 样式问题 HOT 7
- js HOT 23
- TCP/IP HOT 1
- Web高效编程与优化
- serializeArr 转为 serializeJson
- 关于重构 HOT 1
- 从浏览器输入网址到页面展示完成发生了什么
- Echarts HOT 1
- layui 使用遇到的问题 HOT 3
- 多文件上传 jquery.MultiFile
- 常用正则 HOT 1
- 隐藏 表单记录 多选框选中
- node 相关
- js 判断浏览器类型以及语言
- GIT HOT 2
- 工具使用
- 设计模式
- js高级(第三版) HOT 4
- 微信小程序 HOT 15
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from alexuse.