css学习笔记（有例子）

案例（小栗子）

分页按钮

li{
	float:left;
	height:20px;
	width:20px;
	margin:10px;
	line-height:20px;
	text-align:center;
	border:1 soild pink;
	border-radus:10px;
	cursor:pointer;
	transation:all 1s;
	&:hover{
		transform:scale(1.2);
	}
}

小箭头

div::after{
	content:"";
	position:absolute;
	width:15px;
	height:15px;
	top:8px;
	right:15px;
	border-right:1px solid black;
	border-bottom:1px solid black;
	transform:rotate(45deg);
}
div:hover::after{
	transform:rotate(225deg);
}

小熊奔跑

.box{
    background: url('../image/小熊.png') no-repeat;
    width: (1618px/8);
    height: 101px;
    animation: move 1s steps(8)  infinite,goForward 2s linear forwards;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
  }
  @keyframes move{
    0%{
      background-position: 0 0;
    }   
    100%{
      background-position: -1618px 0;
    }
  }
  @keyframes goForward{
    0%{
        left: 0;
    }
    100%{
        left:50%;
        transform:translateX(-50%);
    }
  }

3D导航栏

.contain{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    ul{
        perspective:60px;
        li{
            width:50px;
            height:20px;
            list-style: none;
            line-height: 20px; 
            position: relative;
            transform-style:preserve-3d;
            transition: all 0.5s;
            .front{
                width: 100%;
                height: 100%;
                background-color:pink;
                position: absolute;
                top:0;
                left:0;
                transform:translateZ(10px);
            }
            .back{
                width:100%;
                height:100%;
                position: absolute;
                top:0;
                left:0;
                background-color: skyblue;
                transform:translateY(10px)  rotateX(-90deg);
            }
            &:hover{
                transform: rotateX(90deg);
            }
        }
    }
}

旋转木马

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #ccc;
    perspective: 500px;
    .container {
        width: 600px;
        height: 400px;
        margin: 0 auto;
        margin-top: 150px;
        position: relative;
        display: flex;
        transform: rotateX(-30deg);
        transform-style: preserve-3d;
        .rotate {
            width:150px;
            height: 80px;
            position: relative;
            margin: auto;
            transform-style: preserve-3d;
            transition: all 2s;
            
            animation: round 3s infinite linear;
            div[class^='item'] {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 8px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }

            .item1 {
                background-color: red;
                transform-origin: 50% 50% -150px;
                transform: translateZ(150px) rotateY(60deg);
            }

            .item2 {
                background-color: white;
                transform-origin: 50% 50% -150px;
                transform: translateZ(150px) rotateY(120deg);
            }

            .item3 {
                background-color: black;
                transform-origin: 50% 50% -150px;
                transform:translateZ(150px) rotateY(180deg);
            }

            .item4 {
                background-color: pink;
                transform-origin: 50% 50% -150px;
                transform: translateZ(150px) rotateY(240deg);
            }

            .item5 {
                background-color: gold;
                transform-origin: 50% 50% -150px;
                transform:  translateZ(150px) rotateY(300deg);
            }

            .item6 {
                background-color: green;
                transform-origin: 50% 50% -150px;
                transform: translateZ(150px) rotateY(360deg);
            }
        }
    }
}

@keyframes round{
    0%{
        transform: rotateY(0deg);
    }
    100%{
        transform: rotateY(360deg);
    }
}

禁止用户选中文字

user-select: none;

background

背景图线性渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-alOtVcEO-1690019933304)(C:\Users\a\AppData\Roaming\Typora\typora-user-images\image-20230523102442864.png)]

 background-image: linear-gradient(to bottom right, red, gold);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vJj5Lo9p-1690019933305)(C:\Users\a\AppData\Roaming\Typora\typora-user-images\image-20230523102238716.png)]

盒子投影

-webkit-box-reflect CSS 属性可让你将元素内容在特定方向上进行轴对称反射。

 /* 盒子投影 */
      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));

