一些css基础学习笔记

ajhongshaorou

2019-06-28

relative

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负值元素再层叠上下文的背景之上，其他元素之下。

absolute：（无依赖）

1.独立的absolute可以摆脱overflow的限制，无论是滚动还是隐藏
2.绝对定位生效的时候，浮动无效
3.用了absolute之后，用display，会保留位置跟随特性，要注意的是IE7中用了4.absolute之后，只会是inline-block水平显示，指定包上<div>就解决了；
5.配合margin，精确定位，适应各种浏览器
6.在image和i中间使用注释，可以消除它们之间的空格（保证贴合，可使用absolute跟随性）

下拉框定位（无依赖定位）

利用了即使给予了绝对定位属性（前提不给予任何top/left/bottom/right值），元素会依然保持普通文档流的视觉位置。这里说的位置是一种视觉位置，并不是文档流位置，因为其本身高度在父元素中已经塌陷，也就是大家平时所谓的已经脱离文档流），此时使用margin做平移，也就是相对于自己进行了定位，前提要将“视觉位置”规划好，也就是按照正常的文档流进行布局（后面的元素在右或是下侧）。

对齐居中或边缘

绝对定位的元素前加父元素text-align:center;即可使得绝对定位的元素居中

<div style="background: rebeccapurple;width: 200px;height: 200px;margin: 50px auto;text-align: center">
    &nbsp;<div style="background: aquamarine;width: 50px;height: 50px;position: absolute;display: inline-block;margin-left: -25px"></div>
</div>

右边侧栏应用：

<div class="constr">
    <div class="course-fixed-x">
        &nbsp;<div class="course-fixed">
        <a href="http://www.imooc.com/activity/diaocha" class="goto_top_diaocha"></a>
        <a href="http://www.imooc.com/mobile/app" class="goto_top_app"></a>
        <a href="http://www.imooc.com/user/feedback" class="goto_top_feed"></a>
    </div>
    </div>
