跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 卖家故事 > CSS学习笔记

CSS学习笔记

时间:2024-03-31 19:10:43 来源:网络cs 作者:焦糖 栏目:卖家故事 阅读:

标签: 笔记  学习 
阅读本书更多章节>>>>

css的三种样式

一.行内样式
<body>  <div style="width: 100px;height: 100px;background-color: green;"></div></body>
二.内部样式
<head>  <style>    div{      width: 200px;      height: 200px;      background-color: aqua;    }  </style></head><body>  <div>我是一个div</div></body>
三.外部样式
 如同内部样式,但是需要添加一个css文件,且进行下方的操作:<head>  <!-- 连接外部css方式一 -->  <link rel="stylesheet" href="">  <!-- 连接外部css方式二 -->  <style>    @import url("css路径");  </style>    <link rel="icon" href="图片的路径">  <!-- 浏览器标签的小图标 rel="icon" 里面的值为icon--></head>@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中<div class="box"></div>  在style中.class名字{属性:属性值;}例如:.box{width:300px;}
3.id选择器
使用场景:想要区分某个标签,比如两个div 语法:在body中<标签 id=“box1”></div>   在style中 #ID名字{ 属性:属性值;} 例如:#box1{width:200px;}注意:id内的值为唯一的,但是可以同时设置多个
4.通配符
使用场景:相让所有的标签同时改变样式的时候语法:*{属性:属性值;} 例如:*{margin:0;padding:0;} //清除所有标签自带的间距

5.群组选择器

使用场景:当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。语法:选择器1,选择器2,选择器3{属性:属性值;}     例如:.box,p,#a2 {width:300px;}好处:需要使用相同样式的地方只需要书写一次,可以减少代码量,改善CSS代码的结构,提高网页的性能
二.层次选择器
1.后代选择器
使用场景:想要改变某个父元素下面所有的后代元素(包括儿子,孙子,重孙子.....)的时候语法:父元素 子元素{}例如:div  p{}   .box .a1{}
2.子选择器
使用场景:想要改变某个父元素下面所有的儿子元素的时候。语法:父元素>子元素{}  例如 ul>li{}  .box>p{}
3.相邻兄弟选择器
使用场景:想要改变某个元素后面紧挨着的元素的时候。语法:某某1+某某2{}  例如 div+p{}
4.通用兄弟选择器
使用场景:想要改变某个元素后面所有的元素的时候。语法:某某1~某某2{}  例如:div~p{}
三.动态伪类选择器
<style>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的功能*/</style>注意: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-right

css文本属性

字体大小font-size    单位可以是px,pt,em等 12pt=16px  1em=16px  浏览器默认是16px,设计图常用最小字号是12px颜色    color        color:red;  color:#ff0;  color:rgb(255,0,0);  0-255字体    font-family  当字体是中文字体、英文字体中有空格时,需加双引号;                     多个字体中间用逗号链接,先解析第1个字体,如果没有解析第2个字体,以此类推加粗    font-weight  font-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的数据,可以实现单行文本垂直居中文字简写  font      font是font-style font-weight font-size / line-height font-family 的简写。                   font:italic  800 30px/80px "宋体";                   顺序不能改变 ,必须同时指定font-size和font-family属性时才起作用文本修饰 text-decoration    text-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)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子例如:div  p  ul li  ol li dl dt dd  h1-h6等行内(内联)元素A) 内联元素的表现形式是始终以行内逐个进行显示;  横着排B) 内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;C)内联元素也会遵循盒模型基本规则,但是对于margin和padding个别属性值不生效例如:a  b  em  i  span  strong等行内块元素内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点例如:img  input等
一.元素类型之间的转换(display)
个数属性                        说明 1display:block;          把元素转换成块 2display:inline;         把元素转换成行内 3display:inline-block;把元素转换成行内块 4display:none;              隐藏 5display:list-item     li标签默认的display属性值    display目前有18个属性值
二.想要隐藏和现实一个容器的三种方法
<!-- 想要隐藏和显示一个容器  !方法1:display:none; 特点:内容和位置都彻底隐藏,不支持CSS3的过渡效果的想要显示的话,只要display的属性值不是none就可以,常用值blockdisplay:none;隐藏 display:block;是显示同时也有转换为块元素!方法2:opacity:0; 特点:只是内容隐藏,但是空间(视觉上和实际上这个空间都在)还在opacity设置透明度 取值范围0-1,是支持CSS3过渡效果的想要显示的话,只要opacity的属性值不是0就可以,常用值1opacity:0;表示隐藏 opacity:1;表示全显示方法3:visibility:hidden; 特点:只是内容隐藏,但是空间(视觉空间在,实际触发不到)还在,不支持CSS3的过渡效果的想要显示的话,属性值得是visible默认值visibility:hidden;隐藏  visibility:visible;显示  -->

垂直对齐 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)给元素定义命名锚记名               语法:<标记 id="命名锚记名"> </标记>       2)命名锚记连接   语法:<a href="#命名锚记名称"></a>

透明属性设置

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新引入的一种布局方式,元素触发弹性盒,只会影响子元素的排列方式            如何触发弹性盒子?                display:flex            概念:                容器:父元素                项目:子元素            元素触发弹性盒,有哪些特点?              1、元素触发弹性盒,子元素默认横着排列              2、元素触发弹性盒,子元素元素类型发生改变,变成块元素(display:block)              3、元素触发弹性盒,如果只有一个子元素,子元素想要实现水平垂直居中,只需要给子元素添加margin:auto即可                        容器属性(写在父元素上面)                1、display:flex                    触发弹性盒,只会影响子元素                    横轴:水平方向上的轴                    纵轴:垂直方向上的轴                    主轴:父元素触发弹性盒子,子元素默认排列的方向                    侧轴:与主轴相对立的轴                2、flex-direction:                    更改主轴方向                        row---------主轴在横轴上(默认值)                        column------主轴在纵轴上(常用)                        row-reverse-----主轴在横轴上,子元素反向排列                        column-reverse-----主轴在纵轴上,子元素反向排列                3、justify-content                    更改元素在主轴上排列方式                        flex-start-------主轴开始位置(子元素之间没有间距)                        flex-end-------主轴结束为止(子元素之间没有间距)                        center-------主轴中间位置(子元素之间没有间距)                        space-between-------主轴上两端对齐                        space-around-------主轴上环绕对其                        space-evenly-------主轴将间距进行均分                4、align-items                    更改元素在侧轴上排列方式                        flex-start---------侧轴开始位置                        flex-end---------侧轴结束位置                        center---------侧轴结束位置                        stretch---------拉伸(注意:如果子元素不写固定宽度/高度,子元素的宽度/高度会被拉伸)                5、 flex-wrap                    折行属性                        nowrap--------不折行(子元素挤压宽度在一行内现实)                          wrap----------子元素可以折行现实                        父子关系中,父元素触发弹性盒,子元素有固定宽高,如果子元素过多,子元素会挤压宽度在一行内显示,如果想要子元素正常显示宽度                    并且这行现实,就需要使用折行属性                6、align-content                    调整行与行之间间距                        flex-start--------侧轴开始位置(行与行之间没有间距)                        flex-end--------侧轴结束位置(行与行之间没有间距)                        center--------侧轴结束位置(行与行之间没有间距)                        space-between-------侧轴上两端对齐                        space-around-------侧轴上环绕对齐                        space-evenly-------侧轴上间距均分            项目上属性(写在子元素上面)                1、order                    调整子元素在主轴上位置                    取值为数字,可以正直,可以负值,默认值auto,等同于0                    数值越大,子元素位置越靠后                2、align-self                    调整子元素在侧轴上的位置                        flex-start-------侧周开始位置                        flex-end-------侧周结束位置                        center-------侧周中间位置                        stretch-------拉伸                        baseline-----效果等同于flex-start                3、flex                    表示占剩余宽度所有/剩余高度所有                        通常习惯写成flex:1                    表示将宽度/高度按照比例进行划分                        flex:1      flex:2      flex:1                4、flex-shrink                    挤压属性                        取值                            0-------不挤压                            1-------挤压                    应用在移动端横向滚动条效果            icon字体图标                遵循文本属性                使用步骤                    下载文件------解压放到站点文件夹中-------html页面中link标签引入iconfont.css文件                    <div class="iconfont icon-zhifubaozhifu box"></div>

