CSS3使用fit-content水平居中

时间: 2020-10-01阅读: 366标签: CSS3

当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大家介绍一个fit-content属性,不知道有没有同学用过,如果用过那么你可以略过这篇文章,没用过的同学就继续了,我也是第一次看到这个属性,之前不知道这个属性更不用说使用了,原来这个css属性是用来水平居中的,fit-content是css3中给width属性新加的一个属性值,它配合margin可以让我们轻松的实现水平居中的效果;一起来看下代码吧。
在不设置宽度,并且元素中含用float:left情况下居中,先看一段代码:

<div class="navbar center">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/">关于我们</a></li>
    <li><a href="/">产品展示</a></li>
    <li><a href="/">客户支持</a></li>
    <li><a href="/">联系我们</a></li>
  </ul>
</div>
li{float:left}

如此这个导航是不会居中的,当我们通过设置fit-content加上margin来做到居中。

ul{
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;
}

目前这个属性只支持Chrome和Firefox浏览器,下面是居中的代码:

width:-moz-fit-content;
width:-webkit-fit-content;

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/10020

css3特效_CSS3弹跳Loading加载动画特效的实现

今天给大家分享一款非常常用的css 加载动画,这款CSS3 Loading动画主要由几个小球通过规律的上下跳动,渐隐渐显而成,效果十分不错。尤其在移动端中使用,基本代替了图片来实现加载的效果。

CSS3 动画性能优化

CSS3 动画给 Web 的用户体验带来了巨大提升,本文将尝试从浏览器渲染的角度,来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。

css3新特性总结

css3新特性总结:圆角边框、多背景图、颜色和透明度(由原来的rgb到现在的rgba)、多列布局和弹性盒模型、盒子的变幻(2D、3D)、过渡和动画、引入web字体(在服务器端存储)、媒体查询、阴影

CSS3中一些鲜为人知的属性

CSS3是CSS(层叠样式表)技术的升级版本,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。这篇文章主要整理一些关于css3中的鲜为人知的属性

css3渐进增强 VS 优雅降级

进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。

css3中样式计算属性calc()的使用和总结

在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。

css3中计数器的使用

css3里有个很强大的功能,就是计算器,使用它可以很方便对页面中的任意元素进行计数,实现类似于有序列表的功能。与有序列表相比,突出特性在于可以对任意元素计数,同时实现个性化计数。

利用css3径向渐变做一张优惠券

在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过。那么你怎么做呢,切图做背景平铺边缘

css3动画讲解,关于css3的@keyframes和animation

通过css3我们可以创建动画,它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的,通过样式来实现的。

css3常用动效以及总结

box-shadow:盒子阴影,可以给卡片添加提高美化效果。可广泛应用于内容展示页面。css3 过渡:最简单的过渡是一个div,给它加上如下代码,便可以从宽度100px华丽的过渡到宽度为300px。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!