__x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷

x(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷

<div class="box1"> <tabl></table> <div class="box2"></div> </div> 原理1: <table> 将会隔离父子元素, 所以解决垂直外边距重叠问题方法1: .clearfix:before{ content:""; display:table; } 原理2: 解决高度塌陷方法2: .clearfix:af…

x(22)0907第四天__ 垂直外边距重叠

外边距重叠, 也叫“外边距合并”,指的是,当两个外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度,等于两个发生合并的外边距的高度中的较大者...在布局时,易造成混淆. 1. 上下元素垂直外边距重叠垂直相邻的两个 div,上面的 div 设置了 margin-bootom,遇到下面 div 设置的 margin-top,会发生重叠,产生一个较大的外边距 2. 父子元素垂直外边距重合父子元素 div 时,为子元素 div 设置上边距时,两个 div 都会发生向下偏移,此时父子元素的…

CSS min-height不能解决垂直外边距合并问题

垂直外边距合并有一种情况是嵌套元素的垂直外边距合并,当父级元素没有设定外边距时,在顶部或者底部边缘的子元素的垂直外边距就会和父级的合并,导致父级也有了“隐形”的垂直外边距. 当父级元素的min-height遇上边缘子级元素的垂直外边距后,垂直外边距合并问题就变得更加隐蔽了. 当父级元素设定了高度,子级元素的外边距就不会影响到父级元素了:当父级元素没有设定高度,子级元素的外边距就会影响到父级元素,不过这时候边缘子元素贴着父元素的边缘,所以问题很容易被发现:而当父元素设定了min-height,并且…

margin属性以及垂直外边距重叠问题

盒子的margin属性盒子的外边距margin 指的是当前盒子与其他盒子之间的距离,环绕在盒子周围的空白区域,属于不可见的区域,,不会影响到可见框的大小,而是会影响到盒子的位置. margin属性可以用来指定盒子外边框的大小,有两种方法设置外边距:第一种单独属性分别设置四个方向的外边距,第二种是使用简写属性同时设置多个方向的外边距(注意顺序),margin 属性接受任何长度单位,可以是像素px.英寸in.毫米mm或 em 一.单独属性设置各个方向外边距盒子有四个方向的外…

x(44)0910第六天__表单

form表单: form必须属性:action,指定一个服务器地址. 若希望表单中的数据发送给服务器,必须设置name属性. 用户填写的信息,将会追加在url地址?后面,以查询字符串的形式发送给服务器,以“&”隔开. 网页用表单来向服务器提交信息. 最常见的百度一下: 键入关键字,点击搜索, 浏览器将关键字通过表单提交到服务器, 服务器处理表单数据,并响应. 简单的表单实例: html代码: <!doctype html> <html> <head> <m…

x(45)0910第六天__各种表单

效果图: html代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>表格</title> <link rel="stylesheet" type="text/css" href="css/form.css" /> </head> <body>…

x(46)0910第六天__框架集

框架集frameset 和内联框架iframe 的作用类似: 在一个页面中,引入其他的外部html页面. 框架集可以同时引入多个页面. 在 html5 中,推荐使用框架集,而不推荐使用iframe. <frameset></frameset> 不能和 body 同时出现在一个代码中. 不推荐使用,因为搜索引擎无法判断一个 frameset 的页面. 使用 frameset 意味着页面中只能引入其他页面,不能有自己的内容. 每一个页面,浏览器都需要发送一次请求,访问速度较慢. …

x(49)0910第六天__命名规范

id class 命名规范: 小驼峰命名法: aaaBbbCcc,helloWorld 大驼峰命名法: AaaBbbCcc,HelloWorld 匈牙利命名法: 类型+描述 formUserName,aBaiDu,inputUserName,inputUserPsd…

x(42)0910第六天__表格布局老旧的布局方法

table 布局不易于维护,耦合太严重了. 不利于搜索引擎检索. 效果图: html代码: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>表格</title> <link rel="stylesheet" type="text/css" href="css/tableweb.css…

css盒子模型、垂直外边距合并

css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容区域的宽度后,再设置盒子的填充.边框.边距值,盒子在页面中实际占据的页面尺寸的计算是: 水平方向上::width+2*padding+2*border+2*margin, 垂直方向上::height+2*padding+2*border+2*margin, 不过需要注意的是行内元素,在不改变它的表现…

CSS 垂直外边距合并：规范、延伸、原理、解决办法

<CSS 权威指南>第七章基本视觉格式化.p192,提到了垂直外边距合并的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详解,总结如下: 规范: 8.3.1 Collapsing margins 计算方法: 如果外边距都是正数,取大的: 如果一个正数,一个负数,正外边距-负外边距的绝对值,相当于正外边距+负外边距: 都为负数,取外边距绝对值较大的: 如果相邻外边距有多个,要一起参与计算,不能分布计算:要注意,相邻的元素不一定非要…

Margin的垂直外边距问题

做练习的时候遇到一个margin的问题,代码结构如下,给父元素body中的子元素div设置了margin:50px auto;本来我是想让子元素div距离父元素上边拉开50个像素,结果却是子元素div和父元素body一样高,并且距离<html>上边距50px,如下图(a): <!doctype html> <html> <head> <title></title> <meta charset="utf-8"&…

文本溢出、垂直外边距合并、BFC、hasLayout

今天学习文本溢出,又遇到了一些小问题,先上图: 关于文本溢出推荐:http://www.cnblogs.com/yzg1/p/5089534.html 从里面学习到单行文本和多行文本溢出, overflow:hidden;text-overflow: ellipsis是基本.然后在控制多行文本溢出的时候需要用到弹性伸缩盒子-webkit-box ,包括设置盒子的伸缩方向和显示的行数. 用div内嵌div做一个小测试:发现对子元素,margin-left有效但是margin-top是无效的,问题的…

【css基础】垂直外边距的合并

近期在重温<CSS权威指南>,还是想把基础再打坚固点,如今对垂直外边距的合并问题进行简单总结. 1. 两个块级元素的外边距都大于0时,取那个最大值作为两个块级元素的垂直边距请看以下一个小样例,效果图例如以下:红色的块margin-bottom为30px; 黄色的块的margin-top: 20px;最后的垂直的边距是为30px; 2. 当两个块级元素的外边距都小于0时,取绝值最大的那个作为两者之间的垂直边距. 请看以下一个小样例,效果图例如以下:红色的块margin-bottom为-10px…

x(47)0910第六天__IE6到IE11对于包含中文路径的png显示问题

问题:IE6额外地除了中文路径外,对于png24的支持度不高,以致于无法透明. 解决方法1,png8 替换: png8 比 png24 小,质量较低,但是在这里可以替代,以解决问题. 使用 ps 打开 png24,存储为 Web 格式,选择png8 保存,然后使用. 解决方法2,js 处理: 在页面引入外部js文件,然后写一点简单代码处理该问题. 写在 </body> 的上面.  <script type="text/javascr…

x(48)0910第六天__CSS Hack

CSS Hack: 不到万不得已,不要使用.不易于维护. 有一些情况,需要一段特殊代码在遇到特殊浏览器环境才执行,而在其他条件下,不执行. 此时,CSS Hack 就能实现. CSS Hack 实际上指的是一段特殊的代码,这段代码只在特定的浏览器环境下识别并执行. 写法: 条件Hack只对IE9及以,下的浏览器有效,其他浏览器视为注释  关键字: "" 是否为…

HTML-完美解决父子元素的外边距重叠和高度塌陷问题

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0px; padding:0px;} .box1{ width: 300px; height: 300px; background-color: red } .box2{ width…

x(29)0908第五天__高度塌陷问题

高度塌陷在文档流中,父元素的高度默认是被子元素撑开的. 但是当为子元素设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷...以致于布局混乱变成 BFC块级格式化环境根据 W3C 标准,元素都有一个隐含的属性 “Block Formatting Context” 该属性可以打开/关闭,默认是“关闭”. 当开启BFC后,元素将具有如下特性: 1. 父元素的垂直外边距不会和子元素重叠. 2. 不会被浮动元素所覆盖,会在浮动元素的旁边显示. 3. 可以包含浮…

css之高度塌陷及其解决方法

浅谈清除浮动的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素:按照从上到下的方式逐个排列页面中的行内元素:按照从左到右的方式逐个排列但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位 2.浮动定位 float float属性取值为 left/right 脱离文档流 3.相对定位 relative 元素会相对于它原来的位置偏移某个距离,改变元素位…

浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

浮动引发的高度塌陷问题高度塌陷问题的产生 BFC(Block Formatting Context)的引入元素开启BFC后的特点开启BFC的元素不会被其他浮动元素所覆盖开启BFC的元素不会发生父子元素外边距重叠开启BFC后可以包含浮动的子元素如何开启BFC 设置元素浮动将元素display属性设置为inline-block.table等 overflow属性设置为非visible值开启定位高度塌陷解决方法1: 父元素高度写死高度塌陷解决方法2: 为父元素也设置浮动高度塌陷解…

外边距（padding）重叠的及解决办法

两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大的值.如果出现负边界,则在最大的正边界中减去绝对值最大的负边界.如果没有正边界,则从零中减去绝对值最大的负边界.注意:相邻的盒子可能并非是由父子关系或同胞关系的元素生成.但是边界的重叠也有例外情况: 1.水平边距永远不会重合.2.在规范文档中,2个或以上的块级盒模型相邻的垂直margin会重叠.最终的margin值计算方法如下:a.全部都为正值,取最大者:b.不全是正值,则都取绝对值,然后用正值减去最大值:c.没有正值,则…