资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS3新增的伪类有哪些 与 居中div的多种方法

CSS3新增的伪类有哪些 与 居中div的多种方法

mcterry / 3687人阅读

摘要：新增伪类有那些选择属于其父元素的首个元素选择属于其父元素的最后元素属于父元素的特定类型的唯一子元素属于父元素的唯一子元素的每个元素选择父元素的第二个子元素在元素之前添加内容在元素之后添加内容已启用控制表单为禁用状态，不可点击

CSS3新增伪类有那些？

p:first-of-type:选择属于其父元素的首个

元素

p:last-of-type:选择属于其父元素的最后

元素

p:only-of-type:属于父元素的特定类型的唯一子元素

p:only-child:属于父元素的唯一子元素的每个

元素

p:nth-child(2):选择父元素的第二个子元素

::after 在元素之前添加内容

::before 在元素之后添加内容

:enabled 已启用

:disabled 控制表单为禁用状态，不可点击

:checked 单选框或复选框被选中

如何居中div

第一种方式：给div设置一个宽度，然后添加margin:0 auto属性.

</>复制代码 
  1. div{
  2.   width:200px;
  3.   margin:0 auto;
  4. }

第二种方式：让绝对定位的div居中

</>复制代码 
  1. div{
  2.   position:absolute;
  3.   width:300px;
  4.   height:300px;
  5.   margin:auto;
  6.   top:0;
  7.   left:0;
  8.   bottom:0;
  9.   right:0;
  10.   background-color:pink;
  11. }

第三种方式：水平垂直居中一

</>复制代码 
  1. div{
  2.   position:absolute;
  3.   width:500px;
  4.   height:300px;
  5.   top:50%;
  6.   left:50%;
  7.   margin:0 0 0 -250px;
  8.   background-color:pink;
  9. }

第四种方式：未知容器的宽高，利用"transform"属性

</>复制代码 
  1. div{
  2.   position:absolute;
  3.   width:500px;
  4.   height:300px;
  5.   top:50%;
  6.   left:50%;
  7.   transform:translate(-50%,-50%)
  8.   background-color:pink;
  9. }

第五种方式：利用flex布局，需考虑兼容性

</>复制代码 
  1. container{
  2.   display:flex;
  3.   align-item:center;/*垂直居中*/
  4.   justify-content:center;/*水平居中*/
  5. }
  6. container div{
  7.   width:100px;
  8.   height:100px;
  9.   background-color:pink
  10. }

每日两道前端面试题20190307
希望睡一觉起来 阳光会出来.

GPU云服务器 云服务器 html伪类有哪几种 多种方法辨别云主机 DIV绝对居中 div 居中html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117479.html

相关文章

  • 前端面试题2（CSS）

    摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。 前端面试之CSS display: none; 与 visibility: hidden; 的区别 联系：它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任...

    MangoGoing 评论0 收藏0

  • 前端面试题2（CSS）

    摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。 前端面试之CSS display: none; 与 visibility: hidden; 的区别 联系：它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任...

    zorro 评论0 收藏0

  • 前端面试题2（CSS）

    摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。 前端面试之CSS display: none; 与 visibility: hidden; 的区别 联系：它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任...

    Rocture 评论0 收藏0

  • css基础

    摘要：在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。 CSS display: none; 与 visibility: hidden; 的区别 联系：它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；vi...

    JinB 评论0 收藏0

发表评论

登陆后可评论

0条评论

mcterry

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<