主要是HTML5 的拖放(Drag 和 Drop) 例子(不需要对div设置ID): div2!... div3 上面函数介绍: ondrop
块级标签的默认文档流是上下排列的,再配上横向排列的方法,请过适当的嵌套,可以应对几乎所有常见的布局需求,因此,我决定总结一下 div 横向排列的方法。...成功横向排列了,但是有几个问题~ float 的特点: 多个 div 右浮动时,顺序会颠倒,请注意看 div2 和 div3,可以通过将它们再用一个 div 包起来,然后对它们设置左浮动,对父 div...inline-block 行块标签 ? ? 横排成功~但同样有些问题: inline-block 特点: 元素间会有空白。...这个空白其实是空白符,因为 inline-block 会使元素在行内排列,也就是跟文字在一起排列,而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符,所以就会出现缝隙...在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差,丑拒。 ? 不用 inline-block,嘿嘿~ 可以换行,如下图 ?
二、解决办法 1.CSS让div等块级元素水平居中 原理:让一个div等块级元素水平居中,直接用CSS就可以做到。...只要设置了div等块级元素的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得div等块级元素居中。 ...,最后将该div等块级元素分别左移和上移,左移和上移的大小就是该div等块级元素宽度和高度的一半。 ...如果当页面div等块级元素宽度和高度是动态的,比方说需要弹出一个div等块级元素元素层并且要居中显示,div等块级元素的内容是动态的,所以宽度和高度也是动态的,这时需要用jQuery可以解决居中。 ...注意div等块级元素的CSS设置要在resize()方法中完成,就是每次改变窗口大 小时,都要执行设置div等块级元素的CSS。
div块级元素 div是一个特别重要的标签 是块级元素 上代码,看图!...可以看到我们定义的样式是三个正方形的块style(css)后面会细讲 style="width: 600px;height: 600px;background-color: black; 分别对应宽高和背景色...那么分块有什么用呢 切割成不同的块互不干扰 方便定位和布局 </div...可以看出div其实自带了换行效果 但是如果我们需要第一行有两个块怎么办呢 浮动和定位 浮动 常见为左右浮动 float: left/right 大家看出来英语很重要了吧 用法如下 <...如果把每一块内容实现 就是一个页面了 一个好看的网站往往都会有好看的布局,所以学会div的使用以及浮动和定位是很重要的 有兴趣的小伙伴可以试着截你喜欢的网站的图 拼装一个去装逼哦,但是要注意不要侵权哦
让div,span等块级、非快级元素排列在同一行 by:授客 QQ:1033553122 例子:让两个div排列在同一行 给div添加float样式 div1 div2... ?...style="height: 40px;width: 80px;background-color: red" > div1 <span style="height: 40px...说明:第一个<em>div</em>和第一个span之间存在空白间隙,那是因为<em>div</em>元素和span元素之间存在换行等空白,去除即可,如下 <<em>div</em> style="height: 40px;width: 80px;
定义列表 **Markdown Extra** 定义列表语法: 项目1 项目2 : 定义 A : 定义 B 项目3 : 定义 C : 定义 D > 定义D内容 ### 代码块...class="se-preview-section-delimiter"> 脚注 生成一个脚注1....块级公式: x=−b±b2−4ac−−−−−−−√2a x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} 更多LaTex语法请参考 这儿.... 或者流程图: Created with Raphaël 2.1.0...IE9以下不支持 IE9,10,11存在以下问题 不支持离线功能 IE9不支持文件导入导出 IE10不支持拖拽文件导入 ---- 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn
manager/Volume groups/VG0 第7步:创建LV (1)LV介绍 LV=逻辑卷 4*1T(Disk)——4T(MD0)——4T(VG0)——任意大小空间(LV) SAN卷:iSCSI,FC(块存储
HTML5 + CSS3 + JavaScript ; 不是所有的浏览器 都支持 HTML5 ; HTML5 非常适用于移动端开发 ; 二、HTML5 语义化标签 ---- 传统发那个是 , 使用 div...进行布局 , 搜索引擎不知道这个盒子是做什么的 ; HTML5 新增加了如下语义化标签 : 头部标签 : 导航标签 : 内容标签 : 块级标签 : <..., 目的是为了让搜索引擎更容易理解网页内容 ; 每个标签在同一个网页中可以使用多次 ; 移动端页面开发时 , 优先使用语义化标签 ; PC 端很少使用这些标签 , 低版本浏览器中不支持这些标签 ; IE9...中 , 会将语义化标签当做 行内元素 , 需要为语义化标签设置 display: block; 样式 , 将其作为块级元素进行显示 ; header, nav,...> header, nav, article, section, footer { /* 兼容 IE9
举例: 2,页面有多个div块,如何让...body页面不使用滚动条,只在某个div内使用滚动条 先说说正常显示的,显示滚动条和不显示滚动条,效果图如下: 代码: iframe 中始终显示滚动条:</h3...2,另外可能会出现关闭了整个body的滚动条后,发现div的滚动即使启动了也没有显示,这种情况可能是没有设置此div的高度或宽度,这是需要设置的。
position:absolute:会使元素脱离文档流,以致于它们不能影响周围的元素 手动添加内外边距的方法:需要父元素高度固定 transform:translateY:属于 CSS3 新特性,对 IE8、IE9...Demo 1:任意一个块级元素,里面若有图片,则块级元素高度基本上都要比图片的高度高 <img src="....子元素的垂直<em>中心</em>线与父级元素基线的位置往上二分之一 X 高度(X 的<em>中心</em>) 所在线对齐,通俗一点讲,就是图中红线表示父元素的垂直<em>中心</em>线,蓝线表示子元素的垂直<em>中心</em>线,可以明显的看到 蓝线 与 X 的<em>中心</em>保持一致...比较幸运的是,现在很多网站的兼容都是基于 <em>IE9</em>,所以可以忽略这个问题啦。 <!...大的部分都是由一<em>块</em>一<em>块</em>的虚线框中部分组合而成的。
众所周知,HTML标签有两类: 块级元素 div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes...还有很多是独立的标签,我们如何来使用它编写更优秀的页面,下面就说说 块级元素与块级元素平级、内嵌元素与内嵌元素平级 //span是行内元素...,p是块级元素,所以这个是错误的嵌套 //对的 块元素可以包含内联元素或某些块元素,但内联元素不能包含块元素,它只能包含其它的内联元素... 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素 h1、h2、h3、h4、h5、h6、p...、dt 块级元素不能放在标签p里面 嵌套错误可能引起的问题 元素开始与结束标签嵌套错误,页面可以在大部分浏览器被正常解析,IE9会出现解析错误 在元素内嵌入等元素造成所有浏览器的解析错误
dom.currentStyle.width/height (只有IE兼容)取到的是最终渲染后的宽和高 (3)window.getComputedStyle(dom).width/height 同(2)但是多浏览器支持,IE9...IE9 以上支持,除此外还可以取到相对于视窗的上下左右的距离。 (6)dom.offsetWidth/offsetHeight 包括高度(宽度)、内边距和边框,不包括外边距。最常用,兼容性最好。...class='child'> 它的父元素实际高度是 100px 或 110px 都可以。...2.5 BFC(边距重叠解决方案) 2.5.1 BFC基本概念 BFC: 块级格式化上下文 BFC基本概念:BFC 是 CSS 布局的一个概念,是一块独立的渲染区域,是一个环境,里面的元素不会影响到外部的元素...的 BFC 属性,使下面的子 div 都处在父 div的同一个 BFC 区域之内) 4、去除边距重叠现象,分属于不同的 BFC 时,可以阻止 margin 重叠 2.6 IFC 2.6.1 IFC基本概念
HTML5 已经是大势所趋 二、HTML5 新增标签 什么是语义化 新增了那些语义化标签 header — 头部标签 nav — 导航标签 article — 内容标签 section — 块级标签...使用语义化标签的注意 - 语义化标签主要针对搜索引擎 - 新标签可以使用一次或者多次 - 在 `IE9` 浏览器中,需要把语义化标签都转换为块级元素 - 语义化标签,在移动端支持比较友好, - 另外...; } div span:nth-of-type(2) { background-color: lightseagreen; } div span:nth-of-type(3...的移动主要是指 水平、垂直方向上的移动 translate 最大的优点就是不影响其他元素的位置 translate 中的100%单位,是相对于本身的宽度和高度来进行计算的 行内标签没有效果 代码演示 div...rotate 语法 /* 单位是:deg */ transform: rotate(度数) 重点知识点 rotate 里面跟度数,单位是 deg 角度为正时,顺时针,角度为负时,逆时针 默认旋转的中心点是元素的中心点
IE6识别 * 、_ IE7识别 * 、+ IE8识别 * 、\9,\0 只有IE8识别 \0/ ie9只识别:\9 FF什么都不识别 .test{ ...color:#09F\0; /* IE8/9 */ color:#09F\0/; /* IE8 only */ } :root .test { color:#963\9; } /* IE9...Ps:老外的方法都是\0,根本没考虑Opera*/ @media all and (min-width:0){ .test{color:red\9; }/* IE9 only */ } 宽度为300px的div 通过借助!...如果你想让他居下方则在修改line-height:30px; 数值越大越局下,为了防止撑破层,还需要再给一个样式overflow:hidden;(超出的部分不显示) 第四招:给每一个块对象设置三个样式
window.getComputedStyle(dom).width/height 同上一个但是多浏览器支持,IE9以上支持 dom.getBoundingClientRect().width/height...IE9以上支持,除此外还可以取到相对于视窗的上下左右的距离。 根据盒模型解释边距重叠 当两个外边距相遇时,他们将形成一个外边距,合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。...注意:只有普通文档流中块框的垂直外边距才会发生外边距合并,行内框、浮动框或绝对定位之间的外边距不会合并。...它是页面中的一块渲染区域。而且有一套渲染规则,它决定了其子元素将怎样定位。以及和其它元素的关系和相互作用.BFC和IFC都是常见的FC。...; float: left; background: black; } .right { height:200px; background-color:red; } 可以看到浮动的地方与另一块内容重叠了
important; color: #000;} test1 test2 说明:在标准模式中 “-″减号是IE6专有的hack “\9″ IE6/IE7/IE8/IE9.../IE10都生效 “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack “\9\0″ 只对IE9/IE10生效,是IE9/10的hack (3)选择器前缀法,顾名思义,就是给选择器加上前缀...background: green; }} 只对IE8/9/10有效 @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9...textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; } (2)IE6双边距bug: 块属性标签添加了浮动...class="wrap"> <script type="text/javascript
常见的布局属性 (1)display 确定元素的显示类型: block:块级元素。 inline:行内元素。...inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高)。 (2)positon 确定元素的位置: static:默认属性值。...flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题,则可以放心大胆地使用 flex 布局。...float 所带来的影响 1、对自身的影响: 形成“块”(BFC) 位置尽量靠上 位置尽量靠左/右 下面这两个并列的div1和div2,设置为浮动之后的效果:(都是尽量靠左显示的) ?...2、对兄弟元素的影响: 不影响其他块级元素的位置 影响其他块级元素的内部文本 3、对父级元素的影响: 从父级的布局中“消失” 造成父级元素的高度塌陷:父级元素撑开 div1 之后(父级元素里没有其他元素的情况下
注意:IE9、10、11的HTMLCollection与其他浏览器的HTMLCollection可不相同哦,具体请看下一节吧!...其实IE这一传统一直延续到IE11,这就导致IE9、10、11下的HTMLCollection与W3C标准出现同名而不同性质的问题了。 何为类函数?...通过索引获取指定位置的类 length; //表示类的个数 // 无法通过[{Number} 索引]的方式来设置类,只能通过该方式来获取类 那么现在我们就着手polyfill吧,注意难点在实时同步这一块,...html:,使用jquery-1.10.2 var $el = $('#div'), el = $el[0];...// raw // undefined // el.dataset.newRaw = 'newRaw';
1,去掉移动端苹果手机点击时阴影 div { -webkit-tap-highlight-color:rgba(0,0,0,0); } 2,输入去掉边框,单击阴影,下划线 输入{ 边界:0; 大纲:无...2; //控制多行的行数 -webkit-box-orient:垂直; } 5,水平/垂直居中定位 //绝对定位未知高度,距顶部,左边50%,然后转换:translate(-50%,-50%),不支持IE9...中央{ 显示:flex; align-items:center; 证明内容:中心; } 6,iPhone X页面适应 具体参考https://www.cnblogs.com/lolDragon/p/7795174...moz-placeholder {} / * Firefox版本19+ * / :-ms-input-placeholder {} / * IE浏览器* / //冒号前写input或textarea等元素 // IE9
领取专属 10元无门槛券
手把手带您无忧上云