CSS芝麻

天落枫

已于 2022-10-13 09:24:47 修改

阅读量494

点赞数

分类专栏：前端文章标签： css css3 动画

于 2020-05-27 14:17:03 首次发布

本文链接：https://blog.csdn.net/xiapi3/article/details/106380020

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1 设置div相对位置后不让其占用空间

情景：
当需要某个元素偏离原本位置一定位置时，又不希望其占用原来的位置空间。

分析：
使用绝对定位虽然可以不占空间但是不能相对于原来的位置，它是相对于已定位的父元素。使用相对定位虽然可以相对于原本位置，但是需要占用空间

解决：
经典解决方案：【子绝父相】。将当前需要改变的元素使用一个空div包裹，子元素绝对定位，不占用位置，而父元素为空div所以占用0位置，父元素采用相对定位，能让子元素以其作为锚点进行偏置，即相对于原本位置。

位置定位

position位置属性解释：

static：默认
relative：相对定位，如果不添加其他属性则效果同static
fixed：固定定位，固定于浏览器窗口，脱离文档流
absolute：绝对定位，类似于fixed，但是是参考父级非static定位元素定位

浮动定位

float浮动属性解释：left/right
clear清除属性解释：left/right/both
注意：若由于浮动的原因元素超过了父盒子，则可以使用overflow:auto来撑开父盒子。IE6需要再加zoom:1

2 css动画效果

参考网站：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

transition动画

这种动画要求有始有终。起始条件和终止条件中的过渡就是动画。
最简单的：

img{
    height:15px;
    width:15px;
}

img:hover{
    height: 450px;
    width: 450px;
}

伪类动画效果，瞬间展示，为了过渡可以使用属性transition

img{
    transition: 1s;
}

动画可以设置延时效果，且可以设定动画作用属性：

img{
    transition: 1s height, 1s 1s width;
}

此处高度先变化1s，然后宽度再变化1s
变化的速度可以设置：

img{
    transition: 1s ease;
}

效果还有：
（1）linear：匀速
（2）ease-in：加速
（3）ease-out：减速
（4）cubic-bezier函数：自定义速度模式，可使用工具来定制

注意：transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等

animation

相当于加强版的过渡动画，有很多可控制的内容，解除了很多限制，使用@keyframes关键字来建立动画

@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}
div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}

注意：0%可以用from代替，100%可用to代替，特殊的，动画可以分步过渡：div:hover {animation: 1s rainbow infinite steps(10);}

动画结束的效果：

可以是跳回无动画状态
可以跳回初始动画状态
可以为动画结束状态
可以为暂停状态
分别对应于：

animation-fill-mode还可以使用下列值。
（1）none：默认值，回到动画没开始时的状态。
（2）backwards：让动画回到第一帧的状态。
（3）both: 根据animation-direction（见后）轮流应用forwards和backwards规则。
（4）forward: 结束状态
  
//暂停
div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}
div:hover {
  animation-play-state: running;
}

打字特效

/**
 * Typing animation with pure CSS. 
 * Works best in browsers supporting the ch unit.
 */

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }

h1 { 
	font: bold 200% Consolas, Monaco, monospace;
	border-right: .1em solid;
	width: 16.5em; /* fallback */
	width: 30ch; /* # of chars */
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
	animation: typing 20s steps(30, end), /* # of steps = # of chars */
	           blink-caret .5s step-end infinite alternate;
}

3 给div盒子加阴影凸显出来

主要是用到了一个属性：box-shadow

div{
	box-shadow: 0px 0px 10px 5px #3b3b3b;
}

box-shadow属性具有以下几个常用的子属性：按照样例
box-shadow: 水平偏移垂直偏移模糊距离阴影尺寸阴影颜色

4 使用max-width进行弹性布局

当需要元素依据窗口大小进行改变时，使用max-width代替width是一个非常好的方法，在窗口小于max-width时，会进行宽度调整而不是出现滚动条！

5 使用box-sizing自动计算功能

传统的border和padding会增加原始元素的width，即在设定尺寸上外张增加，而如果设置了box-sizing:border-box;后，则只会往内缩了。
为了保证所有元素都按照新标准来显示，可以这么做：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

注意：IE8+

6 css布局：position/float

使用position布局比较简单直接，就是设定各元素的定位，然后手动调整位置

使用float布局更为简单，由于会自动浮动，所以可以方便堆叠

详细布局查看我的其他文章

7 媒体查询构建自适应布局

以下布局可以使得页面在宽度小于600px时的屏幕上显示不一样的效果：

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

如图：
在这里插入图片描述
其他：meta viewport

8 元素对其方式

其他对齐可以使用：margin:0 auto等来解决

9 让标签内的文本识别换行符并换行

css有个属性，可以使得在输出标签内文本时，对空白字符进行解析，并确定是否换行：white-space
该属性包含以下几个值：

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

使用方法：

<div style={{"white-space":"pre-line"}}>
字符串<p>字符串</p>
</div>

此时，无论包含在该div内的所有标签都会作用！
参考：https://www.w3school.com.cn/cssref/pr_text_white-space.asp

10 定义变量

css3可以定义变量，格式为：--变量名:变量值，使用的时候：var(--变量)
定义变量的时候需要选择变量的作用域范围，变量只能在该范围内使用！

/* 全局变量 */
:root{
	--color-text: #666;
}
/* 局部变量 */
.abc{
	--font-size: 14px;
}
/* 使用变量 */
.a{
	font-size: var(--font-size)
}

11 水平居中和垂直居中

水平居中：文字的左右两边的间距是一样的，
垂直居中:文字的上边和下边的间距是一样的。

12 CSS变量

css中定义变量

定义变量可分多种情况：
1、定义全局变量

:root {
  --borderColor: #ccc;
}

2、定义某元素下的变量

.look{
  --borderColor: #ccc;
}

3、定义媒体查询下的变量

@media screen and (min-width: 1025px) { 
    :root { 
        --borderColor: #ccc;
　　 }
}
/* 使用：*/
.has-border-table > tr > td {
  border-right: 1px solid var(--borderColor);
}

less中定义变量

定义：

@bg-color : #d9d9d9;
/* 使用：*/
.has-border-table > tr > td {
  border-right: 1px solid var(@bg-color);
}

sass中定义变量

定义：

$bg-color : #d9d9d9;
/* 使用：*/
.has-border-table > tr > td {
  border-right: 1px solid var($bg-color);
}

参考：https://www.cnblogs.com/jing5990/p/12322404.html

13 opacity visibility display:none区别

opacity:0：会渲染、不可见、可点击、非继承属性
visibility:hidden：会渲染、不可见、不可点击、继承属性
display:none：不渲染、不可见、不可点击、非继承属性

display会造成文档回流，性能消耗大，不可被读取，visibility和opacity只会本元素重绘，读屏软件可读取

天落枫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS芝麻

CSS芝麻设置div相对位置后不让其占用空间设置div相对位置后不让其占用空间情景：当需要某个元素偏离原本位置一定位置时，又不希望其占用原来的位置空间。分析：使用绝对定位虽然可以不占空间但是不能相对于原来的位置，它是相对于已定位的父元素。使用相对定位虽然可以相对于原本位置，但是需要占用空间解决：经典解决方案：【子绝父相】。将当前需要改变的元素使用一个空div包裹，子元素绝对定位，不占用位置，而父元素为空div所以占用0位置，父元素采用相对定位，能让子元素以其作为锚点进行偏置，即相对于原本位置。
复制链接

扫一扫