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;}
四.伪对象（伪元素）选择器
五.结构伪类选择器
列数 选择器 作用
1 E:fisrt-child 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
2 E:last-child 作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
3 E 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: hidden
3.在最后一个浮动元素之后添加一个空标签使用clear: both
4.给父亲添加 单伪元素清除法 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)
个数 属性 说明
1 display：block； 把元素转换成块
2 display：inline； 把元素转换成行内
3 display：inline-block； 把元素转换成行内块
4 display：none； 隐藏
5 display：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就可以,常用值1
opacity:0;表示隐藏 opacity:1;表示全显示
方法3:visibility:hidden; 特点:只是内容隐藏,但是空间(视觉空间在,实际触发不到)还在,不支持CSS3的过渡效果的
想要显示的话，属性值得是visible默认值
visibility:hidden;隐藏 visibility:visible;显示 -->
垂直对齐 vertical-align
个数 属性 说明
1 vertical-align：baseline； 默认值 baseline基线
2 vertical-align：middle； 垂直在line-height范围居中对齐
3 vertical-align：top； 垂直方向上在line-height的顶端对齐
4 vertical-align：bottom； 垂直方向上在line-height的底端对齐
5 vertical-align：text-top； 垂直方向上在文字的顶线对齐
6 vertical-align：text-bottom； 垂直方向上在文字的底线对齐
只有元素类型是行内块或者设置了display：inline-block的时候才支持vertical-align属性
定位 position
个数 书写语法 说明 文档流 偏移位置时候的参照物 层叠顺序（z-index）
1 position：static； 默认值 默认 默认,静态定位
2 position：absolute； 绝对定位 脱离 A）当没有父元素或者父元素没有
定位，参照物是浏览器窗口的第一屏
B）有父元素且父元素有定位，父元素
3 position：relative； 相对定位 不脱离自己的初始位置
4 position：fixed； 固定定位 脱离浏览器的当前窗口（视口）
5 position: 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://blog.csdn.net/GAGGAAAAA/article/details/129101954
版权归原作者 苦逼的猿宝 所有， 如有侵权，请联系我们删除。
版权归原作者 苦逼的猿宝 所有， 如有侵权，请联系我们删除。