CSS中的一些小实现(1)_用简单的css实现1.1-CSDN博客

本文链接：https://blog.csdn.net/u014728574/article/details/100553045

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) {…}//括号中输入类名