/* 方向值 */
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/* 偏移量值 */
-webkit-box-reflect: below 10px;

/* 蒙版值 */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/* 全局属性值 */
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: unset;

元素显示模式

块元素 (block) 外联元素

• 在页面中独占一行
• 默认宽度：撑满父元素
• 默认高度：由内容撑开
• 可以通过css设置宽高

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

行内元素（inline）内联元素

• 在页面中不独占一行
• 默认宽度：由内容撑开
• 默认高度：由内容撑开
• 无法通过css设置宽高

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

行内快元素（Inline-block）内联块元素

伪元素选择器选择的是行内块元素

• 在页面中不独占一行
• 默认宽度：由内容撑开
• 默认高度：由内容撑开
• 可以通过css设置宽高

定位元素：

• 由 positive:absolute||fixed 属性转化来的

• 默认宽度：由内容撑开

• 默认高度：由内容撑开

• 可以通过css设置宽高

修改元素的显示模式

div{
	display:inline-block
}

属性选择器

作用：选中属性值符合一定要求的元素。

语法：

[属性名] 选中具有某个属性的元素。

[属性名=“值”] 选中包含某个属性，且属性值等于指定值的元素。

[属性名^=“值”] 选中包含某个属性，且属性值以指定的值开头的元素。

[属性名$=“值”] 选中包含某个属性，且属性值以指定的值结尾的元素。

[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

与正则表达式配合使用

/* 选中具有title属性的元素 */
div[title]{color:red;}

/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}

/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}

/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}

/* 选中title属性值包含g的元素 */
div[title*="g"]{color:red;}

伪类选择器

作用：选中特殊状态的元素。

如何理解“伪” ? — 虚假的，不是真的。

如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。

常用的伪类选择器：

动态伪类：

• link 超链接未被访问的状态。
• visited 超链接访问过的状态。
• hover 鼠标悬停在元素上的状态。
• active 元素激活的状态。

什么是激活？—— 按下鼠标不松开。

注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。

• focus 获取焦点的元素。

表单类元素才能使用 :focus 伪类。

当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获得焦点。

结构伪类

常用的：

• first-child 所有兄弟元素中的第一个。
• last-child 所有兄弟元素中的最后一个。
• nth-child(n) 所有兄弟元素中的第 n 个。
• first-of-type 所有同类型兄弟元素中的第一个。
• last-of-type 所有同类型兄弟元素中的最后一个。
• nth-of-type(n) 所有同类型兄弟元素中的 第n个 。

否定伪类：

:not(选择器) 排除满足括号中条件的元素。

UI伪类

• checked 被选中的复选框或单选按钮。
• enable 可用的表单元素（没有 disabled 属性）。
• disabled 不可用的表单元素（有 disabled 属性）。

伪元素选择器

作用：选中元素中的一些特殊位置。

常用伪元素：

• ::first-letter 选中元素中的第一个文字。
• ::first-line 选中元素中的第一行文字。
• ::selection 选中被鼠标选中的内容。
• ::placeholder 选中输入框的提示文字。
• ::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。
• ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

选择器的优先级（权重）

通过不同的选择器，选中相同的元素 ，并且为相同的样式名设置不同的值时，就发生了样式的冲突。

到底应用哪个样式，此时就需要看优先级了。

简单描述：

行内样式 > ID****选择器 > 类选择器 > 元素选择器 > 通配选择器。

• a : ID 选择器的个数。
• b : 类、伪类、属性 选择器的个数。
• c : 元素、伪元素 选择器的个数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T6dthd5i-1690019933305)(C:\Users\a\AppData\Roaming\Typora\typora-user-images\image-20230528224427939.png)]

transform

• translatex():沿着x轴方向平移
• translateY(): 沿着y轴方向平移
• translateZ():沿着z轴方向平移
  平移元素
  可以以px为单位
  也可以以百分号为单位：百分比是相对于自身计算的

水平垂直居中

.box2{
            position: absolute;
            left: 50%;
            top: 50%;
            transform:translateX(-50%) translateY(-50%);
        }

旋转

通过旋转可以使元素沿着xy或z旋转指定的角度

• rotateX()
• rotateY()
• rotateZ()

单位：

• deg表示度数
• turn表示圈数

transform:rotate(45deg);

eg:

div::after{
	content:"";
	position:absolute;
	width:15px;
	height:15px;
	top:8px;
	right:15px;
	border-right:1px solid black;
	border-bottom:1px solid black;
	transform:rotate(45deg)
}

综合写法

• 同时使用多个变换，格式：transform:translate() roate() scale()…等
• 其顺序会影响转换的效果（先旋转会改变坐标轴的方向）
• 当我们同时有位移和其他属性的时候，记得要位移放到最前

transform-origin

默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处。

transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词

2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Ｙ轴的位置。

3D的变形中的transform-origin属性还包括了Ｚ轴的第三个值。其各个值的取值简单说明如下：

• x-offset：用来设置transform-origin水平方向Ｘ轴的偏移量，可以使用和值，同时也可以是正值（从中心点沿水平方向Ｘ轴向右偏移量），也可以是负值（从中心点沿水平方向Ｘ轴向左偏移量）。
• offset-keyword：是top、right、bottom、left或center中的一个关键词，可以用来设置transform-origin的偏移量。
• y-offset：用来设置transform-origin属性在垂直方向Ｙ轴的偏移量，可以使用和值，同时可以是正值（从中心点沿垂直方向Ｙ轴向下的偏移量），也可以是负值（从中心点沿垂直方向Ｙ轴向上的偏移量）。
• x-offset-keyword：是left、right或center中的一个关键词，可以用来设置transform-origin属性值在水平Ｘ轴的偏移量。
• y-offset-keyword：是top、bottom或center中的一个关键词，可以用来设置transform-origin属性值在垂直方向Ｙ轴的偏移量。
• z-offset：用来设置3D变形中transform-origin远离用户眼睛视点的距离，默认值z=0，其取值可以，不过在这里将无效。

transition

默认值：all 0 ease 0

谁需要过渡就给谁加这个属性

transition属性其实是以下四个属性的简写：

• transition-property:需要参与过渡的属性，例如：width、height、background…
• transition-duration:过渡动画的持续时间，单位秒s或毫秒ms
• transition-delay：延迟过渡的时间，单位秒s或毫秒ms
• transition-timing-function：动画过渡的动画类型

backface-visibility

表示旋转后是否显示背面，默认是显示的
可选值

• 默认值：visible

 backface-visibility: hidden||visible;

3D移动

translate3D

在2D移动的基础上多加了一个可以移动的方向，就是z轴方向

• transform:translateZ(100px):仅仅在Z轴上移动（translateZ一般用px做单位）
• transform:translate3D(x,y,z)：其中x y z 分别指要移动的轴的方向的距离

透视 perspective

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

• 透视我们也称为视距：就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小

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

3D旋转 rotate3d

对于元素旋转的方向的判断 左手准则

• 左手拇指指向轴的正方向
• 其余四根手指弯曲的方向就是旋转的正方向

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

• transform:rotateX(45deg)
• transform:rotateY(45deg)
• transform:rotateZ(45deg)
• transform:rotate3d(x,y,z,deg)：沿着自定义方向旋转deg角度，其中x,y,z取值是0或1。（1,1,0）代表对角线

transform-style

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

动画（animation）

可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

相比较过度（transform），动画可以实现更多的变化，更多的控制，连续自动播放等效果

动画的基本使用

1. 先定义动画
2. 再使用（调用）动画

用keyframes定义动画（类似定义选择器）

@keyframes 动画名称{
	0%{
		width:100px;
	}
	100%{
		width:200px;
	}
}

动画序列

• 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
• 在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
• 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
• 请用百分比来规定变化发生的时间，或用关键词“from” 和 “to”，等用于0%和100%

元素使用动画

div{
	animation-name:动画名称;
	animation-duration:持续时间;
}

属性	描述
@keyframes	规定动画
animation	所用动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function	规定动画的速度曲线，默认是“ease”
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是“nomal",alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是“running”，还有“paused”
animation-fill-mode	规动画结束后状态，保持forwards 回到起始backwards

动画简写属性

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

animation:move 2s linear 0s inifinte alternate forwards 

animation-timing-function

值	描述
linear	动画从头到尾的速度是相同的、匀速
ease	动画以底数开始，然后加快，在结束前变慢（默认）
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以底数开始和结束
steps()	指定时间函数中的间隔数量（步长）

transitionend事件，监听动画滚动结束

ul.addEventListener('transitionend',()=.{
	console.log('结束了')
})

margin

使用

对于块级元素

.outer{
	margin-left：auto   //代表离左边越远越好
	margin：auto     //代表块级元素居中
	margin：10px,auto //代表块级元素上下外面距10px,左右水平居中
}

当父元素没有height时，height由子元素撑起来

margin: 0 auto不起作用

使容器在外部布局中居中的方法：在容器的css中添加属性margin:0 auto，其应用条件为容器满足以下属性：

1. 1. 容器是块级标签或设置了display:block;
   2. 对容器标签设置了宽度width.
   

margin塌陷问题

行内元素的margin不会被父元素抢走

父元素抢走内容中首尾的元素的margin-top和margin-bottom

解决方案

• 给父元素设置一个不为0的padding
• 给父元素设置宽度不为0的border
• 给父元素设置css样式 overflow:hidden //溢出的部分进行隐藏

margin合并问题

只存在于上下兄弟之间，不存在于左右兄弟之间

margin-bottom和margin-top合并取最大的

常用文本属性

div{
	font-size: 40px
	height: 400px
	line-height:400px  //垂直居中
	text-align:center  //水平居中
	
}

处理溢出问题

#di{
	width:400px
	height:200px
	background-color:skyblue
	overflow:hidden||scroll||auto    //隐藏溢出的部分||滚动||自动
}

#d1{
	width:400px
	height:200px
	background-color:skyblue
	overflow-x:hidden;
	overflow-y:scroll;    //不推荐
}

隐藏元素的两种方式

• display：none
• 占空间
• visibility: hidden
• 占空间

样式的继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式，但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）

会继承的css属性

字体属性、文本属性（除了vertical-align）、文字颜色 等

不会继承的css属性

边框、背景、内边距、外边距、宽高、溢出方式 等

vertical-align

vertical-align 属性设置元素的垂直对齐方式。
css中的vertical-align 属性只能用于 行内元素 和 置换元素（例如 图像和表单输入框） ，此属性不继承。

文字的顶线、中线、基线，基线是字母x的下边缘

baseline 让元素的基线 与父元素文本的基线对齐。
如果目标元素没有基线，例如 图片、表单输入框或其它置换元素，那么目标元素的底端与父元素的基线对齐。
上述例子我们可以看出来，图片和文字的基线（字母x的下边缘）对齐了。

浮动

浮动特点

• 浮动后的元素脱离文档流，
• 无论是块、行元素都要按照浮动的特点来，宽与高尽可能的窄（由内容撑开，但可以由css样式设置）
• 不会独占一行，可以与其他元素公用一行
• 不会margin合并，也不会margin塌陷，能够完美设置四个方向的margin和padding
• 不会像行内块一样被当做文本处理（text-align等失效，没有行内块的空白问题）

浮动后会有哪些影响

**对兄弟元素的影响：**后面的兄弟元素，会占据浮动元素之前的位置，后面元素的文字会被踢出来，在浮动元素的下面；对前面的兄弟元素没有影响,

**对父元素的影响：**不能撑起父元素的高度，导致父元素高度塌陷，但父元素的宽度依然束缚浮动的元素

解决浮动的影响

待解决问题：父元素高度不坍塌，浮动元素后面的兄弟元素不被覆盖

• 给父元素指定算出来height
• 给父元素加属性：float：left
• 给父元素设置： overflow: hidden
• 在所有浮动元素后面加一个块级元素，并给块级元素设置 clear : both //清除该元素左右两边浮动元素的影响
• 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与上一个相同。 ===》推荐使用

.parent::after{
	content:"";
	display:block;
	clear:both;
}

这前三个方案只能解决父元素height不坍塌，要解决覆盖问题，要给被覆盖的元素添加clear属性清除浮动的影响

所以布局中有一个原则：设置浮动的时候，兄弟元素要么全部浮动，要么全部不浮动

相对定位

positive：relative

不推荐定位、浮动、margin混合使用

相对定位对父元素，兄弟元素没有影响，可以盖住父元素和兄弟元素

属性值：left，right，top，bottom

• 相对原位置偏移
• 大多数是内容区
• 但是原位置仍被占位，下面的元素无法上移
• 定位可以超过父元素的边界
• 定位后的元素层级比普通元素高，会盖住普通元素，但不脱离文档流
• 若两个元素都开启定位，后面写的元素会盖住先写的元素

box{
	width:100px；
	height:100px;
	background-color:orange;
	positive:relative;
	left:400px;
}

绝对定位

positive：absolute

绝对定位的元素，会从块元素或者行元素变成定位元素

可以越过padding

• 会脱离文档流，原地起飞，后面兄弟元素会侵占它原本的占位，而被盖住，文字不会被踢出
• 相对包含块内容区进行上下左右偏移
• 子元素开启绝对定位，父元素要开启相对定位:子绝父相, 这样，子元素就可以相对父元素进行定位
• 绝对定位和浮动不可以共存
• 绝对定位和margin不推荐同时使用，若使用，必须一直，top对应margin-top

.outer{
	width:200px;
	background-color:#ccc
	positive:relative;
}
.box{
	witdh:100px;
	height:100px;
	positive:absolute;
	top:50px;
	background-color:orange;
}

固定定位

positive：fixed

• 脱离文档流
• 相对视口进行偏移，不会随着滚动条变化而变化，广告牛皮鲜
• 不能和浮动共存
• 元素会变成定位元素

粘性定位

positive：sticky

可以使用left，right，top，bottom四个属性调整位置，不过最常用的是top值

**参考点：**离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先

• 不脱离文档流，专门用于窗口滚动时的新的定位方式
• 可以和浮动，margin同时使用，但不推荐
• top决定离具有滚动机制的元素多少距离时固定

包含块:

1. 没有脱离文档流的元素，父元素就是包含块
2. 脱离文档流的元素，第一个开启定位的祖先元素就是他的包含块

元素层级调整

z-index:数值 数值越大层级越大

定位的特殊应用

注意：

• 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设
• 置宽高。
• 发生相对定位后，元素依然是之前的显示模式。
• 以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。

让定位元素的宽充满包含块

• 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0 。
• 高度想与包含块一致， top 和 bottom 设置为 0 。

让定位元素在包含块中居中

方案一：

父元素有relative属性，子元素有absolute||fixed属性，父子元素必须有宽高

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

方案二：

left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

注意：该定位的元素必须设置宽高！！！

flex

display:flex||inline-flex

伸缩容器： 开启了 flex 的元素，就是：伸缩容器

伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目。

主轴与侧轴

主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边

是终点）。

侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边

是终点）。

主轴方向

属性名： flex-direction

常用值如下：

• row ：主轴方向水平从左到右 —— 默认值
• row-reverse ：主轴方向水平从右到左。
• column ：主轴方向垂直从上到下。
• column-reverse ：主轴方向垂直从下到上。

主轴换行方式

属性名： flex-wrap

常用值如下：

• nowrap ：默认值，不换行。
• wrap ：自动换行，伸缩容器不够自动换行。
• wrap-reverse ：反向换行。

flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。 值没有顺序要

求。

主轴对齐方式

