css相关总结

最新推荐文章于 2022-06-21 18:06:24 发布

alisaGreen

最新推荐文章于 2022-06-21 18:06:24 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/bluefish_flying/article/details/53316903

版权

背景：最近由于疫情呆在家所以把原来的书翻来看看，然后看自己博客相关的记录很少，所以决定做一个css总结记录自己之前看多的或者用多的东西，避免后续遗忘

1、布局

圣杯布局

解释：利用浮动，负边距，相对定位实现主体百分比布局，两边固定宽度布局

双飞翼布局

垂直居中布局

我认为这个需要分为几个方面来谈（这里主要只写我觉得容易记住的常用的好用的，其他一些不太能记住的我就暂时不写了）

1、行内元素和块级元素

行内元素：

水平居中 text-align:center

2、块级元素（分为定宽定高不定宽高）

定高定宽

1.一般利用绝对定位和负边距 2、利用绝对定位和margin auto

.testClassCenter{
			position:absolute;
			left:50%;
			top:50%;
		    margin-left:-100px;
		    margin-top:-100px
		}

.testClass{
			margin:auto;
			position:absolute;
			bottom:0;
			top:0;
			right:0;
			left:0;
		}

不定宽高

这种一般是父级元素是定宽高的不然里面的元素很难定义到垂直居中使用绝对定位和水平移动的属性设置

        .csss{
           position:relative;
           width:400px;
           height:400px;
           border:1px solid blue;
          
        }
        .test{
           position:absolute;
           top:50%;
           left:50%;
           -webkit-transform: translate(-50%,-50%);
           -moz-transform: translate(-50%,-50%);
           transform:translate(-50%,-50%);
        }

权重（层叠）（优先级）

次序

1、标有!important的用户样式

2、标有!important的作者样式

3、作者样式

4、用户样式

5、浏览器/用户代理应用的样式

6、ID选择器，如：#content
7、类，伪类和属性选择器，如： content、:hover
8、标签选择器和伪元素选择器，如：div、p、:before
9、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）

摘自《精通css高级web标准解决方案》

继承

默认继承的 ("Inherited: Yes") 的属性：

所有元素默认继承：visibility、cursor
文本属性默认继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-indent、text-align、text-shadow、text-transform、direction
列表元素默认继承：list-style、list-style-type、list-style-position、list-style-image
表格元素默认继承：border-collapse

默认不继承的("Inherited: No") 的属性：

所有元素默认不继承：all、display、overflow、contain
文本属性默认不继承：vertical-align、text-decoration、text-overflow
盒子属性默认不继承：width、height、padding、margin、border、min-width、min-height、max-width、max-height
背景属性默认不继承：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性默认不继承：float、clear、position、top、right、bottom、left、z-index
内容属性默认不继承：content、counter-reset、counter-increment
轮廓属性默认不继承：outline-style、outline-width、outline-color、outline
页面属性默认不继承：size、page-break-before、page-break-after
声音属性默认不继承：pause-before、pause-after、pause、cue-before、cue-after、cue、play-durin

四个通用属性值可以通过inherit实现默认不继承属性的强制继承

首先需要了解，属性值分为三种，即 css 规范定义的初始值、浏览器厂商重置的用户代理样式和我们开发人员设置的样式，优先级也是按照这个顺序递增。

css 为控制继承提供了四个特殊的通用属性值，每个 css 属性都能使用这些值。

inherit

设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。

initial

将属性的初始值应用于元素。实际上，就是“重置为默认值”。

unset

将属性重置为自然值，也就是如果属性是自然继承的那么就是 inherit ，否则和 initial 一样。

revert

css3

transform 在2D或者3D效果中使用的一个初始引申设置值

2D属性

scale(x,y) 设置模块放大或者缩小相对原模块的宽高

rotate(xdeg) 元素顺时针旋转给定的角度

skew(x,y) 元素按照参数翻转给定的角度

translate(x,y) 当前位置移动

matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

3D属性

一般就属性直接添加了三维概念

可以通过scale3d()这样设置也可以通过scaleX scaleY scaleZ的方法进行更改

transition 过度效果动画效果一般是设置某个已有的属性，动画多少时间，（运动规律，是否匀速等（linear，ease）），延迟多少时间运行。进行了某项重新设置或者更改包括transform的动画设置效果一般是一个过渡有初始状态和后期需要显示的状态

eg：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}

div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>

<div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

动画

@keyFrames animation

-webkit-   /* Safari 和 Chrome */

-o- /*opera*/

-moz- 火狐

@keyFrames myFirstAni{
 0%：{background：red}
 25%：{background:blue}
 50%：{background:orange}
 75%：{background:green}
 100%：{background:pink}

}

@keyFrames myFirstAni{
 from：{background：red}
 to：{background:blue}

}

@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

参考：https://juejin.im/post/5dcb89186fb9a04a752ba034
https://www.w3school.com.cn/css3/css3_animation.asp