CSS学习笔记

这篇具有很好参考价值的文章主要介绍了CSS学习笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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;} 
四.伪对象(伪元素)选择器
点击搜索“clipdata.item { t: }”,html+css,css,学习,前端,css3,Powered by 金山文档
五.结构伪类选择器
列数	选择器	作用
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-前缀文章来源地址https://www.toymoban.com/news/detail-854859.html

弹性盒子和标准盒子

        盒子模型:
            分类:标准盒子模型、怪异盒子
            组成部分:内容、内边距、边框、外边距
            标准盒子模型计算:
                宽度=内容宽+左右内边距+左右边框+左右外边距
                高度=内容高+上下内边距+上下边框+上下外边距
        怪异盒子:
                触发条件:
                    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
                    /前面表示开始线,/后面表示结束线

到了这里,关于CSS学习笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML+CSS+JS 学习笔记(一)———HTML(上)

    🌱博客主页:大寄一场. 🌱系列专栏:前端 😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注 目录 代码开发工具 概念 HTML模板 body元素的常用属性  HTML 控制标记(标签)的类型 HTML语法规范  HTML常用标签 标题的对齐方式 文字 文字的上标与下标 俗话说:“工欲善其事,必先

    2023年04月14日
    浏览(60)
  • web开发学习笔记(1.html css)

    css负责布局 js负责动作 2.磁盘路径 3.水平线标签 4.引入css 5.无语义标签 6.选择器 7.播放视频和音频 8.换行 br 9.段落标签 p/p 10.首行缩进 11.边距 12.盒子模型,居中显示,  margin后面的四个值顺序为上右下左,auto表示自动 13.表格标签 14.表单标签 15.表单项 16.表单示例

    2024年01月23日
    浏览(55)
  • HTML+CSS+JS 学习笔记(三)———Javascript(中)

    🌱博客主页:大寄一场. 🌱系列专栏:前端 🌱往期回顾:HTML+CSS+JS 学习笔记(三)———Javascript(上) 😘博客制作不易欢迎各位👍点赞+⭐收藏+➕关注 目录  JavaScript中的函数 函数的定义和调用 函数的定义  函数的调用 嵌套函数  递归函数  变量的作用域 全局变量和局部

    2024年02月06日
    浏览(81)
  • 【前端 | CSS】align-items与align-content的区别

    CSS align-items 属性将所有直接子节点上的 align-self 值设置为一个组。align-self 属性设置项目在其包含块中在交叉轴方向上的对齐方式 align-items是针对每一个子项起作用,它的基本单位是每一个子项,在所有情况下都有效果; 目前,Flexbox 和 CSS 网格布局支持此属性。在 Flexbox 中

    2024年02月13日
    浏览(45)
  • 前端学习笔记:CSS中浮动的原理,定位

    这是本人学习的总结,主要学习资料如下 马士兵教育 float设计的初衷是为了有文字环绕图片的效果,比如下图。 所以有浮动效果的元素一定不会遮挡其他元素的文字。比如有两个 div ,两个 div 都有文字,正常文字在 div 左上角。 我们设置一个浮动一个不浮动,我们会看到浮

    2024年02月03日
    浏览(53)
  • 【HTML+CSS+JavaScript】实现鼠标点击烟花效果

    本文主要讲解三种烟花效果(爆炸型、心型、圆形),文章末尾附有完整的代码和图片获取链接。 效果图(一) - 心型 : 效果图(二) - 圆型 : 效果图(三) - 爆炸型 : (1) HTML部分代码 (2) CSS部分代码 (3) 内部的JavaScript部分代码 (1) HTML部分代码 (2) CSS部分代码 (3) 内部的JavaScript部分

    2024年02月01日
    浏览(91)
  • 前端基础HTML、CSS--6(CSS-3)

    1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性、继承性、优先级。 1.1层叠性 相同选择器给设置相同的样式 ,此时一个样式就会 覆盖(层叠) 另一个冲突的样式。层叠性主要解决样式冲突的问题。 层叠性原则: ·样式冲突,遵循的是 就近原则 ,哪个样式离结构近

    2023年04月08日
    浏览(47)
  • 点击图片1.全屏阅览2.下载3.关闭 纯纯html css js

    要实现图片点击全屏预览的功能,可以使用JavaScript和CSS来实现。以下是一个简单的示例代码: html 在上面的代码中,我们首先定义了一个全屏预览的样式,并在点击图片时调用openFullscreen函数。该函数会创建一个全屏预览容器,并在容器中显示图片。同时,我们还创建了关闭

    2024年02月15日
    浏览(42)
  • web前端——HTML+CSS

    HTML CSS CSS进阶 CSS盒子模型 定位装饰 CSS精灵图 目录 基础认识  HTML  一、HTML概念 二、HTML页面固定结构  三、HTML标签的结构   四、标签学习 1、排版标签 1)标题标签  2)段落标签  3)换行标签 4)水平线标签  2、文本格式化标签  3、媒体标签 1)图片标签 2)路径  3)音

    2024年01月16日
    浏览(56)
  • 前端(HTML + CSS + JS)

    HTML是超文本标记语言,超文本是指文本、声音、图片、视频、表格、链接等等。标记表示由许许多多的标签组成。HTML页面是运行到浏览器上的。 (1)HTML 文件基本结构 html 标签是整个 html 文件的根标签(最顶层标签) head 标签中写页面的属性 body 标签中写的是页面上显示的内

    2024年02月05日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包