一些css基础学习笔记

摘要：当父元素设置了的，子元素为时，设置无效当父元素设置了时，子元素超出父元素部分无效只能限制的层级相当于自身进行定位，相对于边界会影响其他元素定位，而无影响自定义拖拽效果同时存在，无效同理，无效可提高层叠级数父元素的较大排前面数值排在上，当前层

1.当父元素设置了relative的zindex，子元素为absolute时，设置zindex无效
2.当父元素relative设置了overflow：hidden时，子元素absolute超出父元素部分无效
3.relative只能限制fix的zindex层级
4.Relative相当于自身进行定位，absolute相对于边界
5.Margin会影响其他元素定位，而relative无影响（自定义拖拽效果）
6.top&&bottom同时存在，bottom无效；同理，right无效
7.relative可提高层叠级数
8.父元素的zindex较大排前面（数值）
9.Auto排在上，（当前层叠上下文的生成盒子层叠水平是0 盒子【除非是根元素】不会创建一个新的层叠上下文）

层叠上下文：是html元素中的一个三维概念，表示元素再z轴上有了‘可以高人一等’

层叠水平：所有元素都有决定同一层叠上下文中的元素在z轴上的显示顺序，比较两个元素的层叠水平,必须是这两个元素在同一个层叠上下文中,否则没有意义。z-index可以影响 层叠水平(只是影响,不是决定)

页面根元素天生具有层叠上下文，称之为“根层叠上下文”
Zindex值为数值的定位元素也具有层叠上下文

(在同一个层叠上下文中的元素,对应下面规则的序号越大,位置越高)
1.层叠上下文 background/border
2.负z-index
3.block块级元素
4.float浮动元素
5.inline/inline-block行内元素
6.z-index:auto或者z-index:0(不依赖z-index的层叠上下文)
7.正z-index

1通常是装饰属性;34是布局,5是内容——所以行内元素具有较高的层叠序号
背景色覆盖是层叠顺序，文字覆盖是后来居上

1.父元素设置display：flex且子元素的zindex不为0时
2.父元素的透明度有具体数值
3.transform不等于none
4.mix-blend-mode（混合模式）不等于normal
5.filter不等于none
6.isolation：（isolate isolation是为mix-blend-mode而生的属性;mix-blend-mode混合默认z轴所有层叠在下面的元素）
7.条件1:父级需要是flex/inline-flex
条件2:子元素z-index不为auto
（只针对chrome等blink内核浏览器有效）
8.will-change：transform（will-change是提高页面滚动、动画等渲染性能的属性）
9.-webkit-overflow-scrolling:touch（移动端）

定位元素层叠在普通元素之上,因为一旦成为定位元素,z-index自动生效,默认z-index:auto也可以看作z-index:0;所以会覆盖block、inline、float元素

IE7的zindex：auto也会新建层叠上下文；元素的层叠水平主要由所在的层叠上下文决定（避免使用定位属性，定位属性从大容器平级分离为私有小容器）

避免一山比一山高的样式问题（多人写作及后期维护）：对于非浮层元素，避免设置z-index值，zindex值没有任何道理需要超过2

避免浮层组件因zindex被覆盖的问题（组件的覆盖规则具有动态性，意向不到的高层级元素）：

Zindex负值元素再层叠上下文的背景之上，其他元素之下。

1.独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏
2.绝对定位生效的时候，浮动无效
3.用了absolute之后，用display，会保留位置跟随特性，要注意的是IE7中用了4.absolute之后，只会是inline-block水平显示，指定包上

1.如果只有一个绝对定位元素，自然不需要zindex，自动覆盖普通元素
2.如果两个绝对定位，控制dom流的前后顺序达到需要的覆盖效果，依然无zindex
3.如果多个绝对定位交错，非常非常少见！，zindex：1控制
4.如果非弹框类的绝对定位元素zindex>2，必定zindex冗余，需要优化

absolute与整体布局：
1.body降级，子元素升级
（全屏拉伸效果：position：absolute；left：0；top：0；right：0；bottom：0）
绝对定位受限于父级，因此子元素想要拉伸需要：
html，body{
    height：100%；
}

    
    
clear:both;

本文字离图片的距离是？




2.

    

本文字离图片的距离是？

1.元素block块状化（砖头化）
2.破坏性造成的紧密排列特性（去空格化）

规定可以由用户调整 div 元素的大小：

div
{
resize:both;
overflow:auto;
}

包含块：离该该元素最近的块级祖先（父级）

《css权威指南》：浮动元素同时处于（常规）流内和流外
1.浮动元素不影响块级元素的布局（块级元素会当浮动元素不存在）
2.浮动元素会影响行内元素的布局（从而间接影响块级元素的布局

浮动元素的摆放：
尽量靠上
尽量靠左/右
仅能要挨着靠，margin外边缘挨着（两个浮动元素之间的margin不会被合并）

浮动元素间接影响块级元素

1.可用a标签 设置display：inline-block；width：100%， 把含浮动元素的div撑起来（div不用设计高度）
2.overflow：hidden(BFC)
3.可用a标签 设置display：block；width：100%，clear：both

4.div=》display：table

5.div=》display：table-cell

6.div=》display：flow-root（触发BFC）

7.div::after代替a标签=》content:’’ display:block; clear:both;(最下方存在一个没有高度的元素)

