星空网 > 软件开发 > 网页设计

css学习笔记二之inline

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元素加上边框,则会发现左右有空白出现,这时有何解决方法呢?现在让我们来看看解决方法:

  1.  删除html中的空白:不要让元素之间换行,这可能比较蛋疼,但也是一种方法,特别是你元素不多的时候。
  2.  使用负边距:你可以用负边距来补齐空白。但你需要调整font-size,因为空白的宽度与这个属性有关系。我认为是0.25em,但我不确定。如果有人知道可以留言告诉我。
  3.  给父元素设置font-size:0:不管空白多大,由于空白跟font-size的关系,设置这个属性即可把空白的宽度设置为0.在实际使用的时候,你还需要给子元素重新设置font-size。



原标题:css学习笔记二之inline

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

日本空派专线:https://www.goluckyvip.com/tag/40019.html
小程序:https://www.goluckyvip.com/tag/4002.html
日本空运fba:https://www.goluckyvip.com/tag/40020.html
日本空运专线:https://www.goluckyvip.com/tag/40021.html
日本跨境电商海外仓:https://www.goluckyvip.com/tag/40022.html
日本跨境浩哥:https://www.goluckyvip.com/tag/40025.html
【再放信号】美国Etsy即将放开中国卖家入驻,官方邮件你收到了吗?:https://www.kjdsnews.com/a/1836640.html
安庆市周边免费景点 安庆免费游玩的地方有哪些?:https://www.vstour.cn/a/365186.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流