正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?...这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题!...div的100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效。...举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的宽高都为100%的话,那cc的确切大小就是父div的大小(宽300高200),在尝试中你会发现,div显示会受自身和其上一级...你设div的高度为100%,那么它是和什么地方相对为100%? 前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度。
需求 实现父 div 里面 左右,上下动态分割 div,并上下改变父 div 的高度,并且宽和高都是按百分比(如图) 。 ? 2....一个改变父 div 高度的 arrow,用于上下拖动 , 不能占有位置,所以要绝对定位,并定位到最右下角。...上下拖动的 arrow,当上拖动时,arrow 的父 div 的高度变小,当下拖动时,arrow 的父 div 的高度变大。...拖动改变左右的 label 时,向左时,label 的父 div 的宽变小,label 的父 div 相邻的 右边的 div 宽度变大。...拖动改变上下的 label 时,向上时,label 的父 div 的高度变小,label 的父 div 相邻的下边的 div 高度变大。
01 问 题 如果将一个 img 放在 div 或 span 里面,你会发现在img下面无端端的就多出3px的空白出来。padding、margin、border都设为0,无效!...代码: ... 02 原 因 因为 img 默认是按基线( baseline )对齐的。...对比一下图片和右边的 p, q, y 等字母,你会发现这三个字母的“小尾巴”和图片下方的空白一样高 03 解决方案 要去掉空格可以使用 vertical-align: bottom 或将 img 标签变为块级元素...至于什么是基线,还记得四线三格的英语写字本么?中间第三条线就是基线。
匹配其父元素的第n个子元素,第一个编号为1 E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素 E:nth-last-of-type(n) 与:nth-last-child...() 作用类似,但是仅匹配使用同种标签的元素 E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1) E:first-of-type 匹配父元素下使用同种标签的第一个子元素...,等同于:nth-of-type(1) E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1) E:only-child 匹配父元素下仅有的一个子元素...,并有一套渲染规则,决定其子元素将如何定位,以及和其他元素的关系和相互作用 即,它是一块独立的区域,让处于 BFC 内的元素与外部元素相互隔离 如何形成 根元素 position:fixed/absolute...因为子元素脱离了父元素的文档流,所以父元素失去了高度,导致了塌陷。要解决这个问题,就是让父元素具有高度。
1.什么是 BFC机制 BFC(Block Formatting Context),块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。...的值不为static或则releative中的任何一个 在IE下, Layout,可通过zoom:1 触发 BFC布局与普通文档流布局区别: BFC布局规则: 浮动的元素会被父级计算高度(父级元素触发了...:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素 E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素...E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1) E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type...(1) E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1) E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child
BFC原理(块级格式化上下文) 含义:是页面中的一块独立渲染区域,并有一套渲染规则。它决定了其子元素如何定位,以及其它元素的关系和相互作用。...高度塌陷 原因 很多情况父盒子不方便给高度,子盒子浮动脱离文档流不占位置,使父盒子高度为0 解决方案 在浮动元素末尾加一个空标签,设clear:both 父级添加overflow:hidden 使用...初始化css的方式 * { padding:0; margin:0; } 12. 如何使英文单词发生词内断行 word-wrap:break-word。...绝对定位(子绝父相) 这里是父容器 这里是子容器 .father {...与em对应的另一个长度单位是rem,是指相对于根元素(通常是HTML元素)字体的大小。
总结绝对定位的相对元素以及常见的解决方案 子绝父相 子元素绝对定位、 父元素相对定位 子绝父绝 子元素绝对定位 父元素绝对定位 子绝父固 子元素绝对定位 父元素固定定位 三....清除浮动 浮动的问题 – 高度塌陷 由于浮动元素脱离了标准流,变成了脱标元素,所以不再向父元素汇报高度 父元素计算总高度时,就不会计算浮动子元素的高度,导致了高度坍塌的问题 解决父元素高度坍塌问题的过程...,一般叫做清浮动(清理浮动、清除浮动) 清浮动的目的是 让父元素计算总高度的时候,把浮动子元素的高度算进去 如何清除浮动呢?...清除浮动的方法 事实上我们有很多方法可以清除浮动 方法一: 给父元素设置固定高度 扩展性不好(不推荐) 方法二: 在父元素最后增加一个空的块级子元素,并且让它设置clear: both 会增加很多无意义的空标签...比如使容器的所有子项等分可用宽度/高度,而不管有多少宽度/高度可用。 比如使多列布局中的所有列采用相同的高度,即使它们包含的内容量不同。
块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。...与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外) BFC 的区域不会与 float 的元素区域重叠 计算 BFC 的高度时,浮动子元素也参与计算 文字层不会被浮动层覆盖...浮动带来的问题: 父元素的高度无法被撑开,影响与父元素同级的元素 与浮动元素同级的非浮动元素(内联元素)会跟随其后 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。...等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。...参数是auto时候,子元素内容大于父元素时出现滚动条。 参数是visible时候,溢出的内容出现在父元素之外。 参数是hidden时候,溢出隐藏。
:checked 单选框或复选框被选中 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?...:after 在元素内部最前添加内容 :before 在元素内部最后添加内容 :nth-child(n) 匹配父元素下指定子元素,在所有子元素中排序第n :...:last-child :only-child :nth-of-type(n) 匹配父元素下指定子元素,在同类子元素中排序第n :nth-last-of-type(n) 匹配父元素下指定子元素...父元素的高度无法被撑开,影响与父元素同级的元素 与浮动元素同级的非浮动元素会跟随其后 列举几种清除浮动的方式?...例如,父级行高为 1.5,子元素字体为 18px,则子元素行高为 1.5 * 18 = 27px 百分比:将计算后的值传递给后代 设置元素浮动后,该元素的 display 值会如何变化?
p:first-child{ ... } 2、:last-child 作用:匹配 属于其 父元素中的 最后一个子元素...4、:empty 匹配没有子元素的元素 ex: div:empty{ ... }... 5、:only-child 匹配属于其父元素中唯一子元素的元素 3、否定伪类 1、...2、url() : 生成一副图像 4、解决的两个问题 1、浮动元素父元素的高度问题 2、解决外边距的溢出问题 3、弹性布局(难点) 1、什么是弹性布局...5、stretch 如果项目未设置高度或高度为auto时,那么项目将沾满整个容器的高度
6 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?...浮动带来的问题: 父元素的高度无法被撑开,影响与父元素同级的元素 与浮动元素同级的非浮动元素(内联元素)会跟随其后 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。...div,通过改变此div的属性使两个盒子分属于两个不同的BFC,以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。...41 有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度 外层div使用position:relative;高度要求自适应的div使用position: absolute...参数是auto时候,子元素内容大于父元素时出现滚动条。 参数是visible时候,溢出的内容出现在父元素之外。 参数是hidden时候,溢出隐藏。
6 如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?...浮动带来的问题: 父元素的高度无法被撑开,影响与父元素同级的元素 与浮动元素同级的非浮动元素(内联元素)会跟随其后 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。...等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。...41 有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度 外层div使用position:relative;高度要求自适应的div使用position: absolute...参数是auto时候,子元素内容大于父元素时出现滚动条。 参数是visible时候,溢出的内容出现在父元素之外。 参数是hidden时候,溢出隐藏。
id是box的元素的父元素 $('#box').parent(); //选择id是box的元素的所有子元素 $('#box').children(); //选择id是box的元素的同级元素 $(...如下: $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent...() //跳到ul的父元素,也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp...‘abc123’中的任意一个字符 [a-z0-9] : 匹配a到z或者0到9中的任意一个字符 限制开头与结尾: ^ 以紧挨的元素开头 $ 以紧挨的元素结尾 那么参数部分,常用的有: g:global,全文搜索...,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
;淡紫色是子级,相对于父级居中的。...就是一个父级包裹一个子级,这里的子级是固定的300px*300px,代码如下: 最终的实现效果如下...就是一个父级包裹一个子级,这里的子级是固定的300px*300px,代码如下: 最终的实现效果如下...定位实现水平垂直居中方案(一) 步骤如下: 使子元素相对于容器元素定位 子元素开启绝对定位 设置该元素的偏移量,值为50% 减去宽度/高度的一半 实现CSS代码如下: .parent { /* 1....> 内容 左列容器开启左浮动 右列容器开启右浮动 使中间自适应的宽度为父级容器减去两个定宽的列 实现CSS代码如下: .left
3、first-child与first-of-type的区别是什么? 二者的区别如下: first-child匹配的是父元素的第一个子元素,可以说是结构上的第一个子元素。...first- of-type匹配的是该类型的第一个元素,类型就是指冒号前面匹配到的元素,并不限制是第一个子元素,只要是该类型元素的第一个即可。当然,这些元素的范围都属于同一级,也就是同辈。... p:first-child匹配到p元素,因为p元素是div的第一个子元素。...span:first-child匹配不到span元素,因为span是div的第二个子元素。 p:first-of-type匹配到p元素,因为p是div所有为p的子元素中的第一个。...span:first-of-type匹配到span元素,因为span是div所有为span的子元素中的第一个。 4、当使用 transform:translate属性时会出现闪烁现象,如何解决?
在div的width为固定的情况下,设置height为0,使内容自然溢出,再通过设置padding-bottom使元素有一定高度。...E元素 相邻选择器(h1 + p) 子选择器(ul > li) 后代选择器(li a) 伪类选择器 E:first-child:匹配父元素的第一个子元素 E:link 匹配所有未被点击的链接 E:focus...若从左向右的匹配,过程是:从.mod-nav开始,遍历子节点header和子节点div,然后各自向子节点遍历。...[13] 9.清除浮动方法及原理 为什么要清除浮动:父元素因为子级元素浮动引起的内部高度为0的问题。...对比两者可以发现,双飞翼布局与圣杯布局的主要差别在于: 1.双飞翼布局给主面板(中间元素)添加了一个父标签用来通过margin给子面板腾出空间 2.圣杯布局采用的是padding,而双飞翼布局采用的margin
三、清除浮动 1、清除浮动的原因: 1.1 子元素有浮动时,父级元素将保不住子元素(脱离文档流且提升层级半层),此时父级元素高度不能被撑开,影响布局 2、...给父级元素加上高度,让其在视觉效果上呈现正常 --》扩展性不好,假如项目高度不固定(如瀑布流布局),此时没法由子元素内容确定父元素高度 2.2 给父级加浮动。 ...1.1 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。...给父级元素加上高度,让其在视觉效果上呈现正常 --》扩展性不好,假如项目高度不固定(如瀑布流布局),此时没法由子元素内容确定父元素高度 2.2 给父级加浮动。 ...1.1 它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
为第一个(最后一个)子元素设置外边距 解决方案: a. 为父元素增加边框(透明的),弊端:父元素会变高 b. 可以为父元素设置上内边距来取代子元素上外边距,弊端:父元素高度会变高 c....浮动元素为父元素高度带来的影响,父元素的高度是以未浮动的子元素高度为准,如果一个元素中所有的子元素全部都是浮动的,那么该父元素的高度为 0,解决父元素的高度问题方案: (1)....直接设置父元素高度, 弊端:必须知道父元素的高度 (2). 让父元素也浮动 弊端:对后续元素会产生影响 (3).... ,非 empty,有一个空格 c. ,是 empty E. :only-child 匹配属于其父元素中的唯一子元素 ③....父元素的高度如果参照上级元素设为100%,那么在弹性布局时,子元素也参照父元素设为100%,子元素将无法显示,解决方案时将子元素设为固定高度 63.
领取专属 10元无门槛券
手把手带您无忧上云