css记忆知识点

最新推荐文章于 2022-06-22 23:20:54 发布

我们一起学前端

最新推荐文章于 2022-06-22 23:20:54 发布

阅读量369

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_35577655/article/details/93460555

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、如何让元素支持height:100%效果

（1）父元素设定显式的高度值
  或者
（2）使用绝对定位
【absolute 相对于最近一层的设置了定位的父级元素（除去position:static）（可以向上寻找满足条件的父级元素），在没有设置了定位元素的父级元素时，相对于HTML根元素定位（不是相对于body）】

二、vertical-align

①凡是line-height 起作用的地方vertical-align 也一定起作用
【vertical-align 起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display 值为table-cell 的元素。换句话说，vertical-align 属性只能作用在display计算值为inline、inlineblock，inline-table 或table-cell 的元素上。因此，默认情况下，span、strong、em等内联元素，img、button、input等替换元素，非HTML 规范的自定义标签元素，以及td单元格，都是支持vertical-align 属性的，其他块级元素则不支持。】
【现实世界是没有这么简单的。CSS 世界中，有一些CSS 属性值会在背后默默地改变元素display 属性的计算值，从而导致vertical-align 不起作用。比方说，浮动和绝对定位会让元素块状化，】

.box {
height: 128px;
}
.box > img {
height: 96px;
vertical-align: middle;
}
<div class="box">
<img src='https://mp.csdn.net/mdeditor/1.jpg'>
</div>

此时图片顶着.box 元素的上边缘显示，根本没垂直居中，完全没起作用！这种情况看上去是vertical-align:middle 没起作用，实际上，vertical-align是在努力地渲染的，只是行框盒子前面的“幽灵空白节点”高度太小，如果我们通过设置一个足够大的行高让“幽灵空白节点”高度足够，就会看到vertical-align:middle 起作用了，

ps：“幽灵空白节点”是内联盒模型中非常重要的一个概念，具体指的是：在HTML5 文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。

**重点中的重点：
①vertical-align 属性的默认值baseline 在文本之类的内联元素那里就是字符x 的下
边缘，对于替换元素则是替换元素的下边缘。但是，如果是inline-block 元素，则规则要
复杂了：一个inline-block 元素，如果里面没有内联元素，或者overflow 不是visible，
则该元素的基线就是其margin 底边缘；否则其基线就是元素里面最后一行内联元素的基线。
②因为字符实际占据的高度是由line-height 决定的，当line-height 变成0 的时候，字符占据的高度也是0，此时，顶线位置就变成了字符内容区域的垂直中心位置，基线还是x的下边缘。
**

②由于vertical-align 的默认值是baseline，即基线对齐，而基线的定义是字母x 的下边缘。因此，内联元素默认都是沿着字母x 的下边缘对齐的。对于图片等替换元素，往往使用元素本身的下边缘作为基线
在这里插入图片描述

在这里插入图片描述

③负值全部都是往下偏移，正值全部都是往上偏移，而且数值大小全部都是相对于基
线位置计算的，因此，从这一点来看，vertical-align:baseline等同于vertical-align:0
④在CSS 世界中，凡是百分比值，均是需要一个相对计算的值，例如，margin 和padding是相对于宽度计算的，line-height 是相对于font-size 计算的，而这里verticalalign属性的百分比值则是相对于line-height 的计算值计算的。
⑤假设某元素的line-height 是20px，那么此时vertical-align:-25%相当于设置
vertical-align:-5px。按照之前学到的知识，会发现百分比值无论什么时候都很实用，因
此会给人感觉vertical-align 的百分比属性值也会非常实用，但是事实上，平时开发中很
少使用。原因在于，在如今的网页布局中，line-height 的计算值都是相对固定并且已知的，因此，直接使用具体的数值反而更方便。比方说上面小图标对齐的例子，我们肯定会直接vertical-align:-5px，而不会使用vertical-align:-25%，因为后者还要重新计算，
并且很多时候是除不尽的，除了装门面以外，我是想不到还有其他使用的理由了。

三、内联盒模型

<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>

上面的html看似普通，实际上包含了很多术语和概念，或者换种通俗的说法，包含了很多种盒子。我
归结为下面这些盒子。
（1）内容区域（content area）。内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子（character box）；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。定义上说内容区域是“看不见的”，这对理解“内容区域”是不利的，好在根据我多年的理解与实践，我们可以把文本选中的背景色区域作为内容区域，在IE 和Firefox 浏览器下，文字的选中背景总能准确反映内容区域范围，但是Chrome 浏览器下，::selection 范围并不总是准确的，例如，和图片混排或者有垂直padding 的时候，范围会明显过大，这一点需要注意。后面行高等章节会利用此选中背景帮助我们理解。内容区域在解释内联元素的各种行为表现时，出镜率出奇地高，建议大家这里多多留意。
在这里插入图片描述
（2）内联盒子（inline box）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类：
在这里插入图片描述
如果外部含内联标签，则属于“内联盒子”（实线框标注）；如
果是个光秃秃的文字，则属于“匿名内联盒子”（虚线框标注）。需要注意的是，并不是所有光秃秃的文字都是“匿名内联盒子”，其还有可能是“匿名块级盒子”，关键要看前后的标签是内联还是块级。
（3）行框盒子（line box）。例如：这是一行普通的文字，这里有个 em 标签。
每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”
组成的。
（4）包含盒子（containing box）。例如：
p标签就是一个“包含盒子”（实线框标注），此盒子由一行一行的“行框盒子”组成。