属性名： justify-content

• flex-start ：主轴起点对齐。—— 默认值
• flex-end ：主轴终点对齐。
• center ：居中对齐
• space-between ：均匀分布，两端对齐（最常用）。
• space-around ：均匀分布，两端距离是中间距离的一半。
• space-evenly ：均匀分布，两端距离与中间距离一致。

侧轴对齐方式

一行的情况

属性： align-items

• flex-start ：侧轴的起点对齐。
• flex-end ：侧轴的终点对齐。
• center ：侧轴的中点对齐。
• baseline : 伸缩项目的第一行文字的基线对齐。
• stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）

多行的情况

属性： align-content

• flex-start ：与侧轴的起点对齐。
• flex-end ：与侧轴的终点对齐。
• center ：与侧轴的中点对齐。
• space-between ：与侧轴两端对齐，中间平均分布。
• space-around ：伸缩项目间的距离相等，比距边缘大一倍。
• space-evenly : 在侧轴上完全平分。
• stretch ：占满整个侧轴。—— 默认值

flex 实现水平垂直居中

方法一：父容器开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中

.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
}

方法二：父容器开启 flex 布局，随后子元素 margin: auto

.outer {
width: 400px;
height: 400px;
background-color: #888;
display: flex;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
margin: auto;
}

伸缩性

1. flex-basis

概念： flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。

备注：主轴横向：宽度失效；主轴纵向：高度失效

2. flex-grow**（伸）**

概念： flex-grow 定义伸缩项目的放大比例，默认为 0 ，即：纵使主轴存在剩余空间，也不拉伸（放大）。

规则：

• 若所有伸缩项目的 flex-grow 值都为 1 ，则：它们将等分剩余空间（如果有空间的话）。
• 若三个伸缩项目的 flex-grow 值分别为： 1 、 2 、 3 ，则：分别瓜分到： 1/6 、 2/6 、
• 3/6 的空间。

假如只有一个元素设置了flex-grow属性，那么该元素会得到所有剩余空间。

3. flex-shrink**（缩）**

概念： flex-shrink 定义了项目的压缩比例，默认为 1 ，即：如果空间不足，该项目将会缩小。

收缩项目的计算，略微复杂一点，我们拿一个场景举例：

11. flex****复合属性

flex 是复合属性，复合了：

flex-grow 、 flex-shrink 、 flex-basis 三个属性，默认值为 0 1 auto 。

如果写 flex:1 1 auto ，则可简写为： flex:auto

如果写 flex:1 1 0 ，则可简写为： flex:1

如果写 flex:0 0 auto ，则可简写为： flex:none

如果写 flex:0 1 auto ，则可简写为： flex:0 auto —— 即 flex 初始值。

项目排序

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0 。

单独对齐

通过 align-self 属性，可以单独调整某个伸缩项目的对齐方式

默认值为 auto ，表示继承父元素的 align-items 属性。

calc

在属性值中进行计算，适用于不知道屏幕宽与高的时候，用100%

html,body{
    height: 100%;
}
.page-content{
    height: calc(100% - 70px);
    display: flex;
    justify-content: center;
    align-items: center;
}

悬浮动画（简单）

.page-content .content-nav .item:hover{
    box-shadow: 0px 0px 20px black;
}
.page-content .content-nav .item{
    transition: 0.2s,linear;
    cursor: pointer;//出现小手
}

transform

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

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

X轴：水平向右
Y轴：垂直向下

移动

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

旋转

让元素在2维平面内顺时针旋转或者逆时针旋转

transform:rotate(度数)

重点

• rotate里面的度数，单位是deg 比如 rotate(45deg)
• 角度为正，顺时针，负时：逆时针
• 默认旋转的中心点是元素的中心点

转换中心点

transform-origin

trainsform-origin:x y;

• 注意后面的参数x和y用空格隔开
• x y默认转换的中心点是元素的中心店（50% 50%）
• 还可以给x y设置像素或者方位名词（top bottom left right center）

