inline-block | 易学教程

day15 CSS JS DOM初探

阅读更多关于 day15 CSS JS DOM初探

居中 line-hight 是上下 text-line 是左右实现一个返回顶部的功能： 1 先写好CSS 2 写动作JS 写一个悬浮菜单： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ margin: 0 auto; height: 48px; width:980px; background-color: aquamarine; color: coral; position: fixed; top: 0; left: 20px; right: 20px; line-height: 48px; text-align: center; } .pg-body{ margin: 0 auto; background-color: #dddddd; width:980px; height: 5000px; margin-top: 50px; } </style> </head> <body> <div class="pg-header">此处为菜单</div> <div class="pg-body">此处为内容</div> </body> </html> 效果：上下滚动菜单始终固定在顶部实现一个点赞按钮的效果： <

div设置为inline-block后，两个div之间有空隙

阅读更多关于 div设置为inline-block后，两个div之间有空隙

一. 问题：如题所描述，div设置为inline-block后，产生如下现象：二. 解决办法： div之间不要换行不要留空格，写成这种： <div class="parent"> <div class="left">左侧</div><div class="right">右侧</div> </div> 父元素的font-size：0；再给子div设置一个font-size .parent { font-size: 0px; } .left, .right { display: inline-block; font-size: 14px; } 三. 原因出现空隙是因为div标签设为行内块级元素后代码里的换行被浏览器当成一个空格来解析来源： https://www.cnblogs.com/XHappyness/p/12530700.html

实现元素水平居中和垂直居中的方法

阅读更多关于实现元素水平居中和垂直居中的方法

水平居中水平居中的方法大家应该都知道 1.在父元素的里面加 /父元素 { text-align:center; } //子元素 { //如果不管是就在子元素加 display:inline/inline-block; } 2.前提：居中的元素必须是块级元素 /父元素 { text-align:center; } //子元素 { //如果不管是就在子元素加 display:inline/inline-block; } 垂直居中 1.绝对定位(一) //已知宽高 //父元素 { position: relative; width:宽; height: 高; } //子元素 { width: 宽; height: 高; position: absolute; left: 50%; top: 50%; margin-left: -宽/2; margin-top: -高/2; } 2.绝对定位(二) //已知宽高 //父元素 { position: relative; width: 250px; height: 250px; background: blue; } //子元素 { position: absolute; width: 50px; height: 50px; left: 0; top: 0; right: 0; bottom: 0; margin: auto;

[原]《Web前端开发修炼之道》-读书笔记CSS部分

阅读更多关于 [原]《Web前端开发修炼之道》-读书笔记CSS部分

如何组织CSS-分层应用 css 的能力分两部分：一部分是css的API，重点是如何用css控制页面内元素的样式；另一部分是css框架，重点是如何对 css 进行组织。如何组织 css 可以有多种角度，例如按功能划分，或者按区块划分。这里讲一下 base.css + common.css + page.css 的组织方法。将网站内的所有样式，按照职能分成三大类：base、common、page，这三者是层叠结构。 1、base 层-精简通用位于三者的最底层，提供 css reset 功能和粒度最小的通用类——原子类。这一层会被所有页面引用，是页面样式所需依赖的最底层，不同风格的网站可以使用同一个 base 层，所以，应具有高度可移植性，力求精简和通用。该层相对稳定，基本不需要维护，可以简单地放在一个文件里，如 base.css。 css reset 即一开始就将浏览器的默认样式全部去掉，就是通过重新定义标签的样式，“覆盖”掉浏览器提供的默认样式。可以将常用的标签显式地罗列出来，避免使用“*”，如来自于 YUI 的部分 css reset 的代码： /*CSS reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin

display:inline-block/text-align:justify下列表的两端对齐布局

阅读更多关于 display:inline-block/text-align:justify下列表的两端对齐布局

为了表述上逻辑清晰。我们先把IE6和IE7浏览器晾在一边，看看IE8+浏览器以及现代浏览器下如何 display:inline-block + text-align:justify 实现列表元素的两端对齐。说穿了其实很简单，我们不妨以最常见的列表标签- ul , li 标签举例，要实现 li 列表的两端对齐，直接下面这点CSS代码就OK了： ul{text-align:justify;}li{display:inline-block;} 简单得让人当场吐血三升。唯一需要注意的就是列表元素首尾标签留空（或换行）不能够上一个标签组的结束标签与下一个标签组的其实标签连在一起不仅如此，对于IE8浏览器，列表元素不能处在 font-size:0 的环境下，至少code<font-size:1px，因为IE8浏览器 font-size:0 或直接把换行空格或普通空格抹掉而无法实现两端对齐效果。 ok，下面是重头戏了，纠缠不清的IE6/IE7浏览器。显然上面的 ul , li 样式组合在IE6/7浏览器下是行不通的，即使你使用hack让IE6/7下的 li 标签有类似于 display:inline-block 的特性也是没有作用的。那么如何才能让IE6/7浏览器也有列表元素支持 text-align:justify 属性呢？经过我反复试验与调试，总结了两点： inline标签化

IE6/IE7下：inline-block解决方案

阅读更多关于 IE6/IE7下：inline-block解决方案

IE6/IE7下：inline-block解决方案 IE6/IE7下对display:inline-block的支持性不好。 1、inline元素的display属性设置为inline-block时，所有的浏览器都支持； 2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行，允许空格。（准确地说，应用此特性的元素现为内联对象，周围元素保持在同一行，但可以设置宽度和高度等块元素的属性） IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。 IE6下块元素如何实现display:inline-block的效果？有两种方法： 1、先使用display:inline

去除inline-block元素间的空隙

阅读更多关于去除inline-block元素间的空隙

inline-block元素在布局时会给我们带来很多方便，但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙（有的浏览器可能是8px）。废话不多说了，直接讲解决方法吧。总体来时可分为两种方法，一种是改变html结构法,另一种是css法。先说第一种，比如下面这段代码: 1 2 3 4 5 6 < ol > < li >首页</ li > < li >关于我们</ li > < li >联系我们</ li > < li >加入我们</ li > </ ol > 假设 li 是 inline-block元素，则 li 间会出现讨厌的空隙，这时我们可以换个写法： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 < ol > < li >首页</ li >< li >关于我们</ li >< li >联系我们</ li >< li >加入我们</ li > </ ol > 或 < ol > < li > 首页</ li >< li > 关于我们</ li >< li > 联系我们</ li >< li > 加入我们</ li > </ ol > 或 < ol > < li >首页</ li >  < li >关于我们</ li >  < li >联系我们</ li >

拜拜了,浮动布局-基于display:inline-block的列表布局

阅读更多关于拜拜了,浮动布局-基于display:inline-block的列表布局

一、一抹前言没有爱的日子，时间如指尖细沙，不知不觉就流逝了。写“ CSS float浮动的深入研究、详解及拓展(一) ”和“ CSS float浮动的深入研究、详解及拓展(二) ”似乎就在不久前，然而相隔差不多有一年之久了。文章最后留下了“浮动布局更好的替代方案是什么？”后文再介绍的预告。由于自己肚子中的货物不足以撑起一篇足够质量的文章，所以关于“浮动布局更好的替代方案是什么？”的文章一直并未动笔。好在事物总是在发展的，我也是每天都是在进步，对于列表布局的思考也愈发成熟。加上正好前不久又有人询问我“浮动布局的替换方案是什么”，于是觉得介绍“浮动布局的替换方案“的时机成熟了。要注意，本文的布局专指列表布局。就是具有相同DOM结构的水平排列可以repeat出来的列表元素。如QQ校友中的图片列表（图片截自老同学相册，已隐去名字）：二、列表浮动布局的局限列表浮动布局就是指通过使用float属性，让列表元素依次排列的布局（通常是左浮动，float:left）。这是相当常见的也是目前最最主流的列表布局方式，所以这里就不吃咸鱼蘸酱油——多此一举show代码了。对于浮动局部的局限性，想必同行们都知道，就是每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度高于其他列表，那就在第二行

inline-block 去除间隙

阅读更多关于 inline-block 去除间隙

inline-block元素在布局时会给我们带来很多方便，但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙（有的浏览器可能是8px）。如图所示：解决办法：给父元素设置font-size:0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="author" content="Chomo"/> <link rel="start" href="http://www.14px.com" title="Home"/> <title>利用box-sizing实现div仿框架</title> <style type="text/css"> *{ margin: 0; padding: 0; } .parent{ font-size: 0; } div{ display: inline-block; }

511,display:inline-block什么时候不会显示间隙？

阅读更多关于 511,display:inline-block什么时候不会显示间隙？

（百科：在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。 display：inline；强制变成行内元素 display：block；强制变成块元素而display：inline-block；顾名思义就是行内块的意思了，他具备了行内元素不换行的特征，同时也有块元素可以设置宽高的特征）移除空格使用margin负值使用font-size：0 letter-spacing word-spacing eg， <html> <head> <title>display:inline-block元素之间空隙的产生原因和解决办法</title> <style type="text/css"> .parent .child { display: inline-block; background-color: #fdfd04; width: 100px; height: 100px; } .pst1{ margin-left: -5px; } </style> </head> <body> <div class="parent"> <div class="child">child1</div>

订阅 inline-block