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-rightcss文本属性
字体大小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，作者：焦糖，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。