inline-block

display:block 　　1. 独占一行 ，block元素宽度自动填满其父元素宽度 　　2、block元素可以设置width,height属性。块元素即使设置了宽度,仍然是独占一行。 　　3、block元素可以设置margin和padding属性。 display:inline特点 　　1、 inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行 ， 其宽度随元素的内容而变化 　　2、inline元素设置width,height属性无效。 　　3、inline元素的margin和padding属性， 水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果 ；但竖直方向的padding-top, 　　　　padding-bottom, margin-top, margin-bottom不会产生边距效果。 display:inline-block特点 　　是block和inline元素的综合体： block元素不再独占一行，多个block元素可以同排一行，且元素具有block的属性，可设置宽高 ， 来源： https://www.cnblogs.com/houchen/p/11604830.html

小程序中有横向滚动的swiper，H5中目前得手动实现。 实现方法如下： 外层需要设置： overflow: scroll;white-space: nowrap; 内层需要设置： display: inline-block; <div class="noticeListBox"> <div class="noticeList" v-for="(item,index) in 10"> </div> </div> .noticeListBox { width: 100%; box-sizing: border-box; overflow: scroll; white-space: nowrap; } .noticeListBox::-webkit-scrollbar { display: none; } .noticeList{ display: inline-block; } 来源： https://www.cnblogs.com/teamemory/p/11603123.html

一、行内元素和块级元素 1.1、块级元素（inline）： 　　　　　　它独占一行； 　　　　　　它的宽高可以设置； 　　　　　　默认时，宽度是100%； 　　例如：<div>、<h1-h6>、<ul>、<ol> 、<li>等。 1.2、行内元素（block）： 　　　　　　它的宽度由内容决定，高度有内容字体大小决定； 　　　　　　它不可以设置宽高； 　　　　　　它可以和其他的行内元素位于同一行； 　　例如：<span>、<label>、<i>、<e>等。　 1.3、行内块级元素（ inline-block ）： 　　　　　　它即可以和其他的行内元素位于同一行， 　　　　　　元素的宽高及与边的间距都可以设置； 　　例如：<input>、<img>、<select>等。 二、块级元素、行内元素、行内块级元素转换 2.1、display：block；转换成块级元素。 2.2、display：inline；转换成行内元素。 2.3、display：inline-block；转换成行内块级元素。 来源： https://www.cnblogs.com/start-bigin/p/11543639.html

ie6上css碰到的坑 前两天在给一个项目做东西的时候，碰到一个有意思的项目，是需要兼容ie6，有一些碰到并且解决的问题，给大家写下来，方便大家以后碰到类似的问题哈～ 1.important支持的不够好 1.1为什么说不够好？ important某些情况下不能决定最终的样式属性。 1.2代码！代码！！ 我们通过对颜色的控制说明这一切~ <style type="text/css"> div { width: 100px; height: 100px; border: aliceblue 2px solid; } .frist { background-color: red !important; background-color: blue; } .second { background-color: red !important; } .third { background-color: blue; } .second { background-color: blue; } </style> <div class="frist"></div> <div class="second third"></div> <div class="second"></div> 1.3 上图！上图！！ 谷歌 ie6 1.4我们发现了啥？ 1.在同一个css代码块中的important没那么强力

一，行内元素与块级元素的区别： 1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。 块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。 3.行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效 二、行内元素和块级元素转换 display:block; (字面意思表现形式设为块级元素) display:inline; (字面意思表现形式设为行内元素) 三、inline-block inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了 inline-block 的元素有效） 属性。 HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如<div>和<span>就不同，而<strong>和<p>也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。 1. 替换和不可替换元素 从元素本身的特点来讲，可以分为替换和不可替换元素。 a) 替换元素 替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。 (X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如： <img src=”cat.jpg” /> <input type="submit" name="Submit" value="提交" /> 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。 b) 不可替换元素 (X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。例如： <p>段落的内容</p>

本文转载于: 猿2048 网站 流式风格 1、网格设计 方法一、float（浮动） float 将4个div 从左至右排序，当外围区块小时，4个div会根据外围的区块宽度重新调整内容显示的位置。 原理就是利用float:left将元素浮动靠左排列，反之用靠右排列，当超过容器最大宽度时，div就会自动挤到下一行。 方法二、display:inline-block 使用display:inline-block也可以实现，实现从左向右排列，只要把原本的float:left换成display:inline-block就获得一样的效果，同时也可以通过指定text-align来达到文字靠左向靠右对齐。 来源： https://my.oschina.net/u/4191619/blog/3100301

测试复制代码、代码高亮 1 p{ 2 margin: 0; 3 padding: 0; 4 display: inline-block; 5 } 6 i{ 7 font-style: normal; 8 display: inline-block; 9 } 10 select,input{ 11 border: none; 12 outline: none; 13 } 14 15 /* #top模块内界面 样式*/ 16 .top{ 17 line-height: 30px; 18 font-size: 13px; 19 color: #868686; 20 } 21 22 .top .call{ 23 float: left; 24 padding-left: 20px; 25 background:url(../img/icon-call.png) no-repeat center left; 26 } 来源： https://www.cnblogs.com/jsword/p/11384964.html

CSS 实现自适应宽高的正圆 利用CSS伪元素增加父元素的高度，使其变成一个正方形 代码 < span class = " circle-container " > < span class = " circle " > {{number | filterNumber}} </ span > </ span > .circle-container { display: inline-block; border-radius: 50%; min-width: 50px; /*如果min-height太小（一般>=25即可，这里取50为了使数字在3位数以下大小一致） 会被字体的大小撑开导致形成的圆不圆*/ min-height: 50px; padding: 5px; text-align: center; box-sizing: content-box; line-height: 1; white-space: nowrap; &:before { content: ''; display: inline-block; vertical-align: middle; padding-top: 100%; height: 0; } & > span{ display: inline-block; vertical-align: middle; } } Refernce https:/

---恢复内容开始--- 1.日历组件 1.分析功能：日历基本功能，点击事件改变日期，样式的改变 1.结构分析：html 1.分为上下两个部分 2.上面分为左按钮，中间内容展示，右按钮 下面分为周几展示和日期展示 3.基本结构页面html书写 <template> <div class="calender2"> <div class="date-header"> <div class="pre-month"></div> <div class="show-date">2019年8月9日</div> <div class="next-month"></div> </div> <div class="date-content"> <div class="week-header"> <div v-for="item in ['日','一','二','三','四','五','六']" :key= item >{{ item }}</div> </div> <div class="week-day"> <div class="every-day" v-for="item in 42" :key="item" >{{ item }}</div> </div> </div> </div></template> *{ margin: 0px; border: 0px; list-style: