寒假最后一周学习

最新推荐文章于 2024-09-14 17:54:00 发布

富冈义勇iii

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量852

点赞数 18

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/2301_79989945/article/details/136289216

版权

3D

就是在三维坐标轴（立体空间），比二维多了一个指向屏幕的z轴（向外是正向）

主要学习3d位移和3d旋转

3D移动

比2D移动多了一个方向，z轴

语法

transform:translate3d(x,y,z); 一定是小写d

transform:translateZ(px);一般用px作为单位

x和y，z的不能分别同时使用，后面的属性会将前面的覆盖

透视 perspective

想要在2d平面内产生3d效果就要借助透视，将3d物体投影在2d平面上

透视被称为视距：就是人的眼睛到屏幕的距离

视距越短成像越大，反之则小 3d效果越明显
单位是px

语法
透视属性写在被观察元素的父盒子上

一般不改变透视视距（多个公用），只改变自己的z轴距离

3D旋转

让元素在三维平面内沿着x轴，y轴，z轴或者自定义进行旋转
1.
transform:rotateZ(deg);沿着z轴顺时针转45deg
transform:rotateX(deg);沿着x轴顺时针转45deg
transform:rotate3d(x,y,z,deg);xyz是表示旋转轴的向量，标识你是否希望沿着该轴旋转，填写数字类似于向量的合成

左手准则
左手大拇指指向各轴的正向，其余手指弯曲方向就是顺时针方向

3D呈现 transform-style

控制子元素是否开启3d环境，后面必用

这个代码要写给父级，但影响的是子盒子

默认为flat关闭的，preserve-3d为开启

多个子元素做了立体效果，想要保留3d空间，就要开启

旋转和移动同时出现，一定不能忽略旋转会改变坐标轴方向，有时先移动后旋转，有时先旋转后移动，但不能忽略坐标轴变化

设计

设计3d导航栏
将两个面先利用移动和旋转构建为一个长方体
旋转木马
利用的是先旋转后在z轴上走的距离不变来写

浏览器私有前缀

-moz- firefox浏览器私有
-webit- safari chrome私有
-0- opera私有
-ms- ie私有

提倡的写法
eg：border-radius
将私有前缀的该属性写在前面，再写该属性

流式布局(百分比布局)

通过设置盒子宽度为百分比来根据屏幕尺寸进行伸缩，不受固定像素的限制（主要是看宽度）

保护页面在合理的范围内

max-width（最大宽度）（max-height）宽度小于等于max-width
min-width（最小宽度）（min-height）
是盒子的最大最小宽度，当视口超过时，将不会发生变化

body设置

body的子元素宽度都是100%，因此我们给body设置宽度为100%s
同时就要给body设置宽度最大值以及最小值
一般最小宽度都定为320px
最大尺寸可以从网站中看
设置为水平居中

搜索栏设置

三栏布局

左右定宽使用浮动，主区域不设置宽度可设置margin为左右栏宽度代码中两个浮动要写在主区域上面
左右使用绝对定位主区域不设置宽度可设置margin为左右栏宽度

flex弹性布局

当我们的父盒子设为flex布局以后，子元素的float clear vertical-aligna属性将失效

原理：给 父盒子添加flex的一系列属性来控制子盒子的位置和排列方式

使用了flex的父盒子，称为Flex容器，简称“容器”；
所有子元素自动成为容器成员，称为Flex项目，简称“项目” 。设置父元素为flex容器:(display:flex;)

常见的Flex容器属性（父元素属性）

1. flex-direction

作用:设置主轴方向

主轴和侧轴
在flex布局中，是分为主轴和侧轴两个方向
默认主轴方向是x轴，侧轴方向是y轴
子元素是跟随主轴方向来排列的
该属性决定主轴的方向，设置谁为主轴，剩下的就是侧轴
属性值
row:默认值从左到右
row-reverse:从右到左
column:从上到下
column-reverse:从下到上

2.justify-content

作用:设置主轴上的子元素排列方式
要设置盒子宽度

flex-start 默认值贴着头部排列相互贴着
flex-end 贴着尾部排列相互贴着（顺序不变）
center 在主轴上居中对齐相互贴着
space-around 平分剩余空间
space-between 先两边贴边再平分空间

3.flex-wrap

作用:设置子元素是否换行

默认情况下，项目都排在一条线上。即使排不下，也不换行，强硬缩小项目尺寸，直到放下。
6

no-wrap 不换行
wrap 换行装不下自动换行

4.align-items

作用:设置侧轴上子元素排列方式（单行）
没有换行用这个

flex-start:从上到下
flex-end:从下到上
content:挤在一起居中（垂直居中）
stretch:拉伸（默认值）子元素没有高度时，拉伸为和父盒子一样高。有高度，则没有效果

5. align-content

设置侧轴上子元素的排列方式（多行）
出现换行用这个

flex-start 默认值在侧轴头部排列
flex-end 在侧轴尾部排列（顺序不变）
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 在侧轴子项先两边贴边再平分空间
stretch 设置子项元素高度平分父元素高度

6.flex-flow

是flex-direction和flex-wrap属性的复合属性

常见的Flex项目常见的属性（子项）

flex属性

定义子项目分配剩余空间，用flex来表示占多少份数
分配多少份是根据子项设置的flex的多少来自动分配的，我们只用设置flex
flex:;

align-self

允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素align-items属性，如果父元素没有，则等同于stretch

order

定义项目的排列顺序
数值越小，排列越靠前，默认为0
和z-index不一样，这个是在二维坐标系上排列

搜索栏搭建

固定定位的盒子宽度和父级没有关系，他以屏幕为准，因此要 max-width和 min-width ，居中:left:50%,2d移动50%

rem布局

能够解决的问题:

能使文字跟随屏幕大小的变化而变化
可使高度不用定死
屏幕发生变化时，宽度和高度等比例缩放

rem基础

rem 相对单位
1. 类似与em em是父元素字体大小单位是px
2. rem 的基准是相对于 html元素的字体大小单位也是px
3. 都可作为width height font-size等等的参数
优点
能够通过修改rem里面的文字大小来改变页面中元素的大小，能够更好的整体控制

媒体查询

媒体查询（Media Query）是css3新语法

作用

使用 @media 查询，可针对不同的媒体类型定义不同的样式
可针对不同的屏幕尺寸设置不同的样式
重置浏览器大小，页面也会根据浏览器的宽和高重新渲染页面

语法

@media mediatype and\not\only (media feature)
{
css-code;
}

mediatype 媒体类型有三个值
all 所有设备
print 打印机打印预览
screen 电脑平板手机等
关键字
关键字将媒体类型或多个媒体特性链接到一起作为媒体查询的条件

and：将多个媒体特性连接到一起相当于“并且” 不可省略

not：排除某个媒体类型，相当于“非” 可省略

only：指定某个特定的媒体类型可省略

media feature 媒体特性必须有小括号包含

每种媒体类型都有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格

值
width 定义页面可见区域宽度
max-width 页面中最大可见区域宽度
min-width 页面中最小可见区域宽度

举例
1. 可以只有一个媒体特性
  eg：@media screen and ( max-width:800px)
  {
  css-code;
  }
  在电子屏幕上并且页面宽度不超过800px使用这个样式
  max-width 有页面宽度不超过\小于等于这个值的意思
2. 可以有多个媒体特性
  eg：@media screen and ( min-width:540px) and ( max-width:969px)
  {
  css-code;
  }
媒体查询的宽度一般按照从大到小/从小到大的顺序