今天遇到一个问题，给div设置高度 height: 100%;却没有生效，在f12审查元素的时候可以看到高度字占据了半屏，并没有占据100%全屏，也就是说，div高度设置100%无效。 ?...记录一下解决办法: 找到div的父级元素，并且给父级元素手动设置一个高度，这个问题就解决了。...错误原因，根本在于没有浏览器是计算元素高度和宽度的原理： Web浏览器在计算有效宽度时会自动将页面内容平铺填满整个横向宽度。...但是浏览器根本就不计算内容的高度， 当一个元素的高度设定为百分比高度时， 无法根据获取父元素的高度，也就无法计算自己的高度。
div { width: 100%; /* 这是多余的 */ height: 100%; /* 这是无效的 */ background: url(bg.jpg); } 然后他发现这个...高度永远是 0，哪怕其父级塞满了内容也是如此。...1．为何 height:100%无效 有一种看似合理的说法：如果父元素 height:auto 子元素还支持 height:100%，则 父元素的高度很容易陷入死循环，高度无限。...例如，一个 元素里面有一张 vertical-align 为 bottom 同时高度为 192 像素的图片，此时，该高度就是 192 像素，假设此时插入一个子元素，高度设为 100%...例如，在下面这个例子中，父元素采用“最大宽度”，然后有一个 inline-block 子元素宽度 100%： <span
正像你所知道的那样，设置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%继承上一级的高度。
前端面试基础知识题 1.两个同级的相邻元素之间，有看不见的空白间隔，是什么原因引起的？有什么解决办法？...浮动带来的问题： 父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素（内联元素）会跟随其后 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。...+ border + margin 也就是，width/height 只是内容高度，不包含 padding 和 border 值。... .box { width: 200px; height: 100px; padding: 20px; box-sizing: border-box; } 盒子模型 这时候，就可以发现盒子的所占据的宽度为200px。
" /> <div id="a1" style= "color: #000; background-color: #66FF66; width: 100px; height...: 100px; margin-top: 20px; text-align: center;"> 演示块 <script src="jq...width()/height() 设置/返回元素的宽度/<em>高度</em>（content;不包括内边距、边框、外边距） innerWidth()/innerHeight() 设置/返回元素的宽度/<em>高度</em>（Content...(支持过滤参数) next() 返回被选元素的下一个<em>同级</em>元素 nextAll() 返回被选元素之后的所有<em>同级</em>元素 nextUntil() 返回被选元素与参数之间的所有<em>同级</em>元素 prev...() 返回被选元素的上一个<em>同级</em>元素 prevAll() 返回被选元素之前的所有<em>同级</em>元素 prevUntil() 返回被选元素与参数之间的所有<em>同级</em>元素 遍历 过滤 first() 返回被选元素的首个子元素
链接：http://www.css88.com/archives… display: block 设置元素为块状元素，如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准...在设计的过程中有时需要设计一个div宽高都是整个屏幕，整个时候宽度很好设置，可是高度一般很难设置，因为页面一般都是可以滚动的，所以高度一般可变，所以这个时候可以使用一个小技巧，如下。... html{ height: 100%; } body{ height: 100%; padding: 0; margin...:0; } .main{ background: red; width: 100%; height: 100%; } 基本原理：div继承的是父元素body的高度，body...弹性比为 1 的子代占据父代框的空间是弹性比为 2 的同级属性的两倍。其默认值为0，也就是不具有弹性。
······} 选择器就是css样式指定的作用在那些标签上；如果一个属性名有多个值，多个值之间使用 空格 隔开 css注释 /*注释内容*/ css选择器 选择器严格区分大小写，属性和属性值不区分大小写...标签：first-of-type{} 选中同级别中同类型的最后一个标签 标签：last-of-type{} 选中同级别的第几个标签 标签nth-child(3){} 选中同级别同类型的第几个标签 标签...:nth-of-type(3) css样式 所有的html标签都是有边框的，，只是默认的边框是不显示的 边框属性 border 用于设置边框的样式 格式：宽度 样式 颜色 例如：1px solid red...样式：solid实现，none无边，double双线 width 用于设置标签的宽度 height 用于设置边框的高度 background-color 用于设置背景的颜色 布局 浮动文档流 格式 选择器...） inline:将元素显示为行内元素（行内元素的默认属性值） inline-block:行内块标签 none:此元素将被隐藏，不显示，也不占用页面空间 字体 font-size用于设置字体大小，取值是像素
第二个影响：影响了父容器的高度，正常父元素的高度是自适应的，高度为其包含的内容总高度，而内部元素的浮动造成了父容器高度塌陷。 第三个影响：父容器高度塌陷了，将会影响和父元素同级的文档布局。...比如浮动元素和其后续的同级元素有高度重叠。 解决外部矛盾 触发 bfc 第一个是触发bfc，为什么呢，因为触发bfc后，高度会包括浮动元素的高度。...怎么解决内部矛盾呢，也就是父元素内部的浮动元素的高度和后面的同级元素的高度有重叠呢。这个时候，我们先不着急解决内部矛盾，我们来看一下，另一种解决外部矛盾的方式。...如果content不是空字符串，那么就会在页面中显示内容。...但其实清除浮动时，content都会写成空的字符串，如果content里面只设置成''空的字符，那么height也可以不写，包括overflow也可以不写，写height和overflow都是为了代码的鲁棒性
如下所示： 上面左边是有问题的显示，右边为正常显示。那么，如何解决这个问题呢？在此，我抛砖引玉提出三种我的看法，希望能有更好的方法。 法一....缺点是，考虑到现在项目上线之后模块的复用及经常需要合并css文件，当其他页面不需要这个悬浮块，就会给不需要fixed定位的页面造成负担，不推荐使用这种方法。...1 //假定的高度为60px 2 body 3 { 4 padding-bottom: 60px; 5 } 法三.增加同级占位符 个人认为这个方法最为实用，在块之外再包裹一层div，然后再增加一个与同级的块，这个块的高度设置为与同样高，不包含任何内容，这样就可以起到一个占位符的效果，在页面最底占据与同样高度的空间，当然页面滑到最下方，原本的悬动块就会与这个占位块完美重叠。
输入框还有一个按钮+下面的通栏 因为用到左浮，右浮的地方不同我们可以写一个通类 这里的logo图片如果不定义宽高会影响下面的通栏的设置，影响其中的第一个为首的顺序无法对齐 二、通栏（宽度为适应屏幕所以是100%...，不用设定了） 效果 分析：有一个ul里面有6个li，鼠标滑过的时候文字颜色改变（hover），ul在整个通栏nav中用一个nav-con这个命名的div包住，使其居中显示。...a链接是行内元素，设置宽高的时候要转成行内块 display: inline-block; font：字体加粗，字体大小 /行高和字体高度相同的时候字体会居中显示 三、banner 效果： 四...在dl下，dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
（CSS2.1 新增的值） none 此元素不会被显示。 list-item 此元素会作为列表显示。...左右边框长度必须设置，不设置则只有底部一条边框，是不能展示的。...5.计算BFC的高度，浮动元素也参与计算 BFC作用： 1.自适应两栏布局 2.可以阻止元素被浮动元素覆盖 3.可以包含浮动元素---清除内部浮动 原理：触发父div的BFC属性...，使下面的子div都处在父div的同一个BFC区域之内 4.分属于不同的BFC时，可以阻止margin重叠 CSS3特性 vh和vw vh 相对于视窗的高度，视窗高度是100vh vw 相对于视窗的宽度...，视窗宽度是100vw 这里是视窗指的是浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
3.1.1 原因：两个都是div，如果不浮动则占据一行竖着排列，给第一个div设置左浮动，则该div脱离文档流并且不占位置且层级高，此时第二个div会被第一个div覆盖住 ...3.1.2 一定要两个div并排显示，并不被覆盖，解决办法，a. ...给父级元素加上高度，让其在视觉效果上呈现正常 --》扩展性不好，假如项目高度不固定（如瀑布流布局），此时没法由子元素内容确定父元素高度 2.2 给父级加浮动。 ...第二个 margin-left: 100px; (第一个box的width)。此时IE6下两元素间出现缝隙 解决办法：不建议该写法，因为浮动层级提升。...给父级元素加上高度，让其在视觉效果上呈现正常 --》扩展性不好，假如项目高度不固定（如瀑布流布局），此时没法由子元素内容确定父元素高度 2.2 给父级加浮动。
border-top:solid 100px red; border-left:solid 100px green; border-right:solid 100px orange; border-bottom...10、如何居中 div？如何居中一个浮动元素？如何让绝对定位的 div 居中？...23、有一个高度自适应的 div，里面有两个 div，一个高度 100px，如何让另一个填满剩下的高度？...都有定位属性的同级元素，z-index 大者居上；如果是非同级的元素， 则会忽略元素本身 z-index，取与对比元素同级的祖先元素的 z-index 属性，大者居上 。...1ch 表示一个0字符的宽度，因此只有在等宽字体的情况下，我们才能用 ch 来精确的调整字符的显示。 ex：相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。
这里还要注意一个点是：浮动元素的 margin 是相对于与自己同级的浮动兄弟元素来说的。...这里如果不设置 100% 宽度，且里面没有足够的内容，那么会导致布局崩坏。 设置 left 和 right 的 margin-left 为负值，让它们回到与 center 同一行。...这里左右两列的 flex-basis 都是 100px，实际上为它们设置了固定宽度。 4.等高布局 等高布局是指多个子元素在父元素中高度相等的布局方式。...假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等。 代码示例： ......footer">footer * { margin: 0; padding: 0; } html, body { height: 100%;/* 高度一层层继承下来 */ }
关系选择器： div>p 选择所有作为div元素的子元素p div+p 选择紧贴在div元素之后p元素 div~p 选择div元素后面的所有兄弟元素...:element1~element2: :first-of-type匹配同类型中的第一个同级兄弟元素 :last-of-type匹配同类型中的最后一个同级兄弟元素 ...background-color: hsl(240,100%,50%);color:white； b....Layout布局 *display： 是否及如何显示：none隐藏，block块状显示... ...both： 用户可以调节元素的宽度和高度。
浮动元素可能引起的问题 1.父元素的高度无法被撑开，影响与父级元素同级的元素 2.与浮动元素同级的非浮动元素会跟随其后 3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的显示结构 清除浮动有什么解决办法...1.使用空标签清除浮动 在所有浮动标签后面添加一个空标签并定义CSS属性 clear:both 对比图：div未被撑开 ? ?...加个空标签就可以，弊端是增加了无语义标签 html,body,div{ margin: 0;padding: 0;} .box{border...--在这里增加 --> 当然了，如果浮动元素的后边元素你不需要浮动，可以顺便给它加个clear:both ，这样也不错。...，但这整体又浮动了所以不推荐~ 5.还有一种就是直接给浮动的元素添加属性 display：table; FF Chrome等支持，IE6/IE7测试显示不支持~ 所以还得触发hasLayout ,加上
300 的层 //设置层的外边距 .div { width:500px ; height:300px;//高度可以不设 margin: -150px 0 0 -250px;....container { height: 100%;/*定义父级高度，作为参考*/ } .extra .vertical{ display: inline-block; /*行内块显示*/...非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。...父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素会跟随其后 列举几种清除浮动的方式？...一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度 方案1： .sub { height: calc(100%-100px); } 方案2： .container
important;height:100px; 5....IE6 默认的div高度 问题： ie6默认div高度为一个字体显示的高度，所在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度 解决： 为这个容器设置下列属性之一...在ie中如果td中的没有内容，那么border将不会显示 8. div嵌套p时，出现空白行 问题： div中显示文本，ff、oprea、Chrome：top和bottom都会出现空白行，但是在...IE中li指定高度后，出现排版错误 问题： 在ie下如果为li指定高度可能会出现排版错位 解决： 设置line-height 23. ul或li浮动后，显示在div外 问题： div中的ul...属性的div同级，之间不能存在嵌套关系，否则会产生异常。
块级盒子：div、p、h1； 内联盒子：span、a、strong。 块状盒子特性 独占一行； 支持所有css样式； 不写宽度的时候，跟父元素的宽度相同； 所占区域是矩形。...内联盒子特性 盒子默认不会换行（一行显示）； 有些样式不支持，例如：width、height等； 不写宽度的时候，宽度由内容决定； 所占区域不一定是矩形； 内联标签与标签之间是有缝隙的。...div在默认情况下是块状元素，即display: block，对于块状元素，当不设置width时，其默认值为100%，也就是等于父元素的宽度。...属性值 含义 stretch 默认值，设置子项元素高度平分父元素高度 flex-start 默认值在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列 center 在侧轴中间显示 space-around...100px的设置，但是却每一个元素的高度都是100px，这是因为我们设置了grid-auto-columns: 100px——如果元素没有设置固定高宽或者高度，其默认情况下会进行自适应拉伸占满gird
c $('#i1 > a') b c 3.prev + next(查找同级相邻的一个) <div id="i1" class="c1"...查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止 offsetParent 返回第一个匹配元素用于定位的父节点 parents 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素...$(window).scrollLeft() //获取滚轮滑的宽度 $(window).scrollTop('100') //设置滚轮滑的高度为100 （1）offset（获取和设置匹配元素在整个...424 （4）scrollLeft（获取和设置滚动条到左侧的坐标） asdf...） innerHeight 获取第一个匹配元素内部区域高度（包括补白、不包括边框） outerHeight 获取第一个匹配元素外部高度（默认包括补白和边框） width
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
