css浮动、定位、过渡、2D、3D、动画、flex

最新推荐文章于 2023-07-08 18:07:52 发布

_%d_

最新推荐文章于 2023-07-08 18:07:52 发布

阅读量241

点赞数

文章标签： css 3d css3

本文链接：https://blog.csdn.net/m0_74147144/article/details/130025938

版权

css(4)

传统网页布局的三种方式

普通流（标准流）

标签按照规定好默认的方式排列

1、块级元素会独占一行，从上下顺序排列。

常用元素：div、hr、h1~h6、ul、ol、dl、form、table

2、行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

常用元素：span、a、i、em

浮动

可以让多个块级元素一行内排列显示，且没有缝隙。

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动float

创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含或另一个浮动框的边缘。

选择器{
	float:属性值;
}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动特性

1、浮动元素会脱离标准流（脱标），移动到指定位置。

2、浮动的元素会一行内显示并且元素顶部对齐。（如果其中一个盒子变高也是上沿对齐）

注：浮动的元素是紧贴一起的，如果父级宽度装不下，多出的盒子会另起一行。

3、浮动的元素会具有行内块元素的特性。

如果行内元素有了浮动则不需要转换块级/行内块元素就可以直接给出宽高。
如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。

4、浮动的盒子不再保留原来的位置。

浮动元素常和标准流父级搭配使用

先用标准流的父元素排列上下位置，然后内部子元素采取浮动排列左右位置。

浮动注意点

1、浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也应该浮动防止引起问题。

浮动只会影响它后面的标准流，会贴在前一个标准流下面显示

清除浮动

由于父级盒子很多的情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面标准流的盒子。

清除浮动本质

清除浮动造成的影响
如果父盒子本身有高度则不需要清除浮动
清除浮动后，父级就会根据浮动的子盒子检测高度。父级有了高度就不会影响下面的标准流了

清除浮动clear

选择器{
	clear:属性值;
}

实际工作中，几乎只用clear:both;

清除浮动的策略是：闭合浮动。

清除浮动的方法

1、额外标签法

在浮动元素末尾添加一个空标签(空标签必须是块级元素，不能是行内元素)

例如：

.clear{
	clear:both;
}

<div class="clear"></div>

或者其他标签如<br>等

2、父级添加overflow属性

将其属性设置为hidden,auto,scroll

(无法显示溢出的部分)

3、父级添加after伪元素

在前面写上此段代码，找到父元素

<div class="box clearfix"></div>

4、父级添加双伪元素

方法同上

定位

1、某个元素可以自由的在一个盒子内移动位置，并压住其他盒子。

2、当滚动窗口时，盒子是固定在屏幕某个位置的。

定位组成

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式；边偏移决定了该元素最终的位置。

定位模式

position属性

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

top、bottom、left、right四个属性

静态定位

默认定位，无定位。

选择器{
	position:static;
}

按照标准流特性摆放位置，没有边偏移。

相对定位relative

选择器{
	position:relative;
}

1、移动位置以它原来的位置为参照移动。

2、当元素移动走的时候，原来的位置仍占有，后面的盒子仍然以标准流的方式来对待它。

例：

.box1{
	postion:relative;
	top:100px;
	left:100px;
	width:200px;
	height:200px;
	background-color:pink;
}
.box2{
	width:200px;
	height:200px;
	background-color:deeppink;
}

效果：

绝对定位absolute

元素在移动位置的时候，是相对于它的祖先元素而变化的。

选择器{
	position:absolute;
}

1、如果没有父元素或父元素没有定位，则以浏览器页面为准定位。

2、祖元素有定位，以最近一级祖元素为准。

例：

.father{
	position:relative/absolute;
	width:500px;
	height:500px;
	background-color:pink;
}
.son{
	position:abolute;
	left:0;
	bottom:0;
	width:200px;
	height:200px;
	background-color:sky-blue;
}

效果：

3、绝对定位不占有原来的位置（比浮动飘得还高），下面的盒子会占有其位置。

相对/绝对定位使用

1、子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个位置，不会影响其他的兄弟盒子。

2、父盒子需要加定位限制子盒子在父盒子内显示。

3、父盒子布局时，需要占有位置，因此父亲只能是相对定位。

相对定位经常用来作为绝对定位的父级。

因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，是绝对定位。

固定定位fixed

将元素固定在浏览器的可视区域之内，使用场景：可以在浏览器页面滚动时元素位置不会改变。

选择器{
	position:fixed;
}

特点：

1、以浏览器的可视窗口为参照移动元素。

跟父元素没有关系
不随滚动条滚动

2、固定定位不占有原来的位置

固定在版心右侧位置

1、让固定定位的盒子left:50%，走到浏览器可视区一半的位置。

2、让固定位置的盒子margin-left:版心宽度一半的距离。多走版心宽度一半位置。

