css整理笔记

css

水平垂直居中的方法

1、绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

div{
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

方法二:

绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

图片展示： 如方法一的图片展示

代码如下：

div{
    width:600px;
    height: 600px;
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-300px;
}

方法三：

绝对定位方法：绝对定位下top left right bottom 都设置0

图片展示： 如方法一的图片展示

代码如下：

<div class="child">我是子级</div>
/**css**/
div.child{
    width: 600px;
    height: 600px;
    background: red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

方法四:

flex布局方法：当前div的父级添加flex css样式

<!--html-->
<div class="box">
    <div class="child">child</div>
</div>
/**css**/
.box{
    height:800px;
    -webkit-display:flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    border:1px solid #ccc;
}
div.child{
    width:600px;
    height:600px;
    background-color:red;
}

盒模型：

w3c:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S3vjMe56-1602322882540)(file:///C:\Users\hp\Documents\Tencent Files\2466256941\Image\C2C\VL92}7C2L3O`Q{2BOZ[T%1W.png)]

IE：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ffWvsMqj-1602322882545)(file:///C:\Users\hp\Documents\Tencent Files\2466256941\Image\C2C\K~~36QNGLUX813QI5@}W9VD.png)]

box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽
**border-box：IE 传统盒子模型。**设置元素的 height/width 属性指的是 content + border + padding 部分的高/宽

css选择器

1.标签选择器 以标签名开头,选择所有div元素

2.类选择器 给标签取class名,以点(.)加class名开头,选择所有该class名的…

3.id选择器 给标签取id名,以#加id名开p]头,具有唯一性,选择”id = ‘wrap’”…

4.子选择器 以>隔开父子级元素,(模块名>模块名,修饰>前模块内的子模块)

5.包含选择器 以空格隔开包含关系的元素,(模块名模块名,修饰空格前模块内所有该模块)

6、兄弟选择器 以_{隔开兄弟关系的元素(模块名}模块名 修饰~前模块往下的所有兄弟模块)

7、相邻选择器 以+隔开相邻关系的元素(模块名+模块名 修饰加号前模块往下的相邻的模块 只一个)

8、全局选择器 以*开头(星号标在大括号前，修饰了包含body所有的标签)

9、群选择器 以，分隔(逗号分隔开需要修饰的模块名)

10、属性选择器 [] ([type=text]修饰属性为type=text的模块)

11、伪类选择器

：link 未被访问之前的状态

：visited 访问过后的状态

：hover 鼠标经过/滑过/悬停时的状态

：active 鼠标点击/按下的状态

(1) li:first-child{} (修饰第一个li)

修饰第一个li元素

(2) li:last-child{} (修饰最后一个li)

修饰最后一个li元素

(3) li:nth-child{} (修饰第()个li)

修饰第二个li元素

(4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)

不修饰第一个li元素

权重 以及优先级

！important >1000

行内 1000

id 100

class类 10

标签 1

全局 0

常见的浏览器兼容性问题：

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：设置display:inline;

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4、图片默认有间距
解决方案：使用float 为img 布局

5、IE9一下浏览器不能使用opacity
解决方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

7、cursor:hand 显示手型在safari 上不支持
解决方案：统一使用 cursor:pointer

8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative

数组遍历方法

1.for循环

使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。

2.foreach循环

遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE

3.map循环

有返回值，可以return出来

map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；

5.filter遍历

不会改变原始数组,返回新数组

6.every遍历

every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。

7.some遍历

some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。

8.reduce

reduce()方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。

var` `total = [0,1,2,3,4].reduce((a, b)=>a + b); ``//10

reduce接受一个函数，函数有四个参数，分别是：上一次的值，当前值，当前值的索引，数组

10.find

find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined

11.findIndex

对于数组中的每个元素，findIndex 方法都会调用一次回调函数（采用升序索引顺序），直到有元素返回 true。只要有一个元素返回 true，findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true，则 findIndex 返回 -1。

findIndex 不会改变数组对象。

position

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。（老IE不支持）元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

css 定位还有一个新增属性，粘性定位 sticky，它主要用在对 scroll 事件的监听上；

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

#one { position: sticky; top: 10px; }复制代码

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

css3新特性

2.过渡 transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码

3.动画 animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）复制代码

在css里写：

<style> 
    div{
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation:mymove 5s infinite;
        -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
       }

    @keyframes mymove{
          from {left:0px;}
          to {left:200px;}
       }

    @-webkit-keyframes mymove /*Safari and Chrome*/{
          from {left:0px;}
          to {left:200px;}
        }
</style>

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。 阅读关于 initial的介绍。
inherit	从父元素继承属性。 阅读关于 initinherital的介绍。

4.形状转换** transform:适用于2D或3D转换的元素

rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg);

5.选择器

6.阴影 box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;复制代码

7.边框 border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式–重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;

8.背景 background-clip 制定背景绘制（显示）区域 background-origin background-size

1.（background-clip: border-box;）默认情况（从边框开始绘制） 2.（background-clip: padding-box;）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！ 3.（background-clip: content-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！

9.反射 -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片

10.文字 换行 语法：word-break: normal|break-all|keep-all;、语法：word-wrap: normal|break-word; 超出省略号 text-overflow:clip|ellipsis|string 文字阴影 语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。

11.颜色 rgba（rgb为颜色值，a为透明度） color: rgba(255,00,00,1);background: rgba(00,00,00,.5); hsla h:色相”，“s：饱和度”，“l：亮度”，“a：透明度” color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68);复制代码