多列布局(流式布局)

            /* 多列布局,也称作是流式布局 */            /* 划分列 */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*480                iphone5---------320*568                iphone6/7/8---------375*667                iphone6/7/8plus---------414*736            5、了解常用移动设备设计图稿大小                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,可知,物理像素=180px                    CSS像素=物理像素/设备像素比(dpr)========180xpx/2=90px            7、将一个div,放置在不同移动设备中,能够显示完全,明显不正确,原因是因为视口                div{                    width:700px;                    height:300px;                    background-color: red;                }                视口                    布局视口:我们代码中所写的CSS与HTML                    视觉视口:我们肉眼能够观看到的区域,移动设备屏幕大小                我们想要布局适口正确显示在视觉时口中,统一标准,是一个理想化的状态,想要实现理想化状态,我们需要借助     理想视口                理想视口,只需要下面这行代码来实现                    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-   scale=1,maximum-scale=1,user-scalable=no" />             8、移动端布局步骤                 移动端布局有多种,固定单位布局(px)、rem布局、flexble布局、响应式布局、vw布局等                 固定单位px布局步骤                1)确定设计图稿出自哪一版本                    知道了dpr                2)知道CSS像素如何计算                    CSS像素=物理像素/dpr                3)添加理想视口                    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-   scale=1,maximum-scale=1,user-scalable=no" />                4)引入icon字体文件,引入外部css文件                    link标签引入                5)页面布局                    HTML部分                        <body>                            <header></header>                            <section></section>                            <footer></footer>                        </body>                    CSS部分                        *{margin:0;padding:0}                        ul{list-style:none}                        img{display:block;}                        a{text-decoration:none}                        input{outline:none}                          万能清楚法                        clearfix:after{                            content:'';                            display:block;                            clear:both;                        }                          /*窗口自适应*/                            html,body{                              height:100%;                            }                            body{                              display:flex;                              flex-direction:column;                            }        响应式布局            自动检测用户设备宽度,从而改变页面已有的布局方式            自动检测------是一种技术------媒体查询        响应式布局实现的效果            内容:                隐藏---显示                拉伸---挤压        响应式布局优缺点:            优点:能够适配不同设备,比较灵活            缺点:                1、代码量大,代码累赘                2、加载速度慢                3、是一种折中方案                4、因为改变页面模块,容易让用户模块混淆        媒体查询技术:            语法:@media screen and (min-width:768px) and (max-width:1024px){                body{                    background:red                }            }            @media-------声明一个媒体查询            screen-------检测的设备类型            and----------关键词(起到连接作用)            ()-----------查询条件        注意:将媒体查询写在所有css最后面