四、height和line-height

①在没有height的时候，高度由line-height撑开
【
CSS中起高度作用的应该就是height以及line-height了吧！如果一个标签没有定义height属性(包括百分比高度)，那么其最终表现的高度一定是由line-height起作用，即使是IE6下11像素左右默认高度bug也是如此。待我慢慢叙来。
】
【
默认状态，浏览器使用1.0-1.2 line-height, 这是一个初始值。
】

在这里插入图片描述

②几个小概念
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
③line-height由什么确定

五、animation中steps()以及fill-mode

steps

①steps()功能符和CSS3 animation中的cubic-bezier()功能符的地位和作用是一样的，都可以作为animation-timing-function的属性值。
②然后steps()简化出了step-start和step-end这两个关键字；cubic-bezier()则有linear，ease，ease-in，ease-out以及ease-in-out。
③最核心的一点就是：timing-function 作用于每两个关键帧之间，而不是整个动画
详细资料：https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/

animation-fill-mode

顾名思意，“动画填充模式”，啥子意思呢？我们装修时候，都见过铺地面砖或地板的，地砖与地砖之间是有缝隙的，我们需要填充，如何个填充法，我们就称之为“填充模式”。

在这里插入图片描述

none（默认值），表示动画应用之时、动画延时执行之前之前、以及动画结束之后，元素呈现的都是默认状态。
forwards，前进，表示动画结束后，元素就是当前动画结束时候的状态。对应keyframe中的"to"或"100%"帧。如果应用alternate值，同时无限或偶数次数动画，此时最终keyframe是"from"或"0%"关键帧。
backwards，返回，表示动画开始之前，元素处于keyframe是"from"或"0%"关键帧的状态。由于大多数动画的animatin-delay为0, 由于没有指定forwards状态(如：both值)，因此我们视觉上看到的表现是：动画结束后，动画回到了起始关键帧状态；实际是动画开始之前就如此，而不是结束，万万不可被此假象误导。
要想看清现实，可以设置animation-delay为非0值，我们就可以看到动画开始之前，元素就是"0%"起始关键帧状态，而不是元素默认状态。直观且准确反映了backwards的准确释义。
实际应用中，animation-delay设置了非0值，同时不是step-start动画形式，此参数慎用，除非元素默认状态就是起始帧状态，否则动画犹如抽风了一样~
both，forwards和backwards双P, 这是个略考智商的属性，既当爹又当妈的，这可怎么搞！好搞的，如果要求同一时间既爹又妈，你不是人妖，搞不来。但是白天当爹，晚上当妈，我想相对容易多。这里也是如此，both是与的关系，中文意思是“同时”，表示：动画开始之前是"from"或"0%"关键帧；动画完成之后是"to"或"100%"关键帧状态。

自我理解：
①steps中的start和end规定在一段时间的开始点完成状态改变，还是在结束时间点完成状态改变。【因为step动画，是一个时间点一种状态】
②fill-mode：规定动画开始之前是什么状态，动画结束后是什么状态

六、padding实现自适应布局

