inline-block | 易学教程

css中 @mixin的使用

阅读更多关于 css中 @mixin的使用

mixin定义（使用@mixin定义）： @mixin hexagon-generator($hexagon-width, $factor, $border-radius){ display: inline-block; border-radius: 50%; width: ($hexagon-width + $border-radius) * $factor; height: ($hexagon-width + $border-radius) * $factor; display: flex; align-items: center; justify-content: center; } .hexagon-shape { @include hexagon-generator(88rpx, 1, 8rpx); } 使用 .hexagon-shape { display: inline-block; border-radius: 50%; width: (88rpx + 8rpx) * 1; height: (88rpx + 8rpx) * 1; display: flex; align-items: center; justify-content: center; } 转载： https://blog.csdn.net/liya_nan/article/details

使用inline-block代替float

阅读更多关于使用inline-block代替float

CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗? 浮动通常表现正常，但有时候搞起来会很纠结。特别是处理内部容器中的浮动，比如对一排图片使用浮动后对齐出现问题。Inline-block是我们的另一种选择。使用这种属性可以模拟部分浮动的特征，而不需要处理一些浮动带来的问题。 Inline-block不是什么新鲜话题了，估计你也用过。不过我最近才是用到这个属性。之前的几个站点上，有展示一系列照片的需求，我就用inline-block代替了浮动。 inline-block是什么？ Inline-block 是元素 display属性的一个值。这个名字的由来是因为，display设置这个值的元素，兼具行内元素（ inline elements）跟块级元素（block elements）的特征。块级元素（block elements） ,来源于 CSS盒子模型。块级元素包含width height,padding,border与margin，他们的排列方式是从上到下排列。行内元素，排列方式是水平排列。行内元素（inline elements）排列方式是水平排列。行内块元素（inline-block elements）在内部他的表现类似 block元素

应不应该使用inline-block代替float

阅读更多关于应不应该使用inline-block代替float

本文由 99 根据 Steven Bradley 的《 Should You Use Inline-Blocks As A Substitute For Floats? 》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://www.vanseodesign.com/css/inline-blocks/ ，以及作者相关信息作者： Steven Bradley 译者： 99 CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗? 浮动通常表现正常，但有时候搞起来会很纠结。特别是处理内部容器中的浮动，比如对一排图片使用浮动后对齐出现问题。Inline-block是我们的另一种选择。使用这种属性可以模拟部分浮动的特征，而不需要处理一些浮动带来的问题。 Inline-block不是什么新鲜话题了，估计你也用过。不过我最近才是用到这个属性。之前的几个站点上，有展示一系列照片的需求，我就用inline-block代替了浮动。 inline-block是什么？ Inline-block 是元素 display属性的一个值。这个名字的由来是因为，display设置这个值的元素，兼具行内元素（ inline elements

CSS BFC和IE Haslayout介绍

阅读更多关于 CSS BFC和IE Haslayout介绍

BFC(Block Formatting Context) 1. BFC的定义是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。在 Block Formatting Context 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。从上面的定义我们可以看到Document显示HTML元素的方式和BFC的定义很像，其实我们可以认为Document就是最大的一个拥有BFC的元素了。 2. BFC到底是什么？当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC

【前端知识体系】CSS布局知识强化

阅读更多关于【前端知识体系】CSS布局知识强化

1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局（兼容性的问题） 1.1 基础布局 <style> * { margin: 0; padding: 0; } .layout { margin-top: 10px; } .layout div{ min-height: 100px; } </style> <body>  <section class="layout float"> <style> .layout.float .left { float: left; width: 300px; background-color: #48adff; } .layout.float .main { background-color: #ff4344; } </style> <article class="left-main"> <div class="left"></div> <div class="main"> <h1>浮动两栏布局</h1> <p>两栏布局的中间部分</p> <p>两栏布局的中间部分</p> </div> </article> </section>  <section class="layout absolute">

安卓手机对于消息中心右上角提示小红点的兼容处理

阅读更多关于安卓手机对于消息中心右上角提示小红点的兼容处理

项目背景：要实现如图一样的消息提示问题：由于项目中使用了postcss-pxtorem的插件，所以导致一些正常的css在安卓机上不是圆的，border-radius写的是px,但是会自动转成rem,从而变成小数，安卓机解析偏差就变形了。解决方案：先放大再缩小 1 .unread-info { 2 background-color: #f56c6c; 3 border-radius: 30px; 4 color: #fff; 5 display: inline-block; 6 font-size: 36px; 7 height: 52px; 8 line-height: 52px; 9 padding: 0 16px; 10 min-width: 52px; 11 text-align: center; 12 white-space: nowrap; 13 position: absolute; 14 transform: translateY(-50%) translateX(100%) scale(0.25); 15 transform-origin:center left;/*由于小圆点的伸缩方向需要是右边，所以这样改，center的话会像两边扩展，位置就会跑偏*/ 16 top: 6px;/*这是对于父元素的定位*/ 17 right: 40px; 18 } 19

Line-breaks between divs render a space. How to eliminate it from HTML?

阅读更多关于 Line-breaks between divs render a space. How to eliminate it from HTML?

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I have the following layout <div style="width:100px"> <div style="width:50%; display: inline-block;"> div1 </div> <div style="width:50%; display: inline-block;"> div2 </div> </div> because in html there's a change-line between closing and opening div (div1 and div2), browsers add a "space" character in place of the line-break which results in having the second div to display underneath the first div. However if you remove the \n between the div1 and div2 then they display next to each other which is the expected behaviour. <div style="width

CSS 中 block 、inline 、inline-block 的区别

阅读更多关于 CSS 中 block 、inline 、inline-block 的区别

block 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 inline 内联元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 inline-block 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点。 inline-block 元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。来源： https://www.cnblogs.com/kitty-blog/p/11776165.html

How can I prevent the jQuery UI look'n'feel from disappearing after form submits/postbacks?

阅读更多关于 How can I prevent the jQuery UI look'n'feel from disappearing after form submits/postbacks?

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I have a JSF (Mojarra) v2.1.11, Primefaces v3.4.2, Java 6 web application using jQuery datepicker. I am using a selector that looks similar to this: $('#form1\\:dp').datepicker({showOn: 'button', buttonText: "Choose"}); This enables the user to click the button in order to invoke the datepicker. The issue I'm having is that the "button" disappears after the user submits the form. Apparently, the "button" loads only once when the page is initially loaded. I'd like to know how (what the best practice is) to persist the JQuery datepicker

float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

阅读更多关于 float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: My Question(s) Are any of these methods preferred by a professional web designer? Are any of these methods prefereed by a web browser when drawing the website? Is this all just personal preference? Are there other techniques I'm missing? Note: Above questions are in regards to designing a multi-column layout float:left; http://jsfiddle.net/CDe6a/ This is the method I always use when creating column layouts, and it seems to work just fine. The parent does collapse on itself though, so you just need to remember to clear:both; afterwards.

订阅 inline-block