子绝父相
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
利用子绝父相来实现一种比较老的居中方式:1.明确宽度;2.定位左边到容器的中间位置;3.margin-left负值来左移元素的一半,实现元素容器居中
<style>
.container{
position: relative;
}
.item{
position: absolute;
background-color: #0F9E5E;
display: inline-block;
width: 90px;
left: 50%;
margin-left: -45px;
height: 10px;
}
</style>
<div class="container">
<div class="item"></div>
</div>
小三角
思路很简单,就是输入法输入一个菱形,然后隐藏掉一半就行了。
<style rel="stylesheet">
.tri:before{
content: '◇';
line-height: 1;
font-size: 30px;
display: inline-block;
height: 15px;
overflow: hidden;
}
</style>
<span class="tri"></span>
+ 和 ~ 选择器
div+p:选择紧接在 <div> 元素之后的 一个 <p> 元素。
p~ul:选择 <p> 元素后的 所有 <ul> 元素。
应用场景:选中第一个以为的所有元素。以下两种方式都可以实现
<style>
/*.item ~ .item*/
.item + .item{
color: red;
}
</style>
<div class="item first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
运行结果:
1
2
3
4
行高和字体大小一致
line-height:1
容器半透明,内容不透明
使用opacity的话会导致容器以及内容都透明,使用rgba可以实现容器透明,但内容不透明
<style>
.container{
background-color: rgba(99,99,99,0.5);
}
</style>
<div class="container">
123131
</div>
子类选择器
:nth-child 和 :first-child 等只能作用在元素选择器上,如
不需要flex的stick footer
<div id="box"> <div id="up">1</div> <div id="down">2</div> </div>
*{ margin: 0; padding: 0; box-sizing: border-box; } #box{ position: absolute; height: 100%; width: 100%; } #up{ padding-bottom: 200px; height: 100%; background: green; } #down{ margin-top: -200px; background: gray; height: 200px; }
以上border box 一句很重要。