8.使用.clearfix:after{content:’’ display:block; clear:both;}

9.让div也浮动（BFC）

教学视频：https://segmentfault.com/l/15...

overflow-x：y方向自动变成auto
在IE7中，设置了宽度100%时，会出现水平滚动条
使overflow起效：
1.非display：inline水平
2.对应方位的尺寸限制。width/height/max-width/max-height/absolute拉伸
3.对于单元格td等，还需要table为table-layout：fixed状态

IE7浏览器下，文字越多，按钮两侧padding留白就越大

按钮在IE8显示正常

=》IE7解决方案：给所有的按钮添加样式overflow：visible

注意:
无论什么浏览器，默认滚动条均来自，而不是标签

去除页面默认滚动条：html{ overflow:hidden; }

js与滚动高度:

chrome： document.body.scrollTop;
其他浏览器：document.documentElement.scrollTop;
但两者不会同时存在，因此：
var st = document.body.scrollTop+document.documentElement.scrollTop;（不推荐）
建议写法：var st = document.body.scrollTop||document.documentElement.scrollTop;

overflow的pading-bottom缺失现象：
除了chrome浏览器，其他浏览器都不显示 =》 导致了不一样的scrollHeight（元素内容高度）

1.html{
    overflow-y:scroll;
}
2.
.container{
    width:1200px;
    padding-left:calc(100vw - 100%);
}
100vw-浏览器宽度；100%-可用内容宽度

Ios原生滚动回调效果：

-webkit-overflow-scrolling：touch；

JQ滚动条自定义插件：https://github.com/malihu/mal...

块级格式化上下文（内部元素不会影响外部元素）

渲染规则：
1.bfc元素的垂直方向边距发生重叠
2.bfc区域不会与浮动元素重叠
3.独立容器
4.计算bfc高度时，浮动元素也会参与计算

创建bfc：
1.overflow
2.浮动不为none
3.position不是static
4.display与table有关

bfc使用场景：

...

BFC垂直方向重叠

//消除重叠
    

        
        
1
        

            
2
        
        
3
    

布局应用：

    
    

    

overflow与bfc:
1.auto
2.scroll
3.hidden

清除部分浮动：

.clearfix{
    overflow:hidden;
    _zoom:1;
}

清除浮动影响

通用：
.clearfix{

overflow:hidden;
*zoom:1;

}
.clearfix:after{

content:’’;
display:table;
clear:both;    

}

避免margin穿透问题

Overflow:auto scroll hidden

两栏自适应布局

Overflow:scroll auto hidden

注意：使用padding做流体自适应布局的时候，万万不可让自适应层BFC化！

（IE7只适用于block元素）

absolute使overflow：hidden失效

绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块（含position：relative absolute fixed声明的父级元素，没有则body元素）之间的时候

避免失效
1.overflow元素自身为包含块
2.overflow元素的子元素为包含块（为绝对定位元素的父级）
3.任意合法transform生命当做包含块（让overflow元素自身transform只适用于IE9+/FireFox；让overflow子元素transform可通用IE9+)



Both：水平垂直两边拉
horizontal：只有水平方向拉
vertical：只有垂直方向拉
使用前提：元素overflow的属性值不能是visible
文本域默认overflow：auto

文本溢出用省略号表示
使用前提：元素overflow的属性值是hidden

锚点定位的本质：改变容器的滚动高度
锚点定位的触发：url地址中锚链和锚点元素 可focus的锚点元素处于focus态
锚点定位的作用：快速定位

锚点定位与overflow选项卡技术：

已知左右栏高度和宽度，中间块为自适应

    



    

    

    

        浮动
    



    

    
绝对定位
    





    

    
弹性
    





    

    
表格
    





    

    
网格
    

    




    

    

            绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
            
绝对定位
        
绝对定位
    
    

左宽度固定，右边自适应

    

        
左侧顶宽
    
    

        

            
右侧自适应
        
    

        .content {
            width: 100%;
            margin: 0 0 10px;
        }

        .left1 {
            position: relative;
            float: left;
            width: 100px;
            margin-right: -100px;
            background: #4eb3b9;
        }

        .right1 {
            float: right;
            width: 100%;
            background: #f8de72;
        }

        .right1-content {
            margin-left:110px;
            background: #ff0097;
        }

左宽度自适应，右边固定宽

    

        

            左侧自适应
        
    
    

        右侧顶宽
    

        .content {
            width: 100%;
            margin: 0 0 10px;
        }

        .left1 {
            background: #4eb3b9;
            float: left;
            width: 100%;

        }

        .right1 {
            background: #f8de72;
            width:100px;
            float: right;
            position: relative;
            margin-left: -100px;
        }

        .left1-content {
            background: #ff0097;
            margin-right: 120px;
        }

上高度固定，下自适应

两种模型的设置：

box-sizing:content-box;//标准模型 默认
box-sizing:border-box;//IE模型

JS设置盒模型对应的宽和高

dom.style.width/height:只能取出内联样式
dom.currentStyle.width/height:三种方式都可以，只有ie支持
window.getComputedStyle(dom）.width/height:都通用
dom.getBoundingClientRect().width/height:计算一个元素的绝对位置，根据视窗计算

解释边距重叠
解决方案：块级格式化上下文bfc