前言 看不片我们不难发现为什么会多出一个间隙出来呢。我们该如何消除呢? inline && inline block元素间隙 元素间留白间距出现的原因就是标签段之间的空格 因此去除的方法之一就是把标签的间隙去除掉 果然就没有间隙了,但是这样代码的可读性太差了。 解决方法还有一些,例如:margin负 ...
分类:
Web程序 时间:
2019-03-27 11:23:05
阅读次数:
265
1. float + 两层DOM实现 html css 1. display:inline block + 两层DOM 实现 css 1. white sapce:nowrap 减少一层DOM html css ...
分类:
其他好文 时间:
2019-03-25 23:37:09
阅读次数:
555
Web页面的布局,我们常见的主要有“浮动布局(float)”、“定位布局(position)”、“行内块布局(inline-block)”、“CSS3的多栏布局(Columns)”、“伸缩布局(Flexbox)”以及“网格布局(Grids)”等,在众多布局方法中,大家最为熟悉的就是浮动布局和网格布局 ...
分类:
其他好文 时间:
2019-03-21 11:59:52
阅读次数:
225
废话不多说, 直接上菜。 菜系:水平居中 菜名一: 行内(块)元素水平居中 1. 通过 text-align: center 可以实现在块级元素内部的行内元素水平居中。 2. 如果块级元素内部包着也是一个块级元素,我们可以先将其由块级元素改变为行内块元素(inline-block、inline-ta ...
分类:
其他好文 时间:
2019-03-13 19:43:28
阅读次数:
197
inline 内联元素:是不可以控制宽和高、margin等;并且在同一行显示,不换行,直到该行排满。 block 块级元素:是可以控制宽和高、margin等,并且会换行。块级对象元素会单独占一行显示,多个block元素会各自新起一行。 inline-block 内联块级元素: 具有宽度高度特性,又具 ...
分类:
其他好文 时间:
2019-03-09 01:23:17
阅读次数:
244
盒模型 1)盒的基本类型 在CSS3中使用display属性来定义盒的类型,总体来说盒分为block类型和inline类型 比如之前我们所学div元素就属于block类型,span和a属于inline类型。 2)inline-block类型 inline-block类型是CSS2.1中追加的一个盒类 ...
分类:
Web程序 时间:
2019-03-07 15:49:48
阅读次数:
240
1、flex 布局的概念 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局,行内元素也可以通过 inline-flex 使属性值用 Flex 布局。 inline-flex 和 inline-block 一样,对设置 ...
分类:
Web程序 时间:
2019-03-06 19:25:57
阅读次数:
239
设置了 inline-block 的两个 div 之间会有间距,需要消除。 ...
分类:
其他好文 时间:
2019-02-20 15:59:02
阅读次数:
167
正常的语言,如英文,中文都是从左往右读,但是有几种语言如阿拉伯语是从右往左读。 制作象阿拉伯语这样的网站,需要借助,样式 direction:rtl 来实现。 direction:rtl 会将 display:inline-block 会将第一个放右边依次排下来。 如果在网页中 span 等标签中写 ...
分类:
编程语言 时间:
2019-02-14 00:26:52
阅读次数:
193
margin塌陷 解决方法: 1、给父级顶加上一条线,不太合适。 2、bfc block format context 设定bfc后,特定的盒子会遵循另一套语法规则,解决了margin塌陷 触发bfc元素 1)position:absolute; 2)display:inline-block; 3) ...
分类:
Web程序 时间:
2019-01-31 19:15:35
阅读次数:
200