CSS中的一些小实现(1)

CSS 专栏收录该内容
2 篇文章 0 订阅

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>

在这里插入图片描述

结构化伪类

  1. 以下选择符可以用于在用div创建表单,导航栏的时候,修饰记录的样式
    :first-child第一项
    :last-child最后一项
    nth-child 可解决表单记录间颜色不同的样式 如:
    .nav-Link:nth-child(odd){}//选择奇数的项
    .nav-Link:nth-child(even)//选择复数的项

  2. 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{…}

  3. 表示"取反"的:not, “非…”,例如:
    .a-div:not(.not-me) {…}//括号中输入 类名

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值