12.渐变

13.Filter（滤镜）：黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)

14.弹性布局 Flex

15.栅格布局 grid

16.多列布局

17.盒模型定义 box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！ box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！如下图

18.媒体查询 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！

用纯CSS创建一个三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;复制代码

为什么要初始化 CSS 样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

display:none 与 visibility:hidden 的区别是什么？

display : none 隐藏对应的元素，在文档布局中不再分配空间（回流+重绘）

visibility:hideen 隐藏对应的元素，在文档布局中仍保留原来的空间（重绘）

使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

清除浮动的方式：

1. 父级div定义height
2. 最后一个浮动元素后加空 div 标签 并添加样式 clear:both。（理论上能清除任何标签，增加无意义的标签）
3. 包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。
4. 父级 div 定义 zoom（空标签元素清除浮动而不得不增加无意义代码的弊端，使用zoom:1用于兼容IE）
5. 用after伪元素清除浮动（用于非IE浏览器）

双飞翼布局的实现

双飞翼布局要求

header和footer各自占领屏幕所有宽度，高度固定。

中间的container是一个三栏布局。

三栏布局两侧宽度固定不变，中间部分自动填充整个区域。

中间部分的高度是三栏中最高的区域的高度。

实现：

left、center、right三种都设置左浮动
设置center宽度为100%
设置负边距，left设置负边距为100%，right设置负边距为自身宽度
设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度

:before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

1. 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
2. ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

注意:对于IE6/7/8仅支持单冒号表示法，而现代浏览器同时支持这两种表示法。另外，在CSS3中单冒号和双冒号的区域主要是用来区分伪类和伪元素的。

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

1. png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
2. jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
3. gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
4. webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

参数是 scroll 时候，必会出现滚动条。
参数是 auto 时候，子元素内容大于父元素时出现滚动条。
参数是 visible 时候，溢出的内容出现在父元素之外。
参数是 hidden 时候，溢出隐藏。

为什么父元素会坍塌？

这是因为内部的元素因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的父容器不会被撑开

怎么解决？

方法1：

在使用float元素的父元素最后加一个div：

<div style="clear:both"></div>

方法2：

在使用float元素的父元素添加overflow:hidden;（只要给外面大容器加上overflow:auto的属性，可以解决IE7和火狐浏览器下的清除浮动问题，但是IE6下不生效，所以我们还需要使用zoom这个IE的私有属性来达到彻底清楚浮动的兼容效果。）

方法3：

使用after伪对象清除浮动

列举10个html块元素标签和5个html行内标签，并简述块元素与行内元素的区别

块：div dl form h1 h2 h3 h4 h5 h6 hr ol li p pre table td tr

行内：a b s i u span br img input textarea sub sup

两者区别：

以图例来表述行内元素和块级元素的区别会更加直观：

注：行内元素会再一条直线上，是在同一行的。我是行内元素SPAN标签 我是行内元素strong标签

注：块级元素各占一行。是垂直方向的！

我是块级元素div标签

我是块级元素P标签

如果你要将行内元素变成块级元素，那么就只需要在该标签上加上样式 display:block; 这里已经牵涉到了CSS内容。块级元素可以用样式控制其高、宽的值。

行内元素不可以控制宽和高，除非你想将它转变成为块级元素。它的宽和高，是随标签里的内容而变化。
彻底清楚浮动的兼容效果。）

方法3：

使用after伪对象清除浮动

列举10个html块元素标签和5个html行内标签，并简述块元素与行内元素的区别

块：div dl form h1 h2 h3 h4 h5 h6 hr ol li p pre table td tr

行内：a b s i u span br img input textarea sub sup

两者区别：

以图例来表述行内元素和块级元素的区别会更加直观：

注：行内元素会再一条直线上，是在同一行的。我是行内元素SPAN标签 我是行内元素strong标签

注：块级元素各占一行。是垂直方向的！

我是块级元素div标签

我是块级元素P标签

如果你要将行内元素变成块级元素，那么就只需要在该标签上加上样式 display:block; 这里已经牵涉到了CSS内容。块级元素可以用样式控制其高、宽的值。

行内元素不可以控制宽和高，除非你想将它转变成为块级元素。它的宽和高，是随标签里的内容而变化。