①实现一个正方形：
div { padding: 50%; }
②得到了一个宽高比为2:1 的矩形效果。
div { padding: 25% 50%; }
③实际需求
网页开发的时候经常会有横贯整个屏幕的头图效果，我们通常的做法是定高，如200像素高，屏幕小的时候图片两侧内容隐藏。然而，这种实现有一个问题，就是类似笔记本这样的小屏幕，头图高度过高会导致下面主体内容可能一屏都实现不了，但是，如果我们使用padding 进行等比例控制，则小屏幕下头图高度天然等比例缩小，没有任何JavaScript，却依然适配良好！例如：
.box {
padding: 10% 50%;
position: relative;
}
.box > img {
position: absolute;
width: 100%; height: 100%;
left: 0; top: 0;
}
就实现了一个宽高比为5:1 的比例固定的头图效果，上述方法包括IE6 在内的浏览器都兼容
④最后，再简单说一个内联元素垂直padding 的妙用吧！
大家应该都知道网页可以通过地址栏的hash 值和页面HTML 中id 值一样的元素发生锚点定位吧？有时候，我们希望定位的元素，如标题距离页面的顶部有一段距离，比方说页面正好有一个50 像素高的position:fixed 的导航栏。如果按照浏览器自己的特性，标题就会定位在这个固定导航的下面，这显然不是我们想看到的，那怎么办呢？很多人会想到让标题栏设置一个padding-top:50px，但是，这种影响布局的事情大多数时候只是理论上可行，难道没有什么简单实用的办法吗？这时候，我们不妨试试使用内联元素，块级元素设置padding-top:50px 会影响布局，但是内联元素不会，于是，事情就简单了。案例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * { margin: 0; padding: 0; }
        body { padding-bottom: 1000px; font-family: "Microsoft YaHei"; }
        .header {  background-color: #000; opacity: .5; filter:alpha(opacity=50);
            height: 80px; width: 100%; position: fixed; z-index: 999; top: 0;
        }
        .section { margin-top: 100px; }
        ul { position: fixed; right: 40px; top: 100px; }
        ul li { margin-top: 10px; }
        ul li a { color: #000; text-decoration: none; }
        .container {  width: 600px; margin: 0 auto;   }
        .test { margin-top: 50px; }
        .test h2 {  font-size: 18px; font-weight: 800; padding-top: 80px; }
        .test .box { width: 600px; height: 200px; background-color: #F46465;  }
    </style>
</head>
<body>
<div class="header"></div>
<div class="section">
    <ul>
        <li><a href="#test1">目录一</a></li>
        <li><a href="#test2">目录二</a></li>
        <li><a href="#test3">目录三</a></li>
        <li><a href="#test4">目录四</a></li>
    </ul>
    <div class="container">
        <div class="test" style='margin-top:-100px'>
            <h2 id="test1">一、内容一</h2>
            <div class="box"></div>
        </div>
        <div class="test">
            <h2 id="test2">二、内容二</h2>
            <div class="box"></div>
        </div>
        <div class="test">
            <h2 id="test3">三、内容三</h2>
            <div class="box"></div>
        </div>
        <div class="test">
            <h2 id="test4">四、内容四</h2>
            <div class="box"></div>
        </div>
    </div>
</div>
</body>
</html>

⑤使用padding绘制三杠
在这里插入图片描述

方法一：这个是利用border的double属性显示上面的2道杠，然后是border-bottom的solid显示下面的1道杠

#box1{
    border-top:60px double red;
    width: 100px;
    padding-top: 20px;
    border-bottom: 20px solid red;
}

方法二：这个方法和方法1很相似，只不过第三道杠是通过background-clip实现的，一般情况下，背景色是从border开始渲染的，通过background-clip指定渲染的位置，此处为content-box。

#box2{
    border-top:60px double red;
    width: 100px;
    height: 20px;
    padding-top: 20px;
    background-clip: content-box;
    background-color: red;
}

方法三：这个是利用上下border设置第一第三道杠，中间通过方法2的方式实现第二道杠，然后在中间空白的地方用padding撑开。

#box3{
    border-top: 20px solid red;
    border-bottom: 20px solid red;
    padding: 20px 0px;
    width: 100px;
    height: 20px;
    background-color: red;
    background-clip: content-box;
}

⑥同样的道理实现圆圈
在这里插入图片描述

#box4{
    width:100px;
    height:100px;
    background-clip: content-box;
    background-color: black;
    border-radius: 50%;
    padding: 20px;
    border:20px solid black;
}

七、margin相关

一、使用margin实现两端对齐布局
在这里插入图片描述
给中间层的div加上了margin-right:-10px后，他的尺寸相当于100%+10px；
里面最后一个item的右边缘刚好在中间层div的100%处；图示说明

在这里插入图片描述

<style>
    .outWrapper{
        width:320px;
        overflow:hidden;
        border:2px solid blue;
    }
    .wrapper{
        margin-right: -10px;
    }
    .wrapper:after{
        content:'';
        display:block;
        clear: both;
    }
    .item{
       float:left;
       width:100px;
       height:100px;
       background: greenyellow;
       margin-right:10px;
    }
    </style>
</head>
<body>
    <div class="outWrapper">
            <div class="wrapper">
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
               </div>
    </div>
   
</body>

二、margin:auto,实现居中对齐

1、首先要知道margin:auto作用的原理：
margin:auto是平分剩下的空间
2、margin:auot平分空间的条件（两个缺一不可）
①父子元素都有固定的宽高
②子元素的宽或者高设置为auto的时候，能够填充父元素的空间，也就是说宽高是100%
疑问解答：下面的代码为什么不能使得子元素垂直居中

.father {
height: 200px;
}
.son {
height: 100px;
margin: auto;
}

答案：这里，假如说把.son 元素的height:100px 去掉，.son 的高度会自动和父元素等高变成200px 吗？显然不会！因此无法触发margin:auto计算，故而无法垂直居中。

3、使得元素水平垂直居中的妙法

  .father {
            width: 300px;
            height: 150px;
            position: relative;
            background: #eee;
        }

        .son {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 200px;
            height: 100px;
            margin: auto;
            background: orange;
        }

效果图：
在这里插入图片描述