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日
    浏览(58)
  • 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日
    浏览(53)
  • HTML+CSS+JS 学习笔记(三)———Javascript(中)

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

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

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

    2024年02月13日
    浏览(43)
  • 前端学习笔记: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日
    浏览(87)
  • 前端基础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日
    浏览(40)
  • 前端(HTML + CSS + JS)

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

    2024年02月05日
    浏览(47)
  • 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日
    浏览(53)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包