如果用<div>+<a>做一个按钮,这个能理解吧,就是想通过link来实现跳转,但是看起来是个按钮,且不需要触发事件。而且css也比button的好用。
这中情况下,如果不是“块”block,那么只要点到文字上时才会触发,点到按钮<div>但是没点到字是不行的,但是用了block后,整个按钮都可以承载a的link操作了
css中的display是设置元素显示的方式,block是一块状元素的方式显示,
inline是以内联元素的方式显示,none是不不显示;
块状元素会单独占据一样,其他元素跟他在同一行的会被迫换行,挤到下一行那里去,inline则不会这样。
Display:block是我们常用的,block也是Display默认的值。
解释:该对象随后的内容自动换行。
Display:inline,我们常常在li中使用它。功能是让li排成一排(称:删除行)。
接下来我们以一个未设置li列表与一个设置css Display inline样式对比实例演示演示。
Css代码
ul.divcss5 li{display:inline}
解释:ul.divcss5对应li css样式属性为display:inline
Html对应代码:
结果图:
说明:设置css为display:inline的li对象,li被排成一排,而未设置的li列表对象仍然继承原来自身独占一行的CSS样式。
拓展:
CSS颜色值的写法
CSS[1]在描述颜色的时候,除了使用英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:
p { color: #ff0000}
为了节约字节,我们可以使用 CSS 的缩写形式: p { color: #f00}。
我们还可以通过两种方法使用 RGB 值:p { color: rgb(255,0,0)} p { color: rgb(100%,0%,0%)}。
昨天在公司进行一个盒子布局的时候,想让多个div处于同一条水平线上的时候,发现点小问题:
情形: 设置父Div为固定宽高,父Div中嵌套两个子Div,分别继承父Div宽度的20%和80%,按道理设置 display:inline-block 会处于同一水平线上;
在这里发现点小问题就是设置display之后,两个子div它 不会排在同一条水平线上,会把第二个盒子挤下来 ;
其实是很郁闷的,不知道这里是为什么反正就是不能在同一条水平线上,然后百度什么的,说是不同盒子之间的存在margin和padding,但是我看盒子的margin和padding也没有啊,如下:
在初始化所有标签的margin和padding的同时设置 font-size: 0
各位大大知道为什么这样可以操作的可以私信,也可戳我邮箱 zhouminghang@baosight.com
使用浮动的话就不会存在上面的问题,直接就在同一水平线上了;
需要注意的是:浮动之后块级元素的display属性已经发生了改变;
这是我自己总结的几种关于 清除浮动 的方法,仅供参考--->清除浮动的方法请戳这里
定位的方法很简单,就不说了,基本上就是设置 父元素 为相对定位 postition: relative , 然后设置 子元素 为 绝对定位 position: absolute 再然后就是设置 top和left 的位置值了;
这里不建议使用定位的方法,定位使用多了, 整个页面结构看起来会很乱的