前端下午茶

BFC、布局、属性选择符、非IE常见bugBFC计算值的表达式 calc（）width的属性值雪碧图非IE浏览器常见bug属性选择符（通过html属性选择元素）浏览器四大内核结构性伪类每日一丧BFCBFC:块级格式化上下文 -> 独立的渲染区BFC布局规则：一、内部的Box会在垂直方向，一个接一个地放置。二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）三、每个元素的margin box的左边， 与包含块

有四个transition属性可以影响过渡效果指定要执行过渡的属性 transition-property:过渡效果持续的时间 transition-duration：过渡的时序函数 transition-timing-function过渡效果的延迟 transition-delay简写属性transition指定要执行过渡的属性 transition-property:值width height，多个属性间使用逗号隔开。如果所有属性都需要过渡，可以用all关键字。大部分属性都支持过渡效果。只要

PC端高度自适应内容多时自适应高度，内容少时有最小高度没有最小高度，DIV完全自适应高度内容多时自适应高度，内容少时有最小高度min-height的值是分界点，小于min-height 容器高度保持在min-height值，大于min-height值时容器自适应高度。a: 内容增加，会把父元素高度撑开。b: 当内容减少的时候，让容器保持一个最小高度。最小高度的设置：min-height没有最小高度，DIV完全自适应高度子元素高度跟随父元素高度发生变化：*想要全局都用百分比设置宽

其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的，这样的好处是原来在它周围的其他元素不会因为它的离开

关于定位相对定位绝对定位粘性定位固定定位超长banner图如何居中相对定位相对定位是参照于元素在文档流中位置来定位的。position：relative 不会脱离文档流，占据空间。相对定位会提升元素的层级，但并没有脱离文档流。※相对定位不会改变元素的性质，块还是块，行内元素还是行内元素。绝对定位绝对定位的特点：1.开启绝对定位后，不设置偏移量，元素的位置不会发生变化 2.开启绝对定位后，元素会从文档流中脱离3.绝对定位会改变元素的性质，行内变成块，块的默认宽高被内容撑开（块在文档 流中

关于元素类型关于设置display：none的元素设置inline-block的效果置换元素与非置换元素vertical-align 实现元素居中关于设置display：none的元素添加display：none声明的元素，在dom tree 和 render tree的区别：在dom层，display：none的元素是在dom tree结构里面（加载的）在render层：display：none的元素是不在 render tree。设置inline-block的效果inline-block

2个属性3个技巧空白空间的处理write-space溢出属性overflow单行文本溢出省略号显示布局页面的前期规划新闻列表流程空白空间的处理write-space属性值：prepre-wrappre-linenowrap 不换行溢出属性overflowoverflow的两个子属性 overflow-x overflow-y属性值：visible 默认值scroll 产生滚动条auto 自动hidden 溢出隐藏inherit 继承单行文本溢出省略号显示套餐用法，直接上

css盒模型细节知识点总结只要元素有浮动，尽量保证浮动元素都在一个父元素里面。高度塌陷：子元素浮动，而父元素未设置高度时。如果想让盒子保持原有的大小，在宽高的基础上减掉padding值。如果父元素没有设置宽高，添加padding值，不需要减padding。margin可以设置负值margin常出现的两个bug：a:相邻两个元素上下之间的margin值会重叠，按照最大值设置b:如果一个父元素和第一个子元素，没有设置浮动，并且给第一个子元素设置margin-top会错误的

table的css属性&table的宽度分配相邻边框之间的合并border-collapse相邻边框之间的间距borderspacing无数据时是否显示当前区域empty-cells表格的宽度分配table-layout相邻边框之间的合并border-collapse属性值：separate 分开collapse 合并相邻边框之间的间距borderspacing无数据时是否显示当前区域empty-cells属性值：hideshow表格的宽度分配table-layout属性值：

背景模块背景颜色background-color背景图：background-image：url（）；背景图平铺状态：background-repeat：；背景图的位置：background-position：；背景图大小background-size背景图的固定background-attachment背景的简写属性background背景颜色background-color默认情况下背景颜色会延伸到border的区域，把border设置成点状可观察。背景图：background-image：url