.fixed{
	position:fixed;
	left:50%;
	margin-left:400px;
	width:50px;
	height:150;
	background-color:blue;
}

粘性定位sticky

相当于相对定位和固定定位的结合。

选择器{
	position:sticky;
	top:10px;
}

特点：

1、以浏览器的可视窗口为参照点移动元素（固定定位的特点）

2、粘性定位占有原来的位置（相对定位的特点。

3、必须添加top、left、right、bottom其中的一个才有效。

.nav{
	position:sticky;
	top:0;
	width:800px;
	height:50px;
	background-color:pink;
	margin:100px auto;
}

定位叠放次序z-index

在使用定位的时候，可能出现盒子重叠的情况，此时使用z-index来控制盒子的前后次序（z轴）

选择器{
	z-index:1;
}

数值可以是正整数、负整数或0，默认是auto,数值越大，盒子越靠上
如果属性值一样，按照书写顺序，后来者居上
数字后面一定不能加单位
只有定位的盒子才有z-index属性

定位拓展

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:() auto水平/垂直居中

方法：

1、left:50%;让盒子的左侧移动到父元素的水平中心位置。

2、margin-left:100px;让盒子向左移动自身宽度的一半。

.box{
	position:absolute;
	left:50%；
	margin-left:-100px;
	width:200px;
	height:200px;
	background-color:pink;
}

定位的特殊性

绝对定位和固定定位也和浮动类似。

1、行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

span{
	position:absolute;
	width:100px;
	height:100px;
	background-color:pink;
}

2、块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

.div{
	position:absolute;
	background-color:pink;
}

效果：

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题。

绝对定位（固定定位）会完全压住盒子

浮动元素不同，它只会压住它下面标准流的盒子，但是不会压住下面标准流里面的文字（图片），如：

但是绝对定位（固定定位）会压住下面标准流所有的内容如：

浮动之所以不会压住文字，因为浮动最初是为了产生文字环绕效果的，文字会围绕浮动元素。

CSS3过渡

当元素从一种样式变换为另一种样式是为元素添加的效果

过渡动画：从一个状态渐渐过渡到另外一个状态

经常和:hover一起搭配使用

transition:要过渡的属性 花费的时间 运动曲线 何时开始;(后两个可以省略)

1.属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都
变化过渡，写一个all就可以。
2.花费时间：单位是秒（必须写单位)比如0.5s
3.运动曲线：默认是ease（可以省略）
4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s

例：

div{
	width:200px;
	height:100px;
	background-color:pink;
	/*如果想写多个属性，用,分割*/
	transition:width .5s ease 1s,height .5s ease 1s;
	/*如果想要多个属性都变化，属性写all即可*/
	transition: all 0.5s;
}

切图

常见的图片格式

jpg图像格式：JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的
gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景
和动画效果，实际经常用于一些图片小动画效果
png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保
持透明背景.如果想要切成背景透明的图片,请选择png格式.
PSD图像格式PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿.对我们前端人员来说，最大的优点我们可以直接从上面复制文字,获得图片,还可以测量大小和距离.

图层切图

最简单的切图方式：右击图层—>快速导出为PNG

需要合并图层再导出：

1、选中需要的图层：图层菜单–>合并图层(ctrl+e)

2、右击图层—>快速导出为PNG

CSS属性书写顺序

建议遵循以下顺序：
1.布局定位属性：display /position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式）
2.自身属性：width/height/margin/padding/border/ background
3.文本属性：color/font / text-decoration/text-align/vertical-align/white- space / break-word
4.其他属性（CSS3）: content/cursor / border-radius /box-shadow /text-shadow/background:linear-gradient…

页面布局整体思路

常见网页布局形式

2D转换

转换transform可以实现元素的位移、旋转、缩放等效果。

移动：translate
旋转：rotate
缩放：scale

移动：translate

transform: translate(x, y);或者分开写
transform: translateX(x);
transform: translateY(y);

1、定义 2D 转换中的移动，沿着X和Y轴移动2、元素\ntranslate 最大的优点：不会影响到其他元素的位置

3、参数 x, y 可以是百分数，translate 中的百分比单位是相对于自身元素的宽度或高度的百分比 translate:(50%，50%)

4、对行内标签没有效果

实现盒子水平和垂直居中