</div>
<style>
    body {
        margin: 0;
        font: 14px/1.4 "Microsoft YaHei";
        background-color: #EDEFF0;
    }

    .constr {
        width: 1200px;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }


    .goto_top_diaocha, .goto_top_app, .goto_top_feed {
        display: block;
        width: 48px;
        height: 48px;
        margin-top: 10px;
        background: url(http://img.mukewang.com/5453076e0001869c01920098.png) no-repeat;
    }

    .goto_top_diaocha {
        background-position: -48px 0;
    }

    .goto_top_diaocha:hover {
        background-position: -48px -50px;
    }

    .goto_top_app {
        background-position: -96px 0;
    }

    .goto_top_app:hover {
        background-position: -96px -50px;
    }

    .goto_top_feed {
        background-position: -144px 0;
    }

    .goto_top_feed:hover {
        background-position: -144px -50px;
    }

    .course-fixed-x {
        height: 0;
        text-align: right;
        overflow: hidden;
    }

    .course-fixed {
        display: inline;
        position: fixed;
        margin-left: 20px;
        bottom: 100px;
    }
</style>

星号对齐：

一些css基础学习笔记
星号进行绝对定位
图标对齐：

图标进行无依赖绝对定位

文字溢出：

一些css基础学习笔记

一些css基础学习笔记
absolut不占据尺寸

回流与重绘：动画尽量作用在绝对定位元素上
垂直空间的层级：后来居上

z-index无依赖

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

一些css基础学习笔记

Absolute绝对定位的方向是对立的（left&right top&bottom）
举例：
Position:absolute; left:0; top:0; width:50%
等同于==》
position：absolute; left:0; top:0; right:50%;（IE7+才支持）

一些css基础学习笔记
相互支持性：
1.容器无需固定width、height值，内部元素亦可拉伸；
2.容器拉伸，内部元素支持百分比width、height值

一些css基础学习笔记

若拉伸和width&height尺寸同时存在，那么width/height尺寸大于left/top/right/bottom拉伸尺寸
因此=》position：absolute；top：0；left：0；right：0；width：50%的实际宽度是50%而不是100%（当使用margin：auto 可实现居中=》绝对元素的绝对居中效果 IE8+支持）

一些例子

没有宽度和高度声明实现的全屏自适应效果：

<style>
html, body { height: 100%; }
.overlay {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background-color: #000;
    opacity: .5; filter: alpha(opacity=50);
}
</style>
<div class="overlay"></div>

高度自适应的九宫格效果：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高度自适应的九宫格效果</title>
<style>
html, body { height: 100%; margin: 0; }
.page {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
}
.list {
    float: left;
    height: 33.3%; width: 33.3%;
    position: relative;
}
.list:before {
    content: '';
    position: absolute;
    left: 10px; right: 10px; top: 10px; bottom: 10px;
    border-radius: 10px;
    background-color: #cad5eb;
}
.list:after {
    content:attr(data-index);
    position: absolute;
    height: 30px;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
    text-align: center;
    font: 24px/30px bold 'microsoft yahei';
}
</style>
</head>

<body>
<div class="page">
    <div class="list" data-index="1"></div>
    <div class="list" data-index="2"></div>
    <div class="list" data-index="3"></div>
    <div class="list" data-index="4"></div>
    <div class="list" data-index="5"></div>
    <div class="list" data-index="6"></div>
    <div class="list" data-index="7"></div>
    <div class="list" data-index="8"></div>
    <div class="list" data-index="9"></div>
</div>
</body>
</html>

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

一些css基础学习笔记

float

具有包裹性：
display：absolute fixed sticky
position：absolute fixed sticky
overflow：hidden scroll

具有破坏性：
display：none
position：absolute fixed sticky

清除浮动的两大方法：
底部插入clear：both
父元素BFC(IE8+)或haslayout（IE6/IE7）
Clear通常应用形式：
html block水平元素底部
css after伪元素底部生成

一些css基础学习笔记
权衡后的策略：
IE8之后：

IE6&IE7：

伪元素更好的方法：

.clearfix应用在包含浮动子元素的父级元素上

注意：
1.使用了"clear:both"但是它会与margin重叠，则margin-botttom无法发挥作用；
2.使用了“overflow：hidden”使得元素BFC化，包裹好了，不影响margin-bottom发挥作用

<div style="background-color: #f5f5f5;">
    <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;">
    <div style="clear:both; margin-bottom:100px;">clear:both;</div>
</div>
<div style="margin-top: 100px;">本文字离图片的距离是？</div>
<br><br><br><br>2.
<div style="background-color: #f5f5f5; overflow: hidden;">
    <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left; margin-bottom: 100px;">
</div>
<div style="margin-top: 100px;">本文字离图片的距离是？</div>
</div>

float作用

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

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

div
{
resize:both;
overflow:auto;
}

IE7浮动问题

一些css基础学习笔记

一些要注意的点

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

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

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

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

一些css基础学习笔记

撑开内含浮动元素的无高度div：

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

一些css基础学习笔记

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）

overflow

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

overflow：visible

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

一些css基础学习笔记
按钮在IE8显示正常

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

一些css基础学习笔记

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

一些css基础学习笔记

Body/html与滚动条

去除页面默认滚动条：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（元素内容高度）

一些css基础学习笔记

解决水平居中跳动的问题的修复

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

自定义滚动条-webkit

一些css基础学习笔记

Ios原生滚动回调效果：

-webkit-overflow-scrolling：touch；

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

BFC

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

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

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

bfc使用场景：

...

BFC垂直方向重叠

//消除重叠
    <section id="bfc">
        <style>
            #bfc{
                background: paleturquoise;
                overflow: hidden;
            }
            #bfc>p{
                margin: 5px auto 25px;
                background: salmon;
            }
        </style>
        <p>1</p>
        <div style="overflow: hidden;background: mediumorchid">
            <p>2</p>
        </div>
        <p>3</p>
    </section>

布局应用：
<section id="layout">
    <style>
        #layout{
            background: lightpink;
        }
        .left{
            float: left;
            width: 100px;
            height: 100px;
            background: lemonchiffon;
        }
        .right{
            height: 110px;
            background: lightblue;
            overflow: hidden;
        }
    </style>
    <div class="left"></div>
    <div class="right"></div>
</section>

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

一些css基础学习笔记

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

一些css基础学习笔记

两栏自适应布局

一些css基础学习笔记

（IE7只适用于block元素）

overflow与absolute

absolute使overflow：hidden失效

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

一些css基础学习笔记

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

overflow失效妙用

一些css基础学习笔记

resize拉伸

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

text-overflow：ellipsis

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

锚点技术

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

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

一些css基础学习笔记

页面布局的变通

左右宽度固定，中间适应

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

