css学习笔记二之inline-block
2024-10-12 23:05:52
1、inline-block是CSS2.1中新增的盒类型,在div中将display属性设定为"inline-block",则div显示效果与设置display属性为"inline"是一样的效果。
inline-block具有inline属性的列属性,内部又具有block属性的块属性,可以使用width,height,margin,padding,border等元素。
2、使用inline-block可以在某些情况下替代float浮动元素,PS:要做一个横向导航条
在inline-block出现之前,一般都是使用以下代码,来完成上述功能:
<div class="nav">
<ul>
<li><a href="">AngularJS</a></li>
<li><a href="">AngularJS</a></li>
<li><a href="">AngularJS</a></li>
<li><a href="">AngularJS</a></li>
<li><a href="">AngularJS</a></li>
<li><a href="">AngularJS</a></li>
</ul>
</div> li {
float: left;
list-style: none;
width: 100px;
padding: 10px 0;
}
而使用inline-block,则可以通过如下代码完成:
li {
display: inline-block;
width: 100px;
padding: 10px 0;
text-align: center;
}
关于两者的区别,在于float脱离文档流,若是需要文字环绕,则应该选择float元素,若需要让nav居中,或垂直对齐,则需要用inline-block。
而在使用inline-block时,若是给上述li元素加上边框,则会发现左右有空白出现,这时有何解决方法呢?现在让我们来看看解决方法:
- 删除html中的空白:不要让元素之间换行,这可能比较蛋疼,但也是一种方法,特别是你元素不多的时候。
- 使用负边距:你可以用负边距来补齐空白。但你需要调整font-size,因为空白的宽度与这个属性有关系。我认为是0.25em,但我不确定。如果有人知道可以留言告诉我。
- 给父元素设置font-size:0:不管空白多大,由于空白跟font-size的关系,设置这个属性即可把空白的宽度设置为0.在实际使用的时候,你还需要给子元素重新设置font-size。
最新文章
- Caffe学习系列(3):视觉层(Vision Layers)及参数
- c++vector(入门级)
- MyBatis入门案例 增删改查
- C++ 高质量编程附录试题
- SQLQuery 实现别名映射
- Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/web.xml if executing in update mode) ->; [Help 1]
- 原生js获取window高和宽
- CSS制作hover下划线动画
- CREATE DATABASE建库语句详解
- English - refer to...和refer to...as
- 正则表达过滤表单隐藏元素,组装post数据
- ajax请求返回乱码
- hdu 5893 (树链剖分+合并)
- Spring与Quartz实现定期任务
- Java IO 类一览表
- VMware vSphere中的HA工作原理介绍
- 你的安全设置不允许网站使用安装在你的计算机上的ActiveX控件
- 网关服务Spring Cloud Gateway(一)
- win10 跳过max path 260限制
- 【JavaScript&;jQuery】轮展图
热门文章
- 动态jsp页面转PDF输出到页面
- IHttpModule实现URL重写
- Linux安装QQ 2017
- 2015前端各大框架比较(angular,vue,react,ant)
- AngularJS Filter用法详解【转+实际测试】 格式化货币
- PHP 数组转字符串,与字符串转数组
- (转)Apache2 httpd.conf 配置详解 (二)
- android studio或者IntelliJ代码样式的设置
- Tomcat-java.lang.NoClassDefFoundError: org/apache/juli/logging/LogFactory
- SQL小细节