缩放scale

可以放大和缩小，只要给元素添加上这个属性就可以控制

transform:scale(x,y)
transform:scale(n)  //等比缩放几倍

• 里面写的数字不跟单位，就是倍数的意思， 1就是1倍， 2就是2倍
• 若是0-1之间，就是缩小
• 第一参数指宽度是几倍，第二个参数是高度是几倍
• 不会影响其他的盒子，可以设置缩放的中心点

移动端开发

meta视口标签

<meta name='viewport' content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minmum-scale=1.0">

属性	解释说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maxmum-scale	最大缩放比，大于零的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes，no

物理像素与物理像素比

物理像素：就是我们说的分辨率 iphone8的物理像素是750px
在iPhone8里面， 1px 开发像素=2个物理像素

在pc端里面，一个px等于一个物理像素

CSS3盒子模型

.box{
	box-sizing:border-box;
	width:500px;
	height:500px;
}

此时 padding和border不会再撑开盒子,width包含了border和padding

特殊样式

-webkit-tap-highlight-color:transparent;   //点击高亮清除
-webkit-appearance:none;         //在移动端浏览器默认的外观清除
img,a{
	-webkit-touch-callout:none;       //禁用长按页面时的弹出菜单
}

移动端常见布局

单独制作移动端页面（主流）

• 流式布局：百分比布局
• flex弹性布局：强烈推荐
• less+rem+媒体查询布局
• 混合布局

响应式页面兼容移动端（其次）

• 媒体查询
• bootstarp

rem适配布局

rem是一个相对单位，类似于em,em是父元素字体大小

不同的是rem基准是相对于html元素的字体大小

可以通过修改html中的文字大小来改变页面中元素的大小，进行整体控制

媒体查询（Media Query）

是css3新语法

• 使用media查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

@media mediatype and|not|only (media feature){
css-Code;
}

• 用@media开头
• mediatype媒体类型
• 关键字 and not only
• mediafeature 媒体特性 必须有小括号包含

1.mediatype查询类型

将不同的终端设备划分成不同的类型，称为媒体查询

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

关键字

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

• and：可以将多个媒体特性链接到一起，相当于且
• not：排除某个媒体类型，相当于“非”，可以省略
• only：指定某个特定的媒体类型，可以省略

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度

引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）

<link rel='stylesheet' media="mediatype and|not|only (media feature)" href="mystylesheet.css">

rem 适配方案

方案一：rem+媒体查询+less技术

• 首先我们选一套标准尺寸
• 用屏幕尺寸除以我们划分的份数，就是html中的font-size
• 页面元素的rem值：页面元素在标准尺寸下的px值/html中的font-size值

@media screen and (min-width:320px){
	html{
		font-size:21.33px
	}
}
@media screen and (min-width:7px){
	html{
		font-size:21.33px
	}
}

方案二：flexible.js+rem

Less基础

是一门css扩展语言，也成为css预处理

Less变量

@变量名：值；

1.变量命名规范

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写不敏感

@color:pink;
@font14:14px;
div{
	background-color:@color;
	font-size:@font14;
}

Less嵌套

子元素的样式直接写到父元素里面就好了

ul{
	width:100px;
	li{
		color:white;
	}
}

如果遇见（交集，伪类，伪元素选择器）

• 内层选择器的前面没有&符号，则它被解析为父选择器的后代
• 如果有&符号，它就被解析为父元素自身或父元素的伪类

.nav{
	.logo{
		&::after{
			color:black;
		}
	}
}

Less运算

我们运算符的左右两侧必须敲一个空格隔开，除法需要添加括号

我们两个数参与运算，如果一个数有单位，则最后的结果就以这个单位为准

如果两个数都有单位，以第一个值得单位为准

@border:5px + 5;
div{
	width:200px - 50;
	heigth:200px * 2;
}
img{
	width:（82 / 50）rem;
}

引入

//在 index.less中导入 common.less文件
@import url("./common.less	`")