overflow | 易学教程

BFC-边距重叠解决方案

阅读更多关于 BFC-边距重叠解决方案

emmm~总结下 <div> 1. BFC的基本概念块级格式化上下文 2.BFC的原理---可以将BFC看成一个封闭的大箱子,箱子里面不影响外面,外面不影响里面 2.1 同一个bfc下外边距方向会发生重叠---解决上下块级元素margin重叠问题 2.2 bfc创建的区域不会与浮动元素的box重叠,-----可以应用在左右布局上,清除浮动 2.3 BFC是一个独立的元素,外面的元素不会影响里面的元素,里面的元素不会影响外面的元素 2.4 计算bfc高度的时候,浮动元素也会往里面计算 --子元素是浮动元素,高度可以给创建了BFC的父元素 3. 如果创建BFC(习惯用的比较多的--overflow:hidden /auto , position:absolute, float:left 3.1 float属性不为none 3.2 position不为static和relative 3.3 overflow不为visible 3.4 display为inline-block, table-cell, table-caption, flex, inline-flex </div> 4.应用实例 4.1BFC垂直方向边距重叠--非常重要 <div class="main_box"> <div class="top_section">1</div> <!-- 下面的overflow:

css清除浮动的方法

阅读更多关于 css清除浮动的方法

css清除浮动的方法我们有多种清除浮动的方法，在这里给大家介绍四种：给父盒子设置高度 clear:both 伪元素清除法 overflow：hidden 给父盒子设置高度>>> 这个方法给大家上个代码介绍，它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏 clear：both clear：意思就是清除的意思。有三个值： left：当前元素左边不允许有浮动元素 right：当前元素右边不允许有浮动元素 both：当前元素左右两边不允许有浮动元素给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。 html结构： <div> <ul> <li>Python</li> <li>web</li> <li>linux</li>    <div class="clear"></div> </ul> </div> <div class="box"> </div> css样式 *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul

css 清除浮动

阅读更多关于 css 清除浮动

1、父级div定义 height；原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题建议：不推荐使用，只建议高度固定的布局时使用 2、结尾处加空div标签 clear:both；原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度优点：简单、代码少、浏览器支持好、不容易出现怪问题缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法 3、父级div定义伪类:after 和 zoom；原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。建议：推荐使用，建议定义公共类，以减少CSS代码。 4、父级div定义 overflow:hidden；原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时

CSS里的BFC和IFC的用法

阅读更多关于 CSS里的BFC和IFC的用法

**一、BFC** --------------------- Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则（可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素）。 **1、BFC的布局规则例如以下：** ①.内部的盒子会在垂直方向，一个个地放置。 ②.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。 ③.每一个元素的左边，与包括的盒子的左边相接触，即使存在浮动也是如此。 ④.BFC的区域不会与float重叠。 ⑤.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 ⑥.计算BFC的高度时，浮动元素也參与计算。 **2、介绍过了BFC的布局规范，再来说说哪些元素会触发BFC。** **只要元素满足下面任一条件即可触发 BFC 特性** ①.根元素。 ②.float的属性不为none。 ③.position为absolute或fixed。 ④.display为inline-block；table-cell；table-caption；flex。 ⑤.overflow不为visible。 **3、接下来说说BFC的作用和原理** **①、解决margin重叠问题** **②、解决浮动高度塌陷问题**

布局：上下两个div高度固定，中间自适应

阅读更多关于布局：上下两个div高度固定，中间自适应

需求：经典布局 —— 头尾固定高度中间高度自适应布局头部固定高度，宽度100%自适应父容器；底部固定高度，宽度100%自适应父容器；中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；整个内容填满浏览器可视区域，并且不超出此区域！方法一：position:absolute定位，不设高，并改变"包含块"的尺寸渲染固定头尾，所以，至少头和尾要用到position定位。因为浏览器大小是可以调节的，而且不同尺寸，不同分辨率的浏览器可视区域的高度是不固定的，这就决定是中间主体部分的高度不固定。所以真正的问题核心也正在此。解决了这个问题，整个布局也就解决了一多半最重要的一段就是中间部分绝对定位，top为头的高度，bottom为尾的高度 <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>头尾固定中间高度自适应布局</title> <style> html, body { height:100%; margin:0; padding:0 } #dHead { height:100px; background:#690; width:100%; position:absolute; z-index:5; top:0; } #dBody { background:#FC0; width

css经典布局——头尾固定高度中间高度自适应布局

阅读更多关于 css经典布局——头尾固定高度中间高度自适应布局

转载：穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学，都非常清楚这个布局。最直观的方式是框架这个我不想多写费话，因为我们的重心不在这里。如果有不了解的同学可以百度、google。这里我不得不吐下槽！！百度实在让我这个“粉丝”失望。就目前情况来说，百度已经完全轮为“有钱人排行榜”！再也不顾及用户的搜索需求了，因为主导地位实在是：不可撼动！不相信的同学，可以亲身对比下B vs G的搜索结果。别告诉我google如何强大！！很久以前，百度的搜索结果更符合目标，因为他更了解中国人的习惯，这是不可争议，现在情况已经完全相反！虽然google经常是六脉神剑，但我更欣赏它的搜索结果。吐槽打住!!! 现在开始正式谈论这个经典布局 —— 头尾固定高度中间高度自适应布局下面说下要求： 1 头部固定高度，宽度100%自适应父容器； 2 底部固定高度，宽度100%自适应父容器； 3 中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条； 4 整个内容填满浏览器可视区域，并且不超出此区域！先看下效果图：相信，做过两年前端的同学，拿到这个需求，都有一个感觉——这挺简单的！是的，本来就挺简单！方法一：position:absolute定位，不设高，并改变"包含块"的尺寸渲染从我脑海崩出来的第一个念头就是定位布局—

Is setting overflow: auto to all elements except html bad practice?

阅读更多关于 Is setting overflow: auto to all elements except html bad practice?

问题 When it comes to starting a new design I always start my style sheet with overruling the browser's default padding and margin on all elements: * { margin: 0; padding: 0; } After reading j08691's answer on a margin collapse problem I realized overflow: auto fixed more than I knew of. I was wondering if it would useful to add overflow: auto on all elements inside the html (you don't want to loose the scroll-bar there). So: html * { overflow: auto; } I tried adding this rule to one of our sites,

【css】文本效果

阅读更多关于【css】文本效果

一、字体属性在css字体样式中常见的字体属性有以下几种 p{ font-size: 50px; /*字体大小*/ line-height: 30px; /*行高*/ font-family: 幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/ font-style: italic ; /*italic表示斜体，normal表示不倾斜*/ font-weight: bold; /*粗体*/ font-variant: small-caps; /*小写变大写*/ } 二、 text-shadow（文字阴影）　　1、基础用法：text-shadow: 1px 1px 5px rgb(106, 103, 103); 　　2、基础参数： h-shadow：必需。水平阴影的位置。允许负值。 v-shadow：必需。垂直阴影的位置。允许负值。 blur：可选。模糊的距离。 color：可选。阴影的颜色。　　3、常见文本效果　　基础样式 .c{ text-shadow: 1px 1px 5px rgb(106, 103, 103); } 文字描边　　有4个阴影时, 可以给文字画一个轮廓: .b { color: #BBE; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }

CSS Position(定位)

阅读更多关于 CSS Position(定位)

一、position 属性指定了元素的定位类型。 position 属性的五个值： static relative fixed absolute sticky 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。 1、static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。 div.static { position: static; border: 3px solid #73AD21; } 尝试一下 » 2、fixed 定位元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动： p.pos_fixed { position:fixed; top:30px; right:5px; } 尝试一下 » 注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。 Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。 3、relative 定位相对定位元素的定位是相对其正常位置。 h2.pos_left { position:relative; left:-20px; } h2.pos_right {

Excel Combination Generator

阅读更多关于 Excel Combination Generator

问题 i have a code that generates a permutation based on the inputs of 8 columns and concatenates the columns together. it works great so far but i came up with a problem. it works when more than 2 rows are filled. so if theres only one entry in row 10 for any of the columns from A-H it crashes. the rows are filled with A,B,C across all 8 columns, if column 8 only had A then it crashes I've also tried Set col1 = Range(Range("A10"), Range("A" & Rows.Count).End(xlUp)) instead of Set col1 = Range(

订阅 overflow