/*子绝父相*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

旋转：rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

transform: rotate(45deg);

1、值为正数则顺时针旋转，为负数则逆时针旋转。

2、默认旋转的中心点是元素的中心点

转换中心点 transform-origin

我们可以通过设置 transform-origin 设置元素转换的中心点。

语法：

transform-origin: x y;

1、x y 默认转换的中心点是元素的中心点（50% 50%）

2、还可以给 x y 设置像素或者方位名词（top bottom left right center）

缩放：scale

控制元素放大缩小

 transform: scale(x, y);

1、参数大于 1 则放大，小于 1 则缩小。

2、x, y 不跟单位的话，是指缩放的倍数。3、transform: scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)

4、可以配合 transform-origin 使用，改变缩放中心。

5、scale 的优势：不占空间

转换综合写法

同时使用多个转换，其格式为：

 transform: translate() rotate() scale();

1、其顺序会影响转换的效果。（如先旋转会改变坐标轴方向）

2、当我们同时有位移和其他属性的时候，记得要将位移放到最前。

动画

可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用

1、定义动画（动画序列%a)

2、使用动画

 /* 1. 定义动画 */
@keyframes move {
    /*开始状态*/
    0% {
        transform: translateX(0px);
    }
    /*结束状态*/
    100% {
        transform: translateX(1000px);
    }
}
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 2. 调用动画 */
    /* 动画名称 */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 5s;
}

动画序列

1、0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。

2、在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

3、一个元素可以添加多个动画，调用时用逗号分隔。animation: bear .4s, move 3s;

4、请用百分比来规定变化发生的时间，或用关键词"from"和“to”，等同于0%和100%。

注：

可以做多个状态的变化 keyframes 关键帧
百分比必须是整数
百分比是总时间 animation-duration 的划分

动画常用属性

动画属性简写

animation: 动画名称(必) 持续时间(必) 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

animation: myfirst 5s linear 2s infinite alternate;

简写属性里面不包含 animation-play-state
暂停动画: animation-play-state: puased;
经常和鼠标经过等其他配合使用想要动画走回来，而不是直接跳回来: animation-direction: alternate
盒子动画结束后，停在结束位置:animation-fill-mode: forwards

3D转换

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

x轴：水平向右注意： x 右边是正值，左边是负值
y轴：垂直向下注意： y 下面是正值，上面是负值
z轴：垂直屏幕注意：往外面是正值，往里面是负值

3D 移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。transform:translateX(100px)：仅仅是在x轴上移动
transform:translateY(100px)：仅仅是在Y轴上移动
transform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）
transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离
因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动

透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的

如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
模拟人类的视觉位置，可认为安排一只眼睛去看
透视也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

透视写在被观察元素的父盒子上面的

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。视距越小，看到的物体越大。
z：就是 z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。
d 需要>= z，否则无法显示

3D 旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴（原点在元素中心位置）或者自定义轴进行旋转。transform:rotateX(45deg)：沿着x轴正方向旋转 45度
transform:rotateY(45deg)：沿着y轴正方向旋转 45deg
transform:rotateZ(45deg)：沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转 deg为角度（了解即可）。

xyz是表示旋转轴的矢量transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转 45deg

transform:rotate3d(1,1,0,45deg)就是沿着对角线旋转 45deg

旋转方向判断——左手准则

左手拇指指向 x/y/z 轴的正方向
其余手指的弯曲方向就是该元素沿着 x/y/z 轴旋转的方向（正值）

3D 呈现 transfrom-style（重要）

控制子元素是否开启三维立体环境。transform-style: flat;：子元素不开启3D立体空间（默认）
transform-style: preserve-3d;：子元素开启立体空间
代码写给父级，但是影响的是子盒子

Flex

Flex布局原理

给父盒子添加flex属性，来控制子盒子的位置排列方式从而实现flex布局

当我们为父盒子设为 flex 布局以后，子元素的float、clear和vertical-align 属性将失效。
Flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局、flex布局

Flex布局父项常见属性

flex-direction 设置主轴方向

flex 中分为主轴和侧轴，默认主轴为x，水平方向，从左往右

而flex-direction就是用来更改主轴的方向的

felx-direction 共有四个值：分别为 row（默认值），row-reverse（右往左），column（上往下），column-reverse（下往上）

justify-content 设置主轴子元素排列

可以规定子元素在父元素中的排列方式：如居中对齐，平均分配空间，两边贴边中间平均分配空间等等

值为flex-start 所有子元素在主轴头部显示（默认值）
值为flex-end 所有子元素在主轴尾部显示
值为flex-center 所有子元素在主轴居中对齐
值为space-around 所有子元素平分剩余空间
值为space-between 所有子元素先两边贴边在平分剩余空间

flex-wrap 子元素是否换行

开启flex布局后默认为不换行

如果想要换行效果设置

flex-wrap：wrap

align-items 设置侧轴的子元素排列

利用align-items能够设置侧轴元素对齐的方式在子项为单项（单行,就是表示我并没有使用flex-wrap:wrap; 进行换行）的时候使用

align-items的值为flex-start 表示从头开始
align-items的值为flex-end 表示从结尾开始
align-items的值为center 表示居中显示
align-items的值为stretch 会将子元素拉伸

0921946316)]