__x__(29)0908第五天__高度塌陷 问题】的更多相关文章

高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的. 但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱 变成 BFC块级格式化环境 根据 W3C 标准,元素都有一个隐含的属性 “Block Formatting Context” 该属性可以 打开/关闭,默认是“关闭”. 当开启BFC后,元素将具有如下特性: 1. 父元素的垂直外边距不会和子元素重叠. 2. 不会被浮动元素所覆盖,会在浮动元素的旁边显示. 3. 可以包含浮…
效果图:  html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>湖南城市学院</title> <link rel="stylesheet" type="text/css" href="css/hncu.css" /> </head> <b…
效果图:  html代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>湖南城市学院</title> <link rel="stylesheet" type="text/css" href="css/hncu.css" /> </head> <bo…
position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static        没有定位,原始出现在正常的文档流中 可选值: static :    默认值,元素没有开启定位 relative :    开启元素的相对定位 absolute :    开启元素的绝对定位 fixed :    开启元素的固定定位,固定定位也是绝对定位的一种. 当开启 position 定位后,可以使用 left,top,right,bottom 进行偏移设置.   1. position…
如果三个 div 全部设置 position: absolute; 绝对定位,且未设置 z-index,  则从代码结构上    下面的元素 会盖住 上面的元素. z-index 层级: 通过 z-index 属性 设置元素的 层级. z-index : 正整数; 层级越高 ,越优先显示在最上面. z-index: 1;    大于    没设置 z-index 的元素 对于没有开启定位的元素,z-index 无效. 父元素层级再高,也不会盖住子元素.…
1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 background-image: url(img/cat.gif); 如果图片大于元素,则会显示图片左上角部分. 如果图片和元素一样大,则会全部显示. 如果图片小于元素,则图片会 x 横向, y 纵向 平铺 铺满元素. 可以同时设置background-color,作为图片的底色. 4. 背景图片重复方式 …
1. 设置 Photoshop 的单位为 像素px 2. 标尺   显示与隐藏 Ctrl + r 3. 放大与缩小 Ctrl + 1    放大到100% Ctrl + 0    适应屏幕 Alt + 鼠标滑轮 4. 查看矩形框选中目标的width和height        F8 5. 辅助线 Ctrl + H    隐藏 / 显示 6. 前景色 取色器 取色…
opacity 透明度 设置一个  0 - 1 之间的值. opacity: 0;    完全透明 opacity: 0.5    半透明 opacity: 1;    完全不透明 缺点: IE8及以下都不支持 opacity . IE8及以下 透明度 : filter: alpha(opacity=50); 此时,透明度 opacity 取 0-100 为了兼容所有浏览器,设置 div 为半透明 div{ opacity: 0.5; filter: alpha(opacity=50); }…
link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Sprite 雪碧图: 将三张图片整合为一张图片,在不同的伪类中通过设置 background-position 来切换图片. 一次请求一次加载,一次加载一张图片,相当于多张图片. 优势: 减小资源的大小,省了颜色表 提高了访问效率 实例效果: html代码: <!doctype html> <ht…
1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .…
表格 表示一种格式化的数据,如课程表,银行对账单... ... 在网页中,使用 table 创建一个表格. html代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>表格</title> <link rel="stylesheet" type="text/css" href="c…
如果就向下面的代码那样,不写 tbody , 则浏览器自添加 tbody , 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素,而是 tbody 的子元素. 所以 以后编写代码,尽可能地写上 tbody,防止混淆. th 表头 是特殊的 td “具有加粗,文字居中”的效果 . 为 table 添加边框: 1. 为 th,td 设置 border: 1px red solid; 2. 为 table 设置 /* 单元格之间的距离.*/ border-spacing: 0…
长表格 银行流水,表格很长... 则需要将表格分为 表头 thead ,主体数据 tbody , 表格底部 tfoot 三个标签无顺序要求,易于维护:thead → tfoot → tbody 如果没写 tbody ,浏览器会自添加 tbody,并将所有的 tr 移入 tbody 好处: 可以分别设置样式. 打印时,利用分类处理多页表头,表尾的效果. 无顺序要求,已维护. 效果图: css代码: @charset "utf-8"; *{ margin: 0px; padding: 0p…
<div class="box1"> <tabl></table> <div class="box2"></div> </div> 原理1: <table> 将会隔离父子元素, 所以解决垂直外边距重叠问题方法1: .clearfix:before{ content:""; display:table; } 原理2:  解决高度塌陷方法2: .clearfix:af…
Python第五章__模块介绍,常用内置模块 欢迎加入Linux_Python学习群  群号:478616847 目录: 模块与导入介绍 包的介绍 time &datetime模块 random os sys shutil json & pickle xml处理 configparser hashlib subprocess logging模块 re正则表达式 一.模块与包介绍 模块是某个功能代码的集合,模块是一种组织形式,它将彼此有关系的python代码组织到一个个文件中,模块可以包含可…
Python第五章__模块介绍,常用内置模块 欢迎加入Linux_Python学习群  群号:478616847 目录: 模块与导入介绍 包的介绍 time &datetime模块 random os sys shutil json & pickle xml处理 configparser hashlib subprocess logging模块 re正则表达式 一.模块与包介绍 模块是某个功能代码的集合,模块是一种组织形式,它将彼此有关系的python代码组织到一个个文件中,模块可以包含可…
浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[height:200px]    很多时候就是不想把如下布局中的父极元素的高度定死,讲究的是自适应,从而才出现了高度塌陷的问题,因此,该方法一般都不适用. 二.给浮动元素的父级元素添加样式css[overflow:hidden/overflow:auto]---- 是将父级元素形成一个BFC区(独立的布…
当面试官问道你高度塌陷时,人们第一想到的方法一定是 .clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; } 对,没错,这是一个完美的解决方案,但是我们有考虑过这个方案的实现原理吗,或者面试管继续问你这个方法的原理是什么?是不是一脸懵,不懵的也别杠,接下来我通过排他法来展示他的原理 1. 首先 ::after 是元素的伪元素,在元素后面生成伪元素 2.content…
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .outer{ 8 border:10px red solid; 9 } 10 .inner{ 11 width:100px; 12 height:100px; 13 backgrou…
和所有刚入门的菜鸟一样,我发现float有高度塌陷问题,又很偶然的发现float元素后加<img/>能消除float带来的破坏性. 后来百度了一下,大部分的float高度塌陷问题都没有提及img带来的影响. 解决高度塌陷问题方法: 1.在最后一个元素后加入<div style="clear:both"> 2.father-div设置高度 3.父元素加上after伪元素:   其中第三种方法的效果是最好的,和<img/>差不多,不过好像还是after比…
问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="parent"> <div class="left"></div> <div class="right"></div> </div> CSS: div { border: 2px solid #000;…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>解决父盒子高度塌陷</title> <style> .chlid{ width: 200px; height: 200px; background-color: teal; border: 1px solid black; float: left…
css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float 父元素高度消失/塌陷的问题 .clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;} .clearfix {*zoom:1} 更好的方法是 .clearfix:after{content:'';dis…
普通流高度塌陷: 当块float浮动时,不会对块布局产生影响,块仍然会按照左右或者上下的顺序排列.但是会影响文档的排列,当文档的高度超过块的高度时,块的高度会产生塌陷现象.   高度塌陷解决方法:   闭合浮动: 1.在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”> 2.<br clear="all" />原理类似上面 3.父元素设置 overflow:hidden; 在IE6中需要出发hasLayout,例如zoom:1.缺…
高度塌陷的含义: 父元素的高度,默认被子元素撑开,目前来讲box2多高,box1就多高.此时如果子元素设置浮动,则会导致其完全脱离文档流,子元素脱离文档流将无法撑开父元素, 导致父元素的高度丢失,就是我们说的高度塌陷问题.父元素一旦高度塌陷,则它下边的元素会向上移动, 导致整个页面的布局混乱 . 定位(position): 定位一共有4种:relative,absolute,fixed,static relative:相对定位就是在自己原先的位置上进行定位,没有脱离文档流,还占着原先的位置,比如…
问题描述: 在文档流中,父元素默认被子元素撑开(父多高子多高),一旦子浮动,脱离文档流,父无撑起元素便塌陷,父下的所有元素会上移. (不推荐)可以将父高度写死避免塌陷,但高度写死后,父高度不能自动适应子高度的变化. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>高度塌陷问题</title> <style type="tex…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BFC</title> <style type="text/css"> .div1 {background-color: #FCE38A; width: 200px; height: 100px;} .div2 {backgr…
浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素:按照从上到下的方式逐个排列 页面中的行内元素:按照从左到右的方式逐个排列 但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位 2.浮动定位 float float属性 取值为 left/right 脱离文档流 3.相对定位 relative 元素会相对于它原来的位置偏移某个距离,改变元素位…
高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box1{ /*为box1设置一个边框*/ border: 10px red solid; } .box2{ width: 100px; height: 100px…
高度塌陷的问题: 当开启元素的BFC以后,元素将会有如下的特性 1 父元素的垂直外边距不会和子元素重叠    开启BFC的元素不会被浮动元素所覆盖    开启BFC的元素可以包含浮动的子元素 如何开启元素的BFC 设置元素浮动    设置元素绝对定位    设置元素为inline-block float:left; (不好)  虽然可以撑开父元素 会导致父元素宽度丢失了 而且使用这种方式导致下边的元素上移. display:inlink-block; 布局好了,但是宽度又没有了.但是会导致宽度丢…