2）不能设置宽高 3）允许其它元素在其左右 4）在这儿查看其它非常重要的旁注 block元素 1）inline元素能设置和不能设置的属性，block都能设置 2）在block元素后强制换行 inline-block...元素 1）允许其它元素在其左右 2）可以设置margin-top,padding-top,padding-bottom,margin-bottom 3）可以设置宽高 display:block, display...:inline, display:inline-block外观（如下图） ?...本文摘自stackoverflow中相关回答
一些人喜欢在 Normalize.css 中添加一些自己偏好的样式，我也一样。 在本文中，我会与你分享我自己的 CSS reset 项（除了 Normalize.css 之外我还使用它们）。...我将 reset 项分为8类： 盒子大小 删除边距和填充 列表 表格和按钮 媒体元素 表格 隐藏属性 Noscript 调整盒子大小 box-sizing 属性改变了 CSS 盒子模型的工作方式。...我还将这些元素设置为 display: block ，因为 inline-block 在元素的底部创建了不需要的空格。...Normalize.css 已经为我们做了这件事。 1[hidden] { 2 display: none; 3} 这种风格的问题是它的特异性低。...我经常将 hidden 添加到用类设置的其他元素中。类的特异性高于属性，并且 display: none 属性不起作用。 这就是为什么我选择用 !important 提高[hidden]的特异性。
我们可以简单地使用属性选择器来实现外部链接的自定义样式。 使用属性选择器 CSS 允许我们根据 HTML 元素的属性来设置样式，方法是将它们放在方括号中。...： /* 准确匹配 URL */ a[href='https://css-irl.info'] { } /* URL 中任何位置有 'css' */ a[href*='css'] { } /* 以...这里我们使用 content 属性和一个 base64 编码的 SVG，因为图标非常简单。但你也可以使用一个图像 URL、另一个字符或表情符号。我们可以添加一个小边距，使其稍微远离文本。...我们还需要将 display 属性设置为 inline-block。 （注：我使用了自定义属性来简化图像 URL 的表示。）...: url(--var(svgUrl)); } 不幸的是，这个技巧在最新版本的 Chrome 中不起作用。
： inline-block既具有block的宽高特性又具有inline的同行元素特性（CSS 2.1 新增） table ： 作为块级表格来显示（类似table），表格前后带有换行符。...block 设置元素为块状元素 如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。...inline-block inline-block既具有block的宽高特性又具有inline的同行元素特性 (CSS 2.1 新增) 例： .display4 { display: inline-block...使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式， 而不会产生因为使用了table那样的制表标签所导致的语义化问题。...结语 在熟悉display的使用之后，日常的布局基本都能解决。 （多数布局都可以通过flex解决） 参考 CSS display 属性详解 有错误之处，感谢指出，接收批评
网格中auto-fit和auto-fill之间的差异的误解 在CSS grid中，repeat函数可以创建响应列布局，而不需要使用媒体查询。...使用 CSS grid 定义 main 和 aside 元素 CSS grid 常规布局中 main 和 aside 部分，为了让布局更加的完美，我们应该让 aside 高度等于 main 高度，即使...向 SVG 添加 fill 有时，在使用 SVG 时，如果在 SVG 中以内联方式添加了fill属性，填充就不会像预期的那样工作。...使用 display: inline-block 会出现怪异的空格 为多个元素设置 display: inline-block或 display: inline，会在每个元素之间创建一个很小的空格。...在下面的示例中，每个项目的右侧都有8px的空间，但是由于使用display：inline-block导致增加了一个空格，最后结果是12px，这不是期望的结果。 ?
二、vertical-align起作用的前提（display值对垂直对齐的影响） 有时候设置vertical-align会发现根本不起作用， 第一个原因：是因为vertical-align只能应用于inline...inline-block input（ie8+）、button（ie8+）（这俩元素在ie67中会被认为是inline水平） 3. table-cell td ?...display设置时：更改元素的显示水平也会让其支持vertical-align 三、更改元素的显示水平 1. display属性设置：非inline、inline-block、table-cell等...2. css声明 float会让元素变成block水平 position：absolute会让元素变成block水平，且脱离文档流 四、vertical-align和line-height的关系...table-cell元素，单元格填充盒子相对于外边的表格行居中对齐 字符有下沉特性 bottom： 底线 inline/inline-block元素，元素底部和整行的底部对齐 table-cell
因此，在本文中，我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。 现在，让我们开始吧。 间距类型 CSS 中的间距有两种类型，一种在元素外，另一种在元素内。...填充不起作用 值得一提的是，垂直填充不适用于具有 display: inline 的元素，例如 或 。 如果添加了填充，它不会影响元素并且填充将覆盖其他内联元素。...CSS： .element span { display: inline-block; padding-top: 1rem; padding-bottom: 1rem; } CSS 网格间隙....c-nav a { display: block; padding: 16px 8px; } 对于每个项目之间的间距，你可以使用边距或将 的显示更改为 inline-block。...在使用 :not 选择器之前无法覆盖它。 如果设计有多于一列，它将不起作用，见下图。 关于解决方案 #2，它没有 CSS 特异性问题。 但是，它仅适用于一个列堆栈。
display: inline-block （文末送最新CSS3英文电子书） 本篇文章阅读时间预计2分钟。...01 display: none vs visibility: hidden 如下段代码所示，我们有三个红、蓝、绿的方块： css部分 #box-1 { width: 100px; height...> 首先我们先使用 display: none 属性隐藏蓝色的方块，如下段代码所示： #box-2 { display: none; width...: 100px; height: 100px; background: blue; } 如图所示，使用display: none，我们可以看出蓝色方块从中删除，中间的空位也被绿色的方块补位...03 Display: Inline-block 某些情况下，行内元素和块级元素并不能满足我们的设计需求，因此有了Inline-block这个属性，从属性的名字，我们就可以分析出其综合了两者的一些特征。
CSS基础 CSS主要知识点集中于盒模型，布局，选择器等 盒模型 在对html标签有了整体认识之后，在了解了文档流的概念之后，就得了解元素在整个浏览器中的展现形式。CSS盒模型如下图所示： ?...在使用过程中为了统一认识，使用box-sizing:border-box比较好。 上文提到了可以显式设置width、height，目前也存在一些设置width/height不起作用的元素。...常见的display属性有三种，block、inline、inline-block；区别如下：摘自网络 display:block block元素会独占一行，多个block元素会各自新起一行。...display:inline-block 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。...总结 本文对近期的CSS学习做个总结，总结过程中发现自己对于position定位还不是特别清楚，后续使用过程中得继续体会，接下来准备学习下bootstrap和jquery。
CSS 2.1 */ display: inline-block; display: table; display: inline-table; display: table-cell; display...链接：http://www.css88.com/archives… display: block 设置元素为块状元素，如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准...·在box外面 display: inline-block inline-block为 CSS 2.1 新增的属性。...CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样。...使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式， 而不会产生因为使用了table那样的制表标签所导致的语义化问题。
这就涉及到了元素的分类，所有元素可分为两类： 块级元素 即display的值默认为block的元素：div、p等。...特点是占用一行 行内元素 即display的值默认为inline的元素：span等。特点是只占自己需要的长度，设置宽和高都不起作用。 我们来看一段代码： <!...我们只需要将display属性值设置为inline-block即可： /* px:意为像素; */ div{ width: 100px; height: 50px;.../imgs/pic.png");*/ border: 1px solid #0000ff; display: inline-block; } span{ width:.../imgs/pic.png");*/ border: 1px solid #0000ff; display: inline-block; } ?
今天就把这个插件分享给大家 lime-painter lime-painter是一款 uniapp 海报画板，更优雅的海报生成方案，支持多种方式生成海报，同时也支持书写css 使用方式 lime-painter...; width: 120rpx; display: inline-block" > <l-painter-view css="background...#ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block" > 方式二：JSON 在 json 里有四种类型的组件可以用：type为 view、text、image、qrcode css 的 key 值使用小驼峰形式...做分享海报时经常会向海报里添加相关的图片，所以怎么让图片不变形，不被切割压缩，就尤为重要 lime-painter有个图片填充模式，就替我们考虑了这个问题 图片填充模式：object-fit 名称 含义
CSS快速入门 CSS 用于控制网页的样式和布局。 CSS应用方式 在标签上直接写style属性即可，例如： 在HTML的head中书写style即可。...: inline-block; /*display的inline-block允许在元素上设置宽度和高度，并且去除了换行。...inline-block 行内块元素。（CSS2.1 新增的值） 文字设置 CSS 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。...也可以使用下面的方式指定某一个方向的内边距。...例如： .c1{ margin: 100px 100px 100px 100px; } 表示上下左右的外边距都是100px，也可以简写为margin: 100px；也可以使用下面的方式来设置某一个方向上的外边距
2.元素分类 在css中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素（又叫行内元素）和内联块状元素。...2.2内联元素 在html中，span，a，label，strong，em就是内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display：inline将元素设置为内联元素。...2.3内联块状元素 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素（css2.1）img,input...inline-block元素特点： 和其他元素都在一行上； 元素的高度、宽度、行高以及顶和底边距都可以设置； 3.盒子模型 3.1什么是盒子模型 css中，盒子模型是关于元素的宽高的。如下图： ?...css内定义的宽width和高height指的是填充padding以内的内容。
: inline display: inline-block Display: None vs....id="box-3"> E0D0407855A1A91912EBD31163C5AF54.png 首先我们先使用 display: none 属性隐藏蓝色的方块，如下段代码所示： #box....png 如图所示，使用Display: None，我们可以看出蓝色方块从中删除，中间的空位也被绿色的方块补位。...首先我们下段没有CSS的Html代码: I'm a paragraph I'm a paragraph too I'm a word</...Display: Inline-block 某些情况下，行内元素和块级元素并不能满足我们的设计需求，因此有了Inline-block这个属性，从属性的名字，我们就可以分析出其综合了两者的一些特征，我们可以这样理解
：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。...text-align，使子元素里的内容也水平居中 body{margin:20px;} .parent{ background...: red; text-align: center; } .child{ display: inline-block; background: blue...(height:该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。 缺点:当文字内容的长度大于块的宽时，就有内容脱离了块。...center,也可以实现垂直居中 设置display:flex;会使子元素充满父元素。
的ie模式 .inlineblock { display: inline-block;/* firefox等标准浏览器识别*/ *display: inline;/* 只有ie6和ie7...恰巧遇到群里一个同学说，float：left在ie8下不兼容，然后大家谈到用inline-block，我就来复习了下inline-block的兼容： 于是顺便把最近的一个重点再在这里记载以下，以防以后走弯路吧...，把样式都格式掉了的感觉， 多一句也没有害处，目前也没观察出多这几句的好处。...)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。.../www.jb51.net/css/493362.html 三、CSS hacker使用小结(兼容IE6、7、8)：http://www.jb51.net/css/493363.html 四、比较全的CSS
/* Global values */ display: inherit; display: initial; display: unset; 主要的几个属性inline,block,inline-block...和margin-bottom无效，对padding值也一样 <!...设置了inline-block的元素虽然会有内联元素的效果，但是却可以设置宽高margin，padding值等 其他 display：block的元素和块级元素并不是一个概念。...，多个块级元素则换行显示 display：inline-block的元素为什么可以设置宽高？...于是，值为block的元素实际由外在的“块级盒子”和内在的“块级盒子”组成，值为inline-block的元素则由外在的“内联盒子”和内在的“块级盒子”组成，值为inline的元素则内外均是“内联盒子”
</span .desc { display: block; font-size: 30px; color: #000; } .desc:before { display: inline-block...问题的解决 解决的方法很简单，设置 content 属性，而且要具有一定的宽高，可以设置 display 为 inline-block 和 block，让元素的宽高生效，如下，添加一行： .desc:...探索 content 属性 来看 MDN 的描述： CSS 的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。...填充字符串 我们经常需要在一些特殊的行后面加一些标识，比如品类列表，如果是新品则提示 New 字样。...CSS 计数器是网页范围变量，可以使用 CSS 规则更改其值。 我们通过 Demo 来看看怎么处理的。
这里就是这个li标签里的所有属性了，我们在做开发时可以直接修改这里的属性值，然后直接在页面中查看效果，比如我现在在这里加一个 margin-bottom: 20px： ?...也可以在盒子上直接调整大小来进行盒子样式的调试： ? 至此，我们应该记住：width和height只能设置盒子中内容的宽度和高度，盒子的实际高度和宽度应该加上border和padding。..." href="css/index.css"> 我的css盒子测试模型1 index.css...: inline-block; margin: 10px; position: relative; top: 100px; left: 100px; } 注意，上面css...盒子的上面和左面都增加了100像素的距离，而如果我们不添加positon: relative属性直接增加top和left这时候这两个属性是不起作用的。 这里的相对是指相对于盒子的左上角顶点。
领取专属 10元无门槛券
手把手带您无忧上云
