首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

div级标签横向排列的方法总结

级标签的默认文档流是上下排列的,再配上横向排列的方法,请过适当的嵌套,可以应对几乎所有常见的布局需求,因此,我决定总结一下 div 横向排列的方法。...成功横向排列了,但是有几个问题~ float 的特点: 多个 div 右浮动时,顺序会颠倒,请注意看 div2 和 div3,可以通过将它们再用一个 div 包起来,然后对它们设置左浮动,对父 div...inline-block 行标签 ? ? 横排成功~但同样有些问题: inline-block 特点: 元素间会有空白。...这个空白其实是空白符,因为 inline-block 会使元素在行内排列,也就是跟文字在一起排列,而我们源代码中 divdiv 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符,所以就会出现缝隙...在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差,丑拒。 ? 不用 inline-block,嘿嘿~ 可以换行,如下图 ?

3.2K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    div级元素水平以及垂直居中的解决办法

    二、解决办法 1.CSS让div级元素水平居中  原理:让一个div级元素水平居中,直接用CSS就可以做到。...只要设置了div级元素的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得div级元素居中。  ...,最后将该div级元素分别左移和上移,左移和上移的大小就是该div级元素宽度和高度的一半。    ...如果当页面div级元素宽度和高度是动态的,比方说需要弹出一个div级元素元素层并且要居中显示,div级元素的内容是动态的,所以宽度和高度也是动态的,这时需要用jQuery可以解决居中。    ...注意div级元素的CSS设置要在resize()方法中完成,就是每次改变窗口大 小时,都要执行设置div级元素的CSS。

    1.8K20

    初识HTML(三)---div级元素以及浮动和定位(超详细带演示)

    div级元素 div是一个特别重要的标签 是级元素 上代码,看图!...可以看到我们定义的样式是三个正方形的style(css)后面会细讲 style="width: 600px;height: 600px;background-color: black; 分别对应宽高和背景色...那么分块有什么用呢 切割成不同的互不干扰 方便定位和布局 </div...可以看出div其实自带了换行效果 但是如果我们需要第一行有两个怎么办呢 浮动和定位 浮动 常见为左右浮动 float: left/right 大家看出来英语很重要了吧 用法如下 <...如果把每一内容实现 就是一个页面了 一个好看的网站往往都会有好看的布局,所以学会div的使用以及浮动和定位是很重要的 有兴趣的小伙伴可以试着截你喜欢的网站的图 拼装一个去装逼哦,但是要注意不要侵权哦

    88230

    【HTML5】HTML5 语义化标签 ( HTML5 简介 | 新增特性 | 语义化标签及代码示例 )

    HTML5 + CSS3 + JavaScript ; 不是所有的浏览器 都支持 HTML5 ; HTML5 非常适用于移动端开发 ; 二、HTML5 语义化标签 ---- 传统发那个是 , 使用 div...进行布局 , 搜索引擎不知道这个盒子是做什么的 ; HTML5 新增加了如下语义化标签 : 头部标签 : 导航标签 : 内容标签 : 级标签 : <..., 目的是为了让搜索引擎更容易理解网页内容 ; 每个标签在同一个网页中可以使用多次 ; 移动端页面开发时 , 优先使用语义化标签 ; PC 端很少使用这些标签 , 低版本浏览器中不支持这些标签 ; IE9...中 , 会将语义化标签当做 行内元素 , 需要为语义化标签设置 display: block; 样式 , 将其作为级元素进行显示 ; header, nav,...> header, nav, article, section, footer { /* 兼容 IE9

    1.9K30

    关于 vertical-align 你应该知道的一切

    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>的虚线框中部分组合而成的。

    2.8K20

    HTML嵌套规则

    众所周知,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会出现解析错误 在元素内嵌入等元素造成所有浏览器的解析错误

    1.8K30

    【CSS】309- 复习 CSS盒模型

    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基本概念

    1.5K30

    前端成神之路-HTML5CSS3_01

    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 角度为正时,顺时针,角度为负时,逆时针 默认旋转的中心点是元素的中心

    44910

    CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

    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;(超出的部分不显示) 第四招:给每一个对象设置三个样式

    2.2K40

    【基础巩固】- 带你搞懂CSS盒模型

    window.getComputedStyle(dom).width/height 同上一个但是多浏览器支持,IE9以上支持 dom.getBoundingClientRect().width/height...IE9以上支持,除此外还可以取到相对于视窗的上下左右的距离。 根据盒模型解释边距重叠 当两个外边距相遇时,他们将形成一个外边距,合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。...注意:只有普通文档流中框的垂直外边距才会发生外边距合并,行内框、浮动框或绝对定位之间的外边距不会合并。...它是页面中的一渲染区域。而且有一套渲染规则,它决定了其子元素将怎样定位。以及和其它元素的关系和相互作用.BFC和IFC都是常见的FC。...; float: left; background: black; } .right { height:200px; background-color:red; } 可以看到浮动的地方与另一内容重叠了

    74920

    前端学习(20)~css布局(十三)

    常见的布局属性 (1)display 确定元素的显示类型: block:级元素。 inline:行内元素。...inline-block:对外的表现是行内元素(不会独占一行),对内的表现是级元素(可以设置宽高)。 (2)positon 确定元素的位置: static:默认属性值。...flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题,则可以放心大胆地使用 flex 布局。...float 所带来的影响 1、对自身的影响: 形成“”(BFC) 位置尽量靠上 位置尽量靠左/右 下面这两个并列的div1和div2,设置为浮动之后的效果:(都是尽量靠左显示的) ?...2、对兄弟元素的影响: 不影响其他级元素的位置 影响其他级元素的内部文本 3、对父级元素的影响: 从父级的布局中“消失” 造成父级元素的高度塌陷:父级元素撑开 div1 之后(父级元素里没有其他元素的情况下

    50420
    领券