移动端的单位转换
         移动端中单位转换            1、固定单位-----像素(px)            2、em----------相对单位,相对于父元素字号大小进行缩放                注意:如果元素自身拥有字号大小,将根据自身字号大小进行缩放            3、rem---------相对单位,相对于根目录字号大小进行缩放                一个页面中有且只有一个根目录,就是html                根目录font-size:16px;                1rem=16px                将根目录字号大小设置为:font-size:30px                1rem=30px                将根目录字号大小设置为:font-size:50px                1rem=50px                例如:                    1、在iphone678设计图稿中两区宽度200px,问代码中是多少rem?                        dpr=2                        物理像素=200px                        css像素=物理像素/dpr=====200px/2=100px                        根目录font-size:16px                        1rem=16px                        100px/16px=6.25rem                        ?rem=物理像素/dpr/16px=6.25rem                        ?rem=200/2/16px=6.25rem                    2、在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.98rem            4、%-------百分比            5、vw与vh                vw------view width------视口宽度                    100vw代表一个完整的视口宽                vh------view height------视口高度                    100vh代表一个完整的视口高                                思考问题:100vw=一个完整时口宽                    宽度:width:100%;                    宽度100%是否等于100vw?                    答:不同,参照物不同,100v我参照物是视口,width:100%参照物是父元素                思考:vw与px之间进行转换                    1、以iphone4为例                        iphone屏幕宽度=320px                        320px=100vw        1vw=3.2px                        100px=?vw          ?=31.25vw                        考虑将页面根目录字号大小设置成:font-size:31.25vw                    2、以iphone678为例                        iphone屏幕宽度=375px                        375px=100vw        1vw=3.75px                        100px=?vw          ?=26.66vw                        考虑将页面根目录字号大小设置成:font-size:26.66vw                    3、以iphone678plus为例                        iphone屏幕宽度=414px                        414px=100vw        1vw=4.14px                        100px=?vw          ?=                        考虑将页面根目录字号大小设置成:                    以上计算过程过于繁琐,想要简便,需要借助flexble.js来实现单位转换,我们只需要拿过来直接用就行                    对于里面的实现方式只需要了解即可                    书写移动端页面时只需要将flexble.js引入到页面中即可,不需要考虑理想视口(<meta>标签理想时口那句话不用写了)                    dpr也不需要考虑了                    引入js文件                        <script src=""></script>                        rem=只需要将设计图稿上量取的大小/100即可            移动端中多列布局常见问题:               <!-- 火狐浏览器中,section部分的滚动条是横向的,不符合预期,解决方法:去掉section中的                    overflow:auto;将页面头和尾部固定 -->

过渡

 过渡:            概念:属性的一个取值到另一个取值慢慢变化的过程,就是过渡                触发过渡需要配合鼠标滑过(:hover)                过渡其实属于动画的一种            属性:transition:all 2s linear 3s(是一个复合属性)                all--------表示所有参与过渡动画的属性--------transition-property                2s---------过渡动画执行时间-----------transition-duration                linear----过渡动画执行类型------------transition-timing-function                    ease------逐渐慢下来                    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轴进行倾斜 3d            3d立体空间效果(在原来的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、right                y: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-name                            2s-----------动画执行时间-------animation-duration                            linear-------动画执行类型-------animation-timing-function                                ease-----逐渐慢下来                                ease-in-----加速                                ease-out-----减速                                ease-in-out-----先加速后减速                                linear------匀速                                steps(5)------按照步数执行                                贝塞尔曲线                            1s-----------动画延迟执行时间----animation-delay                            infinite-----动画执行次数-------animation-iteration-count                            alternate----动画执行方向-------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                            表示划分成三行,每一行高度为100px                        2、使用百分比(%)                        3、重复函数repeat(val1,val2)                            val1-----表示重复的次数                            val2-----表示重复的数值                        4、自动填充auto-fill                            作为重复函数的第一个参数来使用                            repeat(auto-fill,20%)                        5、片段划分(理解成按照比例划分)                            1fr   2fr   3fr                        6、占剩余部分-----auto                        7、最小最大值                            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 10px                5、指定区域命名                    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/column                7、单元格内容对其                    place-items:val1 val2                        val1-----表示垂直方向                        val2-----表示水平方向                        取值:                            start、center、end                8、单元格项目对其                    place-content:val1 val2                        val1-----表示垂直方向                        val2-----表示水平方向                        取值:                            start、center、end、space-between、space-around、space-evenly、stretch            项目属性(写在子元素上)                1、网格合并                    合并行:grid-row:1/3                    合并列:grid-column:2/4                    /前面表示开始线,/后面表示结束线
阅读本书更多章节>>>>

本文链接:https://www.kjpai.cn/gushi/2024-03-31/151733.html,文章来源:网络cs,作者:焦糖,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论