css的三种样式
一.行内样式
二.内部样式
div{width: 200px;height: 200px;background-color: aqua;}我是一个div三.外部样式
如同内部样式,但是需要添加一个css文件,且进行下方的操作:@import url("css路径");@import和link的区别:1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式.2:加载顺序的差别:一个页面被加载时,link引入的css会被同时加载,而@import引入的css等页面加载完毕后才会被加载.3:兼容问题:@import老版本的浏览器不支持 @import在IE5以上才能被识别,link标签无此问题.4:使用dom控制样式时差别:当js控制dom去改变样式时,只能使用link标签,因为@import不是dom可以将控制的.选择器
一.基本选择器
1.类型选择器(标签选择器)
使用场景:以文档对象html中的标签作为选择器语法:标签{属性:属性值;}例如:div{width:200px}2.class选择器(类选择器)
使用场景:想要区分某个标签,比如两个div语法:在body中在style中.class名字{属性:属性值;}例如:.box{width:300px;}3.id选择器
使用场景:想要区分某个标签,比如两个div 语法:在body中 在style中 #ID名字{ 属性：属性值；} 例如：#box1{width:200px;}注意:id内的值为唯一的,但是可以同时设置多个4.通配符
使用场景:相让所有的标签同时改变样式的时候语法:*{属性：属性值；} 例如：*{margin:0;padding:0;} //清除所有标签自带的间距5.群组选择器
使用场景:当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。语法:选择器1，选择器2，选择器3{属性：属性值；} 例如：.box,p,#a2 {width：300px；}好处：需要使用相同样式的地方只需要书写一次，可以减少代码量，改善CSS代码的结构，提高网页的性能二.层次选择器
1.后代选择器
使用场景:想要改变某个父元素下面所有的后代元素(包括儿子,孙子,重孙子.....)的时候语法:父元素 子元素{}例如:divp{} .box .a1{}2.子选择器
使用场景:想要改变某个父元素下面所有的儿子元素的时候。语法:父元素>子元素{}例如 ul>li{}.box>p{}3.相邻兄弟选择器
使用场景:想要改变某个元素后面紧挨着的元素的时候。语法:某某1+某某2{}例如 div+p{}4.通用兄弟选择器
使用场景:想要改变某个元素后面所有的元素的时候。语法:某某1~某某2{}例如:div~p{}三.动态伪类选择器
a:link {color: red;} /* 未访问的链接状态,必须给a */a:visited {color: green;} /* 已访问的链接状态,必须给a */a:hover {color: blue;} /* 鼠标滑过链接状态,可以随便给 */a:active {color: yellow;}/* 鼠标按下去时的状态,必须给a */div:hover{background-color: green;}/* div也可以实现hover的功能*/注意:1.当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；2.为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；例如：a{color:red;}a:hover{color:green;} 四.伪对象（伪元素）选择器
五.结构伪类选择器
列数选择器作用1E:fisrt-child作为父元素的第一个子元素的元素E。与E:nth-child(1)等同2E:last-child作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同3E F:nth-child(n)选择父元素E的第n个子元素F。:nth-child(length)、:nth-child(n)、 :nth-child(n*length)、:nth-child(n+length)、:nth-child(-n+length)、:nth-child(n*length+1)4:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；5:only-child选择的元素是它的父元素的唯一 一个子元素；6:first-of-type选择一个上级元素下的第一个同类子元素7:last-of-type选择一个上级元素的最后一个同类子元素8:nth-of-type()选择指定的元素，类似于:nth-child，不同的是他只计算选择器中指定的那个元素。9:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算10:only-of-type选择一个元素是它的上级元素的唯一 一个相同类型的子元素11:empty选择的元素里面没有任何内容12:root选择文档的根元素六.css伪类选择器
1.UI状态伪类选择器
input:enabled{可用状态下的样式}input:disabled{ 禁用状态下的样式}input:checked{ 选中状态下的样式}2.否定伪类选择器
:not()除了什么什么可以让你定位不匹配该选择器的元素3.目标伪类选择器
:target 选择器可用于选取当前活动的目标元素。使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。浮动
float:left; 元素左浮动float:right;元素右浮动float:none; 元素不浮动 浮动后是不占位的一.浮动产生的问题:高度塌陷
产生条件：所有的子元素浮动，父元素没有设置高度，最近的父元素会高度塌陷。解决方法:1.给父亲添加高度2.给父亲添加overflow: hidden3.在最后一个浮动元素之后添加一个空标签使用clear: both4.给父亲添加 单伪元素清除法 clearfixafter {content:"",display: block, clear:both}5.给父亲添加 双伪元素清除法 ::before::after {content:"" ,display: table, clear:both}二.清除浮动
clear:right;不允许右边有浮动clear:left; 不允许左边有浮动clear:both; 不允许有浮动clear:none; 允许有浮动清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。Margin属性
边界：在元素外边的空白区域，被称为边距。属性值可以是负数也可以用单词auto,属性值是auto的时候,默认只支持margin-left:auto;和margin-right:auto; 上下暂时不支持auto单独设置:margin-left:左边界 margin-right:右边界margin-top:上边界margin-bottom:下边界margin简写的4种方式：四个值：上 右 下 左 {margin:0px 0px 0px 40px;}三个值：上 左右 下 {margin:10px 20px 30px ;}二个值：上下 左右 {margin:10px 20px ;}一个值：四个方向 margin:2px;/*定义元素四周填充为2px*/说明：margin:0 auto;可以实现一个有宽度的块元素盒子水平居中一.Margin-top的问题
现象：默认情况下在包含结构里面,给子元素添加了margin-top之后，父元素会跟着一起下来。
解决方法：A、给最近的父元素添加border-top:1px solid transparent;透明上边框
B、给父元素添加overflow:hidden;（溢出隐藏) C、给父元素或者子元素添加浮动二.Margin的上下间距重叠问题
现象：2个上下并列结构的时候,如果给上面的盒子添加了margin-bottom,同时给下面的盒子添加了margin-top,此时应该解析的垂直间距是2者之和,但是浏览器解析的时候,会按照最大数值去解析。
解决方法：给下面的盒子添加父元素且添加声明overflow:hidden;
Padding属性
padding的使用方法（内间距）当分析一个缝隙相对于当前容器来说是里面的时候，就用padding。填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白用法：可单独设置一方向填充，单独设置:上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px;左方向padding-left:10px;padding简写的4种方式：四个值：上 右 下 左 {padding:0px 0px 0px 40px;}三个值：上 左右 下 {padding:10px 20px 30px ;}二个值：上下 左右 {padding:10px 20px ;}一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/说明：padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值使用场景:padding是内间距,当分析这个间距是里面的时候用margin和padding区别相同点:都可以设置间距不同点:1:margin是外间距设置盒子外面的 padding是内间距,设置盒子里面的2:margin可以给负数 padding不能给负数3:margin可以用auto作为属性值 padding不能用auto作为属性值4:margin不会把盒子本身撑大,但是padding会把盒子本身撑大。边框属性Border
拆开写法:边框宽度：border-width:边框颜色：border-color:边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)简写：border：30px solid blue; 参数的顺序可以随意调换单边框设置：上边框 border-top：30px blue solid; 下 border-bottom 左 border-left 右 border-rightcss文本属性
字体大小font-size单位可以是px，pt，em等 12pt=16px1em=16px浏览器默认是16px,设计图常用最小字号是12px颜色colorcolor:red;color:#ff0;color:rgb(255,0,0);0-255字体font-family当字体是中文字体、英文字体中有空格时，需加双引号； 多个字体中间用逗号链接,先解析第1个字体,如果没有解析第2个字体,以此类推加粗font-weightfont-weight:bolder(更粗的)/bold（加粗）/normal（常规） font-weight:100-900; 100-300偏细一些 400-500 常规600-900加粗倾斜font-style font-style：italic(斜体字)/oblique(倾斜的文字)/normal（常规显示）;文本水平对齐 text-align text-align:left; 水平靠左 text-align：right；水平靠右 text-align：center；水平居中 text-align:justify;水平2端对齐，但是只对多行起作用。行高 line-height line-height的数据=height的数据，可以实现单行文本垂直居中文字简写fontfont是font-style font-weight font-size / line-height font-family 的简写。 font:italic800 30px/80px "宋体"； 顺序不能改变 ,必须同时指定font-size和font-family属性时才起作用文本修饰 text-decorationtext-decoration:none没有/underline下划线/overline上划线/line-through删除线首行缩进 text-indent text-indent可以取负值；text-indent属性只对第一行起作用字间距 letter-spacing控制文字和文字之间的间距css背景属性
background-color背景颜色background-color：red；background-image背景图片background-image:url();background-repeat背景图片的平铺background-repeat:no-repeat/repeat/repeat-x/repeat-y；background-position背景图片的定位background-position：水平位置垂直位置；可以给负值background-attachment背景图片的固定background-attachment : scroll (滚动)/ fixed（固定，固定在浏览器窗 口里面，固定之后就相对于浏览器窗口了） ;css列表属性
list-style列表属性的简写list-style:none; 去除列表符号单行文本溢出
要实现单行文本溢出时产生省略号的效果还需定义：1、容器宽度：width：value(值)；2、强制文本在一行内显示:white-space：nowrap;3、溢出内容为隐藏：overflow：hidden；4、溢出文本显示省略号：text-overflow：ellipsis;overflow属性:overflow:visible;visible:默认值，内容不会被修剪，会呈现在元素框之外；overflow:hidden;hidden：内容会被修剪，并且其余内容是不可见的；overflow:auto;auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;overflow:scroll;scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;元素类型的分类
块元素(block element)A）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，B）默认情况下，块状元素都会占据一行；默认情况下，块状元素会按顺序自上而下排列。C）块状元素都可以定义自己的宽度和高度。D）块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子例如：divpul liol li dl dt ddh1-h6等行内（内联）元素A) 内联元素的表现形式是始终以行内逐个进行显示；横着排B) 内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；C)内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效例如：abemispanstrong等行内块元素内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点例如：imginput等一.元素类型之间的转换(display)
个数属性说明 1display：block；把元素转换成块 2display：inline； 把元素转换成行内 3display：inline-block；把元素转换成行内块 4display：none；隐藏 5display：list-item li标签默认的display属性值display目前有18个属性值二.想要隐藏和现实一个容器的三种方法
垂直对齐 vertical-align
个数 属性 说明1vertical-align：baseline； 默认值 baseline基线2vertical-align：middle； 垂直在line-height范围居中对齐3vertical-align：top； 垂直方向上在line-height的顶端对齐4vertical-align：bottom； 垂直方向上在line-height的底端对齐5vertical-align：text-top； 垂直方向上在文字的顶线对齐6vertical-align：text-bottom； 垂直方向上在文字的底线对齐只有元素类型是行内块或者设置了display：inline-block的时候才支持vertical-align属性定位 position
个数书写语法说明 文档流偏移位置时候的参照物 层叠顺序（z-index）1 position：static； 默认值默认 默认,静态定位2 position：absolute；绝对定位 脱离 A）当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏B）有父元素且父元素有定位，父元素3position：relative；相对定位不脱离自己的初始位置4position：fixed；固定定位脱离浏览器的当前窗口（视口）5position: sticky;粘性定位是相对定位和固定定位的集合体，可以做吸顶效果，粘性定位是css3.0新增加的， 兼容不好1.2.3.4的叠层顺序:z-index属性是不带单位的，并且可以给负值，没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；1.包含块
1、如果 position 属性为absolute ，包含块就是由它的最近的 position 的值不是 static（也就是值为fixed, absolute, relative或sticky）的祖先元素。2、如果 position 属性是fixed，包含块是 viewport（视口）浏览器当前窗口。锚点链接效果
命名锚点链接的应用定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚点的作用：在同一页面内的不同位置进行跳转。（百度百科）制作锚标记： 1)给元素定义命名锚记名 语法： 2)命名锚记连接 语法：透明属性设置
IE浏览器写法：filter:alpha(opacity=value);取值范围 0-100兼容其他浏览器写法：opacity:0.value;(value的取值范围0-1 0.1,0.2,0.3-----0.9---1)宽高自适应方式
一.宽度自适应:1、宽度不写2、宽度的单位不用px，用相对单位比如%；3、用min-width、max-width设置。 用在响应式布局上二.高度自适应:1、高度不写，存在问题：如果子元素浮动，父元素会高度塌陷。(高度塌陷)2、高度的单位不用px，用相对单位比如%；如果希望相对于窗口的话，默认情况下，height用%是不生效的，需要给body,html{height:100%;}3、用min-height、max-height设置。BFC
一.BFC的概念
BFC 即 Block Formatting Contexts (块级格式化上下文)，通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
二.BFC是我触发条件
根元素 html默认就是一个BFC
float的值不为none 单纯的div不是BFC，如果添加了浮动就是BFC
overflow的值不为visible 单纯的div不是BFC，如果添加了overflow：hidden等就是BFC
display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex
position的值为absolute或fixed
三.BFC的特性及应用
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）
BFC的区域不会与float box发生重叠（应用：自适应两栏布局）
计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）
BFC内部的Box会在垂直方向，一个接一个的放置。
每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素
css3浏览器前缀
-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀
-moz- -moz-box-shadow 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀
-o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀
-webkit- -webkit-box-shadow 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀
弹性盒子和标准盒子
盒子模型:分类:标准盒子模型、怪异盒子组成部分:内容、内边距、边框、外边距标准盒子模型计算:宽度=内容宽+左右内边距+左右边框+左右外边距高度=内容高+上下内边距+上下边框+上下外边距怪异盒子:触发条件:box-sizing:取值:content-box-------标准盒子border-box--------怪异盒子盒子宽度=css中设置的宽度(左右内边距、左右边框)+左右外边距盒子高度=css中设置的高度(上下内边距、上下边框)+上下外边距弹性盒是css3新引入的一种布局方式,元素触发弹性盒,只会影响子元素的排列方式如何触发弹性盒子" />多列布局(流式布局)
/* 多列布局,也称作是流式布局 *//* 划分列 */column-count: 5;/* 更改列间距 */column-gap: 50px; /* 设置列宽 */column-width: 220px; /* 列分割线 */column-rule: 2px double red;/* 设置列高度取值:auto:表示先填充第一列,填充满第一列后,开始填充第二列,以此类推balance:每列高度均分*/column-fill: balance; 不折列break-inside:avoid/* 跨列合并 */column-span: all;移动端
移动端:1、什么是移动端?可以移动的设备就是移动端,手机、平板、小天才手表目前我们针对于手机端开发------app界面2、如何查看页面(移动端)效果?真是工作场景在移动端查看效果,现阶段-------浏览器中设备模拟器查看------打开控制台(鼠标右键检查/F12)----通过切换不同移动设备 型号来查看效果3、设备模拟器中的内容了解iphone6/7/8---------移动设备类型375*667-------------移动设备分辨率75%-----------------观看比例(最佳观看比)旋转小图标------------切换横屏/竖屏右侧上边三个小圆点capture screenshot-------截图(短截图,截取当前屏幕大小图片)capture full size screenshot-------截图(长截图,截取带有滚动条区域大小图片)4、了解常用移动设备分辨率以iphone为例iphone4---------320*480iphone5---------320*568iphone6/7/8---------375*667iphone6/7/8plus---------414*7365、了解常用移动设备设计图稿大小iphone4---------640*960=========2倍关系iphone5---------640*1136========2倍关系iphone6/7/8---------750*1134=======2倍关系iphone6/7/8plus---------1242*2208======3倍关系6、设备像素比(dpr)它是一个比值、是一个固定的死值设备像素比(dpr)=物理像素/CSS像素物理像素:我们在设计图稿上量取的大小就是物理像素,可以把设计图稿看成物理像素CSS像素:我们在代码中所书写的大小,可以把移动设备分辨率大小看成CSS像素CSS像素=物理像素/设备像素比(dpr)案例:我们拿到iphone678设计图稿,在设计图稿上量取宽度180px,问:CSS代码中宽度为多少?由我们拿到iphone678设计图稿这句话可知,设备像素比(dpr)=2设计图稿上量取宽度180px,可知,物理像素=180pxCSS像素=物理像素/设备像素比(dpr)========180xpx/2=90px7、将一个div,放置在不同移动设备中,能够显示完全,明显不正确,原因是因为视口div{width:700px;height:300px;background-color: red;}视口布局视口:我们代码中所写的CSS与HTML视觉视口:我们肉眼能够观看到的区域,移动设备屏幕大小我们想要布局适口正确显示在视觉时口中,统一标准,是一个理想化的状态,想要实现理想化状态,我们需要借助 理想视口理想视口,只需要下面这行代码来实现 8、移动端布局步骤 移动端布局有多种,固定单位布局(px)、rem布局、flexble布局、响应式布局、vw布局等 固定单位px布局步骤1)确定设计图稿出自哪一版本知道了dpr2)知道CSS像素如何计算CSS像素=物理像素/dpr3)添加理想视口4)引入icon字体文件,引入外部css文件link标签引入5)页面布局HTML部分移动端的单位转换
移动端中单位转换1、固定单位-----像素(px)2、em----------相对单位,相对于父元素字号大小进行缩放注意:如果元素自身拥有字号大小,将根据自身字号大小进行缩放3、rem---------相对单位,相对于根目录字号大小进行缩放一个页面中有且只有一个根目录,就是html根目录font-size:16px;1rem=16px将根目录字号大小设置为:font-size:30px1rem=30px将根目录字号大小设置为:font-size:50px1rem=50px例如:1、在iphone678设计图稿中两区宽度200px,问代码中是多少rem?dpr=2物理像素=200pxcss像素=物理像素/dpr=====200px/2=100px根目录font-size:16px1rem=16px100px/16px=6.25rem?rem=物理像素/dpr/16px=6.25rem?rem=200/2/16px=6.25rem2、在iphone678设计图稿中两区宽度398px,问代码中是多少rem?css像素=398px/2=199px根目录:16px?rem=199px/16px=12.43rem?rem=398/2/16px=6.25rem以上计算过程过于繁琐,如何能简化计算过程? 将根目录字号大小进行更改,font-size: 50px ?rem=200/2/50px=======200/100=2rem ?rem=398/2/50px======398/100=3.98rem4、%-------百分比5、vw与vhvw------view width------视口宽度100vw代表一个完整的视口宽vh------view height------视口高度100vh代表一个完整的视口高思考问题:100vw=一个完整时口宽宽度:width:100%;宽度100%是否等于100vw?答:不同,参照物不同,100v我参照物是视口,width:100%参照物是父元素思考:vw与px之间进行转换1、以iphone4为例iphone屏幕宽度=320px320px=100vw1vw=3.2px100px=?vw?=31.25vw考虑将页面根目录字号大小设置成:font-size:31.25vw2、以iphone678为例iphone屏幕宽度=375px375px=100vw1vw=3.75px100px=?vw?=26.66vw考虑将页面根目录字号大小设置成:font-size:26.66vw3、以iphone678plus为例iphone屏幕宽度=414px414px=100vw1vw=4.14px100px=?vw?=考虑将页面根目录字号大小设置成:以上计算过程过于繁琐,想要简便,需要借助flexble.js来实现单位转换,我们只需要拿过来直接用就行对于里面的实现方式只需要了解即可书写移动端页面时只需要将flexble.js引入到页面中即可,不需要考虑理想视口(标签理想时口那句话不用写了)dpr也不需要考虑了引入js文件rem=只需要将设计图稿上量取的大小/100即可移动端中多列布局常见问题: 过渡
过渡:概念:属性的一个取值到另一个取值慢慢变化的过程,就是过渡触发过渡需要配合鼠标滑过(:hover)过渡其实属于动画的一种属性:transition:all 2s linear 3s(是一个复合属性)all--------表示所有参与过渡动画的属性--------transition-property2s---------过渡动画执行时间-----------transition-durationlinear----过渡动画执行类型------------transition-timing-functionease------逐渐慢下来easer-in------加速easer-out------减速easer-in-out------先加速后减速linear----------匀速steps(5)--------按照指定步数执行贝塞尔曲线3s--------过渡动画延迟执行时间---------transition-delay注意:display不参与过渡 2d: 2d:平面效果(水平、垂直方向)主要学习:平移、旋转、缩放、倾斜属性:transform:1、平移:transform:translate取值:translate(200px)-------默认元素在x轴上进行平移(取值可正、可负)translateX(200px)------沿着x轴进行平移translateY(200px)------沿着y轴进行平移2、旋转:transform:rotate(deg)deg-----角度(度数)取值:rotate(45deg)-------默认元素在元素正中心进行旋转(取值可正、可负)rotateX(45deg)------沿着x轴进行旋转rotateY(45deg)------沿着y轴进行旋转3、缩放:transform:scale()取值:scale(2)-------默认元素在元素正中心进行缩放(取值可正、可负,)scaleX(2)------沿着x轴进行缩放scaleY(2)------沿着y轴进行缩放scale后面括号里的取值1-------不变大于1-------放大介于0-1之间------缩小等于0-----------缩小至没有介于-1-0之间------缩小的倒像等于-1------------等大的倒像小于-1------------放大的倒像4、倾斜:transform:skew(deg)取值:skew(45deg)-------默认元素在元素正中心进行旋转(取值可正、可负)skewX(45deg)------沿着x轴进行倾斜skewY(45deg)------沿着y轴进行倾斜 3d3d立体空间效果(在原来的2d基础之上多出来一个轴)想要看3d立体效果需要给父元素触发3d旋转舞台transform-style: preserve-3d;视距:perspective: 900px;(近大远小,通常取值900-1200)1、平移transform:translateZ()取值:translateZ() translateX() translateY()-------多个轴上平移translate3d(100px,100px,100px)2、旋转transform:rotateZ()取值:rotateZ() rotateX() rotateY()-------多个轴上旋转rotate3d(1,0,1,45deg)前三个分别表示x轴、y轴、z轴,取值为数字0-1,0表示不旋转,1表示旋转,45deg表示每个轴旋转的度数3、缩放transform:scaleZ()取值:scaleZ() scaleX() scaleY()-------多个轴上缩放scale3d(1,2,1)z轴上缩放看不出效果,需要在立体图形中看效果更改变换中心 :属性:transform-origin: x y;取值:x:left、center、righty:top、center、bottom取值也可以是具体数值或者百分比如何将一个元素隐藏?
1、opacity:0;2、visibility:hidden;3、display:none;4、transform:scale(0);5、height:0;动画
动画:过渡属于动画的一种,不是真正意义上动画,不需要鼠标触发,是自执行动画属性:animation使用分为两步1、声明动画方法一:@keyframes 动画名(我们自己起的名字){from{动画从....状态开始}to{动画到....状态}}方法二:@keyframes 动画名{关键帧动画0%{动画开始状态}20%{}40%{}100%{动画结束状态}}2、调用动画animation:动画名 2s linear 1s infinite/1/2 alternate;(复合属性)动画名--------动画的名字------animation-name2s-----------动画执行时间-------animation-durationlinear-------动画执行类型-------animation-timing-functionease-----逐渐慢下来ease-in-----加速ease-out-----减速ease-in-out-----先加速后减速linear------匀速steps(5)------按照步数执行贝塞尔曲线1s-----------动画延迟执行时间----animation-delayinfinite-----动画执行次数-------animation-iteration-countalternate----动画执行方向-------animation-direction取值normal-------正常执行reverse------反向执行alternate------先正向后反向alternate-reverse------先反向后正向网格布局
网格布局:概念:通过将容器划分成一个个小的网格,将小的网格进行合并,从而实现不规则布局属性:display:grid容器:父元素项目:子元素容器属性(写在父元素上)1、如何触发网格布局display:grid;2、划分行与列属性后面跟着几组值,就代表划分成几行/几列划分行:grid-template-rows:100px 100px 100px划分列:grid-template-columns:100px 100px 100px取值:1、固定像素(px)grid-template-rows:100px 100px 100px表示划分成三行,每一行高度为100px2、使用百分比(%)3、重复函数repeat(val1,val2)val1-----表示重复的次数val2-----表示重复的数值4、自动填充auto-fill作为重复函数的第一个参数来使用repeat(auto-fill,20%)5、片段划分(理解成按照比例划分)1fr 2fr 3fr6、占剩余部分-----auto7、最小最大值minmax(val1,val2)val1------最小值val1------最大值3、网格线命名grid-template-rows:[r1] 100px [r2] 100px [r3] 100px [r4]grid-template-columns:[c1] 100px [c2] 100px [c3] 100px [c4]4、调整行/列之间的间距grid-gap:10px 10px5、指定区域命名grid-template-areas:'a b c''d e f''g h i''a b c''a e f''a h i' 可以的'a a a''d a f''g h i' 不可以'a a c''d e f''g h a' 不可以'a b c''a e f''a a i' 不可以'a a c''a a f''g h i' 可以的想要合并的网格,命名成相同的名字,通过网格区域的名字来合并网格注意:相同名字区域不能有T、L、凹、凸,只能是矩形区域通过在项目上的grid-area:a;属性进行网格的合并6、项目排列顺序grid-auto-flow:row/column7、单元格内容对其place-items:val1 val2val1-----表示垂直方向val2-----表示水平方向取值:start、center、end8、单元格项目对其place-content:val1 val2val1-----表示垂直方向val2-----表示水平方向取值:start、center、end、space-between、space-around、space-evenly、stretch项目属性(写在子元素上)1、网格合并合并行:grid-row:1/3合并列:grid-column:2/4/前面表示开始线,/后面表示结束线