1.変形
1.2D変形
*すべての変形が要素自体のプレースホルダーに影響を与えることはありません
-
1.変位、予約スペース（相対配置と同様）
-
translate（x、y）水平および垂直変位を同時に
-
translateX（）の水平方向の変位、右に正、左に負
-
translateY（）垂直変位、正のダウン、負のアップ
-
-
2.回転する
- 時計回りに正、反時計回りに負に回転（度）
-
3.ズーム
-
scale（n）scale（nx、ny）水平方向と垂直方向の両方にスケール
-
scaleX（n）水平ズーム
-
scaleY（n）垂直スケーリング
- nはズーム倍率を表し、> 1ズームイン0.Xズームアウト
-
-
4.傾斜（ねじれ）
-
スキュー（x-deg、y-deg）水平方向と垂直方向に同時に傾斜し、水平方向のスキュー、垂直方向の非スキューを示す値を1つだけ書き込みます。
-
スキューX（deg）水平ストレッチ、正の数は左に、負の数は右になります
-
スキューY（度）垂直ストレッチ、正の数は右側に下がる、負の数は左側に下がる
-
2.3D変形
-
1.変位
-
translateZ（）Z軸の変位、正の方向の変位はより近く（ズームイン）、負の方向の変位は遠く（ズームアウト）です。
-
translate3d（x、y、z）3つの軸が同時にシフトします
-
-
2.回転する
-
rotateX（）は、X軸を中心に、正の時計回り（上向きから内向き、下向きの外向き）、負の反時計回り（下向きの内側、上向きの外側）に回転します。
-
rotateY（）はY軸を中心に回転し、正の時計回り（右回り、左回り）、負の反時計回り（左回り、右回り）に回転します。
-
rotateZ（）は、Z軸を中心に、正の時計回り、負の反時計回りに回転します。
-
rotate3d（xn、yn、zn、deg）
-
n：3つの軸のベクトルを表し、0は回転せず、1は正の方向に回転し、-1は負の方向に回転します。
-
度：回転の程度
-
-
-
3.ズーム
-
scaleZ（n）Z軸ズーム
-
scale3d（x、y、z）3軸の同時ズーム
-
2、3D環境設定
1.表示距離設定パースペクティブ：600-2000px;
ビューと人間の目との間の距離をシミュレートして、3D変形要素が小さくて近い効果を示すように、親要素または祖先要素に設定する必要があります。
2.変形スタイル
transform-style: flat; 父元素3d变形时，子元素3d效果失效
transform-style: preserve-3d; 保留子元素的3d效果
3.変形の起源
transform-origin: left/center/right/100px/50% top/center/bottom/100px/50%;
3、フレックスボックスレイアウト（フレックスボックス）
css3は、新しいレイアウト方法、
新人チュートリアルリンク、ビデオ学習リンクを提供します
フレックスボックスレイアウトの目的は、フレックスボックス内のサブ要素の配置、配置、および空白の割り当てを指定するためのより効果的な方法を提供することです。
要素がフレキシブルコンテナとして設定されている場合、内部の子要素のfloat / display / vertical-align属性は無効になります
フレキシブルコンテナは、直接の子要素の配置/配置を変更し、子要素内の要素には影響しません。
| コンテナのプロパティ | プロジェクトのプロパティ |
|---|---|
| フレックスボックスコンテナとして設定> display：flex / inline-flex; | アイテムの順序を指定します> order：number; |
| 主軸の方向を設定> flex-direction：row / ow-reverse / column / column-reverse; | プロジェクトの規模を指定> flex-grow：number; |
| 主軸上のアイテムの配置を設定> justify-content：flex-start / flex-end / center / space-between / space-around / space-evenly | プロジェクトの圧縮率> flex-shrink：numberを指定します |
| クロス軸上のアイテムの配置を設定します> align-items：stretch / flex-start / flex-end / center / baseline | クロス軸上の指定されたアイテムの配置を指定します> align-self：値はコンテナのalign-itemsプロパティと同じです |
| プロジェクトラップ> flex-wrap：no-wrap / wrap / wrap-reverse | プロジェクトのデフォルトサイズ> flex-basis：auto / length-px-％rem |
| 交差軸上の複数の線の配置> align-content：stretch / flex-start / flex-end / center / space-around / space-between; | 成長/縮小/基礎> flex：auto-（1 1 auto）/ none-（0 0 auto）/ 1（1 1 0）の複合プロパティ |
1.コンテナのプロパティ
1.弾性ボックスコンテナを設定します
display:flex/inline-flex;
- flex : 把元素设置为弹性容器，元素本身的属性为块级
- inline-flex: 把元素设置为弹性容器，元素本身的属性为行内
2.主軸方向を設定します
主轴方向决定项目的排列方式
flex-direction:row|row-reverse|column|column-reverse;
- row :默认， 从左到右
- row-reverse: 从右到左
- column: 从上到下
- column-reverse: 从下到上
3.主軸上でプロジェクトの配置を設定します
具体效果和主轴的方向有关，这里以主轴方向默认从左到右为例
justify-content:flex-start|flex-end
- flex-start ：默认， 主轴的开始位置对齐（左对齐）
- flex-end : 主轴的结束我位置对齐 （右对齐）
- center : 主轴中间对齐
- space-between: 在每两个项目之间留出相同的空白，主轴的开始和结束没有空白
- space-around: 在每个项目两边留出相同的空白，两个项目之间就是双倍空白
- space-evenly: 主轴开始和结束以及每一个项目之间都是相同的空白
4.クロス軸上でアイテムの配置を設定します
以主轴从左到右，交叉轴从上到下
align-items: stretch|flex-start|flex-end|center|baseline;
- stretch :默认， 拉伸，当项目没有设置固定高，会进行拉伸占满容器高度
- flex-start : 交叉轴的开始位置对齐（顶部对齐）
- flex-end : 交叉轴的结束位置对齐（底部对齐）
- center : 交叉轴的中间对齐
- baseline: 基线对齐
5.アイテムラップ
flex-wrap:no-wrap|wrap|wrap-reverse;
- no-wrap: 默认，不换行，项目被压缩
- wrap: 换行
- wrap-reverse : 换行，颠倒行的顺序
6.交差軸上の複数の行の配置
align-content:stretch|flex-start|flex-end|center|space-around|space-between;
- stretch :默认，拉伸，当项目没有设置固定高，拉伸占满整个容器，比如有两行，每一行高度占容器的1/2，如果项目设置了固定高，项目在每一行的空间上顶部对齐
- flex-start ： 多行在交叉轴的开始对齐（顶部）
- flex-end ： 多行在交叉轴的结束对齐（底部）
- center : 交叉轴中间对齐
- space-around : 每一行前后留出相同的空白
- space-between ： 每两行之间留出相同的空白
2.プロジェクトの属性
1.アイテムの順序を指定します
order:number;
默认值都是0，数字越大排序越靠后,数字相同,按照代码顺序排列
2.プロジェクトの規模を指定します
flex-grow:number;
默认项目的放大比例都是0 ，就是不放大，如果都是1就是等比放大，如果设置不同的数字，就按照数字比例等比放大
3.プロジェクトの圧縮率を指定します（プロジェクトの合計幅がコンテナーの幅を超え、改行はありません）
flex-shrink:number;
默认值是1，表示所有的项目等比缩小,0表示不缩小，设置不同数字，就按照数字比例等比缩下
4.クロス軸上で指定したアイテムの配置を指定します
align-self: 取值同容器的align-items属性
默认值为auto，表示继承父元素的align-items属性
4、css前処理
CSSの前処理は、新しい言語を定義することです。
基本的な考え方は、特別なプログラミング言語を介してcssにいくつかのプログラミング機能を追加し、このプログラミング言語（前処理言語）を介してcssコードを記述し（この言語はブラウザーで直接実行できません）、コンパイラーを指定します。それをcssファイルにコンパイルします。そして最後にそれをウェブページに適用します。
より成熟したCSS前処理言語はless / sass（scss）です。
利点：前処理言語を使用すると、cssコードがより簡潔になり、適応性が高まり、読みやすさと保守性が向上します。
5以下
1.使用量を減らす
- コンパイルレスプラグイン-EasyLESS
- ファイルの作成-編集-保存-同じ名前の.cssファイルを自動的に生成します
2.構文が少ない
-
1.スタイルをインポートする
- cssファイルをインポートする
@import "reset.css"; 如果导入的使.css文件，就是把这句代码直接复制进编译过后的css文件中 编译后： @import "reset.css";- インポートするファイルが少なくなります
@import "reset.less"; 导入less文件，可以省略后缀名 @import "reset"; 如果导入的使.less文件，把reset.less中的代码复制一份合并到目标文件中 编译后： * { margin: 0; padding: 0; } ul { list-style: none; } img { vertical-align: middle; } -
2.注釈
- cssコメント
/* 这是css的注释，less中可以显示，并且会被编译进css文件中 */- コメントが少ない
// 这是less注释，只在less文件中显示，不会编译进css文件中 -
3.変数
变量类似于容器，可以用来存储一些值，后期可以通过变量名去反复调
用变量里面的值，有利于页面后期更换风格（维护）
变量命名必须要加 @ 后面的变量名尽量使用有意义的单词和数字组合
@变量名:值;
@main-color:#00ff00;
@sub-color:orange;
@fs-lg:14px;
.box{
width:100px;
height:100px;
background-color:@main-color;
color:@sub-color;
font-size:@fs-lg;
}
- 4.混入
あるクラスAを別のクラスBに混合して、クラスBがクラスAのコードを継承し、パラメーターを渡すことができるようにします。
-
1）、パラメータなしで混合
もっと少なく
.size{
width: 100px;
height: 100px;
}
.box1{
.size;
background-color: red;
}
cssをコンパイルした後：
.size{
width: 100px;
height: 100px;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
-
2）パラメータとの混合
もっと少なく
/* 混入的类名后面只要带了() 这个类本身就不会被编译进css文件中*/
.size(@w,@h){ //混入的类内部需要几个可以变的值，就定义几个参数（形参）,形参的语法和变量相同，多个用逗号隔开
width: @w;
height: @h;
}
.box1{
.size(100px,200px); // 调用混入的类时，需要传入具体的数值（实参），一般和形参需要一一对应
}
.box2{
.size(200px,300px);
}
cssをコンパイルした後：
.box1{
width:100px;
height:200px;
}
.box2{
width:200px;
height:300px;
}
-
3）パラメータとデフォルト値との混合
もっと少なく
.size1(@w:100px,@h:100px){ // 形参后面通过冒号添加默认值
width: @w;
height: @h;
}
.box5{
.size1; // 当调用类不传实参，使用默认值
}
.box6{
.size1(200px,300px); //调用类传入了实参，就会覆盖默认值
}
.box7{
.size1(400px); //实参个数比形参少，默认按照顺序匹配，没有匹配到实参的参数依然使用默认值
}
.box8{
.size1(@h:500px); // 可以添加形参名称和值指定实参匹配那个参数
}
コンパイル後のCSS
.box5{
width: 100px;
height: 100px;
}
.box6 {
width: 200px;
height: 300px;
}
.box7 {
width: 400px;
height: 100px;
}
.box8 {
width: 100px;
height: 500px;
}
-
4）、@ argumentsパラメータコレクション
もっと少なく
.boxShadow(@h,@v,@blur,@s,@color){
box-shadow: @h @v @blur @s @color;
}
.boxShadow(@h,@v,@blur,@s,@color){
box-shadow: @arguments; //和上面的代码等效
}
.box3{
.boxShadow(0px,5px, 10px, 0px, #333)
}
.box4{
.boxShadow(5px,0px, 20px, 0px, red)
}
コンパイル後のCSS
.box3 {
box-shadow: 0px 5px 10px 0px #333;
}
.box4 {
box-shadow: 5px 0px 20px 0px red;
}
- 5.入れ子が
少ない
.header{
height: 50px;
background-color: #333;
.left{
float: left;
ul{
list-style: none;
line-height: 50px;
li{
float: left;
background-color: orange;
a{
color: #fff;
&:hover{ // 添加&符表示继承父级选择器 （不添加空格）
color:#f00;
}
}
}
}
}
}
コンパイル後のCSS
.header {
height: 50px;
background-color: #333;
}
.header .left {
float: left;
}
.header .left ul {
list-style: none;
line-height: 50px;
}
.header .left ul li {
float: left;
background-color: orange;
}
.header .left ul li a {
color: #fff;
}
.header .left ul li a:hover{
color: #f00;
}
- 6.継承
単純なミキシングと同様に、あるクラスは別のクラスに継承されますが、ミキシングはコピーであり、コードの冗長性が生成され、継承は実行されません。
もっと少なく
.size{
width: 100px;
height: 100px;
}
.box{
&:extend(.size);
background-color: red;
}
cssをコンパイルした後：
.size,
.box{
width: 100px;
height: 100px;
}
.box {
background-color: red;
}
- 7.
より少ない計算
.box2{
//多个数字参与运算，有一个值以上带单位
width: 1000px/2;
height: 20*10px;
border-width: 20-18px;
border-radius: 10+5px;
margin: (10-5px)*20; // 可以通过（）提升运算的优先级
}
コンパイル後のCSS
.box2 {
width: 500px;
height: 200px;
border-width: 2px;
border-radius: 15px;
margin: 100px;
}
6、計算関数
css3で提供される算術関数は、下位バージョンのブラウザーと互換性がありません
加算、減算、乗算、除算の演算をサポートし、演算子の両側にスペースを追加する必要があります
width:calc(100% - 200px);
セブン、モバイルブラウザとカーネル
-
主流のモバイルブラウザ：Apple、Baidu、qq、uc、360 ...
-
カーネル：コアのほとんどはWebkitカーネルであり、新しいテクノロジーの互換性をあまり考慮する必要はありません（html5 + css3を使用できます）
8つのビューポート（ビューポート）設定
-
レイアウトビューポート：HTMLの幅と考えてください。通常、モバイル端末はデフォルトで固定値（980または1024）に設定されており、画面の幅よりも大きくなっています。
-
ビジュアルビューポート：画面の幅に相当する、ユーザーに表示されるWebページの領域
-
理想的なビューポート：レイアウトビューポートはユーザーフレンドリーではなく、携帯電話のサイズを考慮していません。そのため、Appleは理想的なビューポートの概念を導入しました。理想的なビューポートに基づいて設計されたWebサイトでは、ユーザーが手動でズームしたり、ズームしたりする必要はありません。水平スクロールバー。、Webサイトのすべてのコンテンツを通常どおりユーザーに表示できます（レイアウトビューポートをビジュアルビューポートと一致するように設定します）
设置viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
-
width=device-width：レイアウトビューポートとビジュアルビューポートを一致させます（htmlの幅はデバイスの幅と同じです） -
initial-scale=1.0：ページの初期ズーム値（数値）は10進数にすることができ、通常は1.0に設定されます。 -
user-scalable=no：ユーザーにズームを許可するかどうか、「いいえ」は許可されません、「はい」は許可されます -
maximum-scale=1.0：ユーザーがズームインできる最大値 -
minimum-scale=1.0：ユーザーが削減できる最小値
ナイン、レムレイアウト
jsを介して動的に最新のrem値を計算します。
<script>
// 1、先获取设备的宽度（等同于html的宽度）
var deviceWidth = document.documentElement.clientWidth; //html宽度
// 2、计算出一个最新的rem的值
if(deviceWidth>750){
deviceWidth = 750;
}
var r = deviceWidth*100/750; // 750指的是设计稿宽度，根据实际拿到的设计稿尺寸去修改
// 3、把计算出来的最新的rem值设置给html的font-size
document.documentElement.style.fontSize = r + 'px';
</script>