CSS中的一些小实现(1)
水平、垂直居中
除了使用FlexBox布局的方法
1.使用 margin:0 auto先实现水平居中
<style>
.father {
height: 200px;
background: aquamarine;
}
.child {
margin: 0 auto;
height: 20%;
width: 50%; //设置宽度才能看出效果
background: antiquewhite;
}
</style>
...
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
"纯天然无添加"的 father 的宽度是填满整个body,高度却为0且是块级元素,这点有其父必有其子,child也是这样。
2. 使用“偏移术”,让child 子元素垂直居中:
<style>
//将默认样式去掉
html,body{
width:100%;
padding:0;
margin:0;
}
.father{
height: 300px;
background: aquamarine;
}
.child{
position: relative;//改变child的position
margin:0 auto;
height: 40px;
width: 50%;
background: antiquewhite;
top: 50%;//向下偏移
transform: translateY(-50%);//自身向上偏移50%
}
</style>
结构化伪类
-
以下选择符可以用于在用div创建表单,导航栏的时候,修饰记录的样式
:first-child第一项
:last-child最后一项
nth-child 可解决表单记录间颜色不同的样式 如:
.nav-Link:nth-child(odd){}//选择奇数的项
.nav-Link:nth-child(even)//选择复数的项 -
nth : 基于nth的规则: 当n为某个数字时,表示第n个; 当n不是某个数字时,如nth-child(2n+1)则表示会从第一项开始,然后每2个选一个:
nth-child(n)
nth-last-child(n)
nth-of-type(n) 区分类型 根据第一个匹配的元素作为类型标准,如.span-class:nth-of-type(-2n+3){…} n从0开始时第一个元素是什么 就从所选择的子项集合中选出与第一个元素匹配类型的子项。
nth-last-of-type(n) //最后第n项,或如 每4个选1 个但仅限于最后4项 .item:nth-child(4n+1):nth-last-child(-n+4) ~ .item{…} -
表示"取反"的:not, “非…”,例如:
.a-div:not(.not-me) {…}//括号中输入 类名