一.神奇的两个inline-block 很初级的问题,无聊决定写一个故事. 故事的主人公很简单,两个inline-block元素.代码如下,为了看起来简单明了,写得很简陋.效果图如右.发现有两个问题. 1:两个元素水平有空隙,简单的初始化margin:0好像并没有起想象中的作用,为什么呢 2:两个元素垂直也没有对齐,等高的的行内块元素不应该阿:   二.消除两个inline-block元素水平间距 最终效果 讲解demo <div class="space"> <a…
在外层加上一个父元素,设置font-size:0;即可. 两个按钮之间的间距如何去掉…
在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方法是这样的--全部设置浮动: <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:…
float:left ---------------------------------------------------------------------------------------- 参考 http://www.w3school.com.cn/css/css_positioning_floating.asp 最常见的布局会有局限性,要求高度相同,不然会出现卡住的情况 eg 1 : 当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘: eg 2: 当…
1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!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/x…
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元素即使设置了宽度,仍然是独占一行. block元素可以设置margin和padding属性. display:inline inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化. inline元素设置width,height属性无…
遇到的问题: 使用<input>标签做了两个按钮, 按钮之间有个间距不知道怎么去掉. 如下图: 问题解决: <input>是内联块状元素(inline-block); 内联元素是当做字体来处理的,字体之间是有间隔的,所以内联元素之间也是有间隔的; 将<input>父级字体(font-size)设为0px,可以消除间隔,但是重新设置内联元素(<input>)的字体大小; 修改后的代码: 修改后的样式: 参考内容:http://www.imooc.com/qad…
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素): 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL,…
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内…
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是:  和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图…
一.文本标签 em:用来表示一段内容的着重点,语气上的强调.一般显示为斜体 i:是斜体显示,和em显示效果一样.h5规定不需要着重的内容而是单纯加粗或斜体可以用i或b.用的不多 strong:用来表示一个内容的重要性.一般显示为粗体.与em可以单独使用,也可以一起使用. b:加粗显示,跟strong显示效果一样. small:标签中的内容会比他的父元素中内容小一点.在h5中来表示一些细则中内容,如版本声明,合同条款. big:没什么语义,很少使用. cite:网页中所有加书名号的内容都可以使用c…
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css('background-color', colorRandom); }); }, 1000); }); // ]]> 块状元素(block): 总是另起一行开始 高度,行高以及顶.底边距都可控制:行高可以设置文字内容的垂直位置 若不设置大小,默认为父元素的100% 我是h1 我是h6,我宽100,…
1.水平排放的盒子,水平间距是两个margin的累加 2.垂直排放的盒子,垂直间距是合并的取最大值…
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的... 最简单的方法就是把 inline-block 元素之间的回车删除,就是代码显示有点不美观,影响阅读. 方法总结 以下方法不保证浏览器兼容性问题,仅在 Chrome 浏览器测试通过 HTML Code: <h5>未处理空格</h5> <ul> <li>One…
转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们先来看效果图 1 2 3 4 5 6 7 8 <view class="copyright">     <view class="copyright_item">CopyRight:All Right Reserved</view>…
一 . 前言 有时我们在写底部导航栏时,会有很多超链接,每个链接间用“|”分割,如下图: 可能刚入门的朋友会想到这样完成,再单独设置span的样式, 今天主要介绍怎么样用css3简单快速的完成这个效果(ie8不支持) <a href="http://www.baidu.com">百度</a><span>|</span> <a href="http://www.baidu.com">百度</a>&…
Block 元素 包括 "block-level box," "block container box," and "block box" 首先 display有以下几个属性 inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row…
Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest. Takeway: Inline: Can NOT add height and width. But can add marg…
input明明写在同一行,高度也一样,在不同的浏览器或者手机上显示却不一样,经常会出现这样的情况 <input type="text" name="verify" placeholder ="请输入验证码" class="verify" /><input type="button" value="发送验证码" class="verify_code"…
本文首发于个人博客 http://www.lijundong.com/image-and-line-height/ 今天在做一个静态页面时,图片底部出现一条 3px 高度的白边,既不是 margin 也不是 padding,找了好久没能解决,后来才发现与 line-height 相关,问题解决后查缺补漏,这里作下笔记. 解决问题之前需要理清楚几个概念,基线.line-height.vertical-align.inline 元素. 基线(baseline) 基线(Baseline) 是字体排印学…
CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align w3school指出,text-align用于设置块级元素内文本的水平对齐方式.而这里所说的文本,是嵌套在block元素内的inline元素或者inline-block元素.例如嵌套行内标签的文字.图片.input表单控件等:而对block水平的元素是没有作用的.所以如果想实现两端对齐,可以将子元…
inline, inline-block元素在同行元素的排版布局中非常有用,但是时常会出现一些莫名奇妙的问题.要解决这些问题,深刻理解inline,inline-block元素的特征有非常重要的意义. 下面这篇英文文章解释的非常清晰,我视图把他翻译一下,同时也好好学习梳理一下. http://christopheraue.net/2014/03/05/vertical-align/ 我常常需要side by side地垂直方向对齐元素.为了实现垂直对齐,时而我使用float来实现,时而又实用po…
用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 block 解释:指定对象为块元素(占据一定矩形空间,可以通过设置高度.宽度.内外边距等属性,来调整的这个矩形的样) 特点:1.处于常规流中时,如果width没有设置,会自动填充满父容器  2.可以应用margin/padding  3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素  4.处…
1 2 3 4 div{width:900px;} div li{ display:inline-block; width:300px;} <ul>     <li></li> 1 <li></li> 1 <li></li> 1 </ul> 发现宽度为900px的div居然放不下3个宽度为300px的内联元素li,只好改用了float:left来布局.后来上网一查,才知道inline-block是有默认间距的,…
转自:http://www.cnblogs.com/qwcbeyond/archive/2012/05/08/2490897.html 32位机一般默认4字节对齐(32位机机器字长4字节),64位机一般默认8字节对齐(64位机机器字长8字节) 1.先看下面的例子:struct A{   char c1;   int i;   short s;   int j;}a; struct B{   int i;   int j;     short s;   char c1;}b; 结构A没有遵守字节对…
前几天写一个页面 div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></li> <li></li> <li></li> </ul> 发现宽度为900px的div居然放不下3个宽度为300px的内联元素li,只好改用了float:left来布局.后来上网一查,才知道inline-block是有默认间距的,默认间距为4px,…
一.什么是内存对齐.为什么需要内存对齐? 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定类型变量的时候经常在特 定的内存地址访问,这就需要各种类型数据按照一定的规则在空间上排列,而不是顺序的一个接一个的排放,这就是对齐. 字,双字,和四字在自然边界上不需要在内存中对齐.(对字,双字,和四字来说,自然边界分别是偶数地址,可以被4整除的地址,和可以被8整除的地址.)无论如何,为了提高程序的性能,数据结构(尤其是栈)应该尽可能…
引言 考虑下面的结构体定义: typedef struct{ char c1; short s; char c2; int i; }T_FOO; 假设这个结构体的成员在内存中是紧凑排列的,且c1的起始地址是0,则s的地址就是1,c2的地址是3,i的地址是4. 现在,我们编写一个简单的程序: int main(void){ T_FOO a; printf("c1 -> %d, s -> %d, c2 -> %d, i -> %d\n", (unsigned int…
引言 考虑下面的结构体定义: typedef struct{ char c1; short s; char c2; int i; }T_FOO; 假设这个结构体的成员在内存中是紧凑排列的,且c1的起始地址是0,则s的地址就是1,c2的地址是3,i的地址是4. 现在,我们编写一个简单的程序: int main(void){ T_FOO a; printf("c1 -> %d, s -> %d, c2 -> %d, i -> %d\n", (unsigned int…
首先说明一下,本文是转载自: http://www.cnblogs.com/clover-toeic/p/3853132.html 博客园用的少,不知道怎么发布转载文章,只能暂时这样了. 引言 考虑下面的结构体定义: typedef struct{ char c1; short s; char c2; int i; }T_FOO; 假设这个结构体的成员在内存中是紧凑排列的,且c1的起始地址是0,则s的地址就是1,c2的地址是3,i的地址是4. 现在,我们编写一个简单的程序: int main(v…