inline-block的使用
2017-02-08 21:58
148 查看
inline-block是什么
inline和block是css中元素display属性的两个选项,而inline-block可以说是介于两者之间的属性值。inline使元素成为内联元素(inline elements),而block则使之成为块级元素(block elements)。
inline元素里面只能放inline元素。 块级元素的特点是独占一行,并能设置width和height属性。
内联元素不会独占行,且设置width和height属性不产生效果。 padding和margin在水平方向的值有效,但在竖直方向无效。
inline-block会让元素像内联元素一样不换行,但里面的内容仍然是块级的。
简单的应用
比如对一些div元素设置成display:inline-block,这样就可以在一行里放置多个div了,相比使用float的优点是不会出现浮动到第二行的元素不会因为第一行有过高的div而导致浮动时被挡住(但是flex布局出现后,一般对div不再设置为display:inline-block了。因为flex的响应式的特点使其更为强大,bootstap也是采用flex布局的)。更有用的地方,比如对一个a元素进行设置,这样就可以对链接设置高度的同时保持不换行的特性了。
相关文章推荐
- 使用net Manager工具远程连接Oracle配置监听
- 基于散列的集合简析-HashMap、HashSet、LinkedHashSet、LinkedHashMap
- 25 总结
- 解决wordpress用户注册时,点击邮件中的重置密码链接提示“您的密码重设链接无效”
- [置顶] 【收藏】学习资源汇总(不断更新...)
- 使用gradle的自定义Property实现Android项目的配置和依赖统一管理
- 头部导航器组件的封装
- android开发----service下载图片
- Fleck websocket官方事例
- wordpress常用插件
- springmvc文件上传
- Python爬虫进阶五之多线程的用法
- IO流_字节流四种方式复制MP4并测试效率
- 算法训练 未名湖边的烦恼
- UIButton
- BZOJ 1924 所驼门王的宝藏【思维建图+强连通缩点+DAG图上做最长路】这题好尼玛综合........
- 奥运
- bzoj2002 [Hnoi2010]Bounce 弹飞绵羊
- bzoj2002 [Hnoi2010]Bounce 弹飞绵羊
- wordpress中文路径出现404错误的解决办法