<style>
        .content{
            width: auto;
            background: #e6e6e6;
            /*display: flex;*/
        }
        div{
            height: 100px;
        }
        .left{
            width: 300px;
            background: blueviolet;
            float: left;
        }
        .container{
            background: pink;
        }
        .right{
            width: 300px;
            background: paleturquoise;
            float: right;
        }
        .content-absolute .left2,.container2,.right2{
            position: absolute;
        }
        .left2{
            left: 0;
            width: 300px;
            background: palevioletred;
        }
        .container2{
            left: 300px;
            right: 300px;
            background: yellowgreen;
        }
        .right2{
            right: 0px;
            background: antiquewhite;
            width: 300px;
        }
        .content-flex{
            display: flex;
        }
        .left3{
            background: mediumvioletred;
            width: 300px;
        }
        .container3{
             background: #bab8c7;
             flex: 1;
         }
        .right3{
            background: mediumturquoise;
            width: 300px;
        }
        .content-table{
            display: table;
            width: 100%;
        }
        .right4{
            width: 300px;
            display: table-cell;
            background: #d78cfb;
        }
        .left4{
            width: 300px;
            display: table-cell;
            background: lightcoral;
        }
        .container4{
            background: lavender;
        }
        .content-grid{
            display: grid;
            width: 100%;
            grid-template-columns: 300px auto 300px;
        }
        .left5{
            background: #f8de72;
        }
        .right5{
            background: #e3f8b8;
        }
        .container5{
            background: #f89761;
        }
    </style>
</head>
<body style="padding: 0;margin: 0">
<div class="content">
    <div class="left"></div>
    <div class="right"></div>
    <div class="container">
        浮动
    </div>
</div>
<!--绝对定位方案-->
<div class="content-absolute">
    <div class="left2"></div>
    <div class="container2">绝对定位</div>
    <div class="right2"></div>
</div>

<!--弹性盒子-->
<div class="content-flex">
    <div class="left3"></div>
    <div class="container3">弹性</div>
    <div class="right3"></div>
</div>

<!--表格布局-->
<div class="content-table">
    <div class="left4"></div>
    <div class="container4">表格</div>
    <div class="right4"></div>
</div>

<!--网格布局-->
<div class="content-grid">
    <div class="left5"></div>
    <div class="container5">网格</div>
    <div class="right5"></div>
</div>
</body>

一些css基础学习笔记

上下高度固定，中间适应

<style>
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        .header1 {
            height: 100px;
            background: #690;
            width: 100%;
            position: absolute;
            top: 0;
        }

        .container1 {
            background: #FC0;
            width: 100%;
            overflow: auto;
            top: 100px;
            position: absolute;
            bottom: 100px;
        }

        .footer1 {
            height: 100px;
            background: #690;
            width: 100%;
            position: absolute;
            z-index: 200;
            bottom: 0;
        }


    </style>
</head>
<body>
<!--浮动-->
<div class="content-absolute">
    <div class="header1"></div>
    <div class="container1">
            绝对定位
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
            <p>绝对定位</p>
        <p>绝对定位</p>
    </div>
    <div class="footer1"></div>
</div>
</body>

两栏布局

左宽度固定，右边自适应

<div class="content">
    <div class="left1">
        <p>左侧顶宽</p>
    </div>
    <div class="right1">
        <div class="right1-content">
            <p>右侧自适应</p>
        </div>
    </div>
</div>

.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;
        }

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

<div class="content">
    <div class="left1">
        <div class="left1-content">
            左侧自适应
        </div>
    </div>
    <div class="right1">
        右侧顶宽
    </div>
</div>

.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;
        }

上高度固定，下自适应

盒模型

基本概念

一些css基础学习笔记

两种模型的设置：

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

<style>
        html *{
            padding: 0;
            margin: 0;
        }
        .child{
            height: 100px;
            background: pink;
            margin-top: 10px;
        }
        .box{
            background: paleturquoise;
            /*高度改变 父元素bfc*/
            overflow: hidden;
        }
    </style>
</head>
<body>
<!--浮动-->
<div class="box">
    <div class="child"></div>
</div>
</body>

z-index 上下文 css css样式

一些css基础学习笔记

relative

层叠上下文&层叠水平

层叠顺序是规则

父元素成为层叠上下文

absolute：（无依赖）

下拉框定位（无依赖定位）

对齐居中或边缘

z-index无依赖

一些例子

float

float作用

IE7浮动问题

一些要注意的点

撑开内含浮动元素的无高度div：

overflow

overflow：visible

Body/html与滚动条

解决水平居中跳动的问题的修复

自定义滚动条-webkit

BFC

两栏自适应布局

overflow与absolute

overflow失效妙用

resize拉伸

text-overflow：ellipsis

锚点技术

页面布局的变通

左右宽度固定，中间适应

上下高度固定，中间适应

两栏布局

盒模型

基本概念

实例题

相关推荐