CSS中display:block和display:flax使用记录

代码：
（css）

.navigation ul li a{position:relative;width: 100%;text-decoration: none;color: #FFFFFF;display: flex;
}.navigation ul li a .icon{position:relative;display: block;width: 60px;height: 60px;color: #FFFFFF;line-height: 70px;text-align: center;
}.navigation ul li a .title{position:relative;display: block;width: 60px;height: 60px;color: #FFFFFF;line-height: 60px;text-align: center;
}

(HTML)

<ul><li><a href="#"><span class="icon"><i class="fa fa-home fa-2x" aria-hidden="true"></i></span><span class="title">菜单项</span></a></li><li><a href="#"><span class="icon"><i class="fa fa-home fa-2x" aria-hidden="true"></i></span><span class="title">菜单项</span></a></li>
</ul>

display:block的用法：
对于所有的块级元素来说都是不需要用display:block来定义的，因为块级元素的默认属性就是block；所以display:block比较常用于像是<a>和<span>等不是块级元素的元素中。如果不添加display:block，则一些大小设定对标签不起作用。

display:flax的用法：
使块级元素可水平放置

不过此处，在ul中添加bootstrap中有的.list-unstyled类后，就可以去除上述代码中的display:block了。

CSS中display:block和display:flax使用记录相关推荐

利用 html 和 css 实现导航栏下拉(display block、display none)
利用 html 和 css 实现导航栏下拉(display block.display none) 需求设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分 ...
DIV CSS display (block none inline)属性的用法教程
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
CSS中position属性(relative,absolute,fixed)和display中的inline-block
前言平时很少写CSS,用的多也就是Bootstrap来堆样式,写起来快一点,但是有时候需要自己写,很久没写容易忘记,这里记录下这两个常用属性position和display 这里贴一条CSDN设置图 ...
html block属性,css display block属性的意思、作用和效果
css中display的block属性是什么意思呢?他是指拥有该属性的html元素以块的方式显示,同时,该元素的前面和后面都会换行,也就是说,如果给一个元素B设置的display:block,那么该元 ...
CSS中Display（显示）和Visibility（可见）
CSS中常见的显示属性Display和可见属性Visibility display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
html设置margin无效,CSS中margin不起作用的原因及解决方法
margin是一个属性,指定元素和元素之间的间距,但不能为内联元素指定边距,本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法. margin不起作用的原因对于初学者来说,可能会经 ...
css 选父元素,CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
聊聊CSS中的布局模式
聊聊CSS中的布局模式在大家的印象中,CSS非常的简单,在此我想再强调一下,虽然CSS简单,但并不代表容易.随着Web技术的发展飞快,CSS经过二十多年的发展,其变化也是非常的大.CSS涵盖的技术点 ...

CSS中display:block和display:flax使用记录

CSS中display:block和display:flax使用记录

CSS中display:block和display:flax使用记录相关推荐

最新文章

热门文章