CSS3学习笔记

最新推荐文章于 2022-11-12 14:34:45 发布
原创 最新推荐文章于 2022-11-12 14:34:45 发布 · 357 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3

1.animation

animation: name duration timing-function delay iteration-count direction;
  • name:绑定的keyframe的名称
  • duration:持续的时间
  • timing-function:速度曲线（linear）
  • delay:开始前的延迟
  • iteration-count：动画重复次数（infinite）
  • direction：播放的方向

2.水平垂直居中的方式

注意，transform类似于relative，不会修改原来的盒子占位
1.水平居中（4种）

  • father,text-align:center 普通方法
    son,display:inline-block

  • father,display:table(flex) flex、table，margin auto方法
    son,margin:0,auto

  • father，flex，justify-content:center

  • father relative
    son absolute left:50%,transform:tranlateX(-50%)

2.垂直（3种）

  • father：display table-cell vertical-align middle son：
  • transform
  • flex

3.水平+垂直居中（3种）

  • transform
  • table-cell + vertical-align middle或table-cell+margin 0 auto
  • flex justify-content: center align-items:center

https://www.cnblogs.com/maochunhong/p/9204077.html
在某一元素中设置display为table，左右外边距自动，由此可实现在父元素中左右居中。

.parent {  
           display: flex;  
           justify-content: center; //水平居中  
           align-items: center; //垂直居中 
}

3.transform和transition的区别

（1）transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形。
（2）transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。

4.清除浮动的方法

当父元素不给高度的时候，内部元素不浮动时会撑开，而浮动的时候，父元素变成一条线。
（1）额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
（2）父级添加overflow属性（父元素添加overflow:hidden，触发了bfc方法）（不推荐）（利用了计算BFC的高度时，浮动元素也参与计算 ）
（3）使用after伪元素清除浮动（推荐使用）

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
\*zoom: 1;/\*ie6清除浮动的方式 \*号只有IE6-IE7执行，其他浏览器不执行\*/
}

(4)使用before和after双伪元素清除浮动

.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}

5.对BFC规范的理解

参考https://blog.youkuaiyun.com/sinat_36422236/article/details/88763187
Block fomatting context（fomatting context指页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用）
（1）BFC的布局规则

  • 内部的Box会在垂直方向，一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
  • 每个盒子（块盒与行盒）的margin box的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box重叠。
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  • 计算BFC的高度时，浮动元素也参与计算

（2）如何创建BFC（满足任意一个）

  • float的值不是none。
  • position的值不是static或者relative。
  • display的值是inline-block、table-cell、flex、table-caption或者inline-flex
  • overflow的值不是visible

（3）用法

  • 利用BFC避免margin重叠。（同一个BFC两个盒子的margin在垂直方向上会重叠）
  • 自适应两栏布局
  • 清除浮动

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6.position有哪些属性

  • absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，更准确来说，是相对于该父元素的border定位的，因为父元素的padding的修改不会对子元素的位置产生影响。最外层以html定位（body自带9px宽度margin）。
    元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。"left"与"right"同时存在时只有"left"生效。"top"与"bottom"同理。如果这四个值都未设置，则变为relative，占据文档空间。
    有设置属性时不占据文档空间。
  • fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
    元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
  • relative 生成相对定位的元素，相对于其正常位置进行定位，准确来说根据父元素的content（也就是padding内的部分）定位。也就是说，其所占的文档位置实际不变(但是margin等属性还是会修改文档位置)。最外层以body定位。
    因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
  • static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index声明）。
  • inherit 规定应该从父元素继承 position 属性的值。
  • sticky粘性定位。CSS3新属性。它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。
    目前position: sticky;的浏览器兼容性还比较差。

7.隐藏一个div有几种方法

1.display:none;//影响界面布局
//display为none后，会在dom树中出现对应元素，但不会在渲染树中出现该元素
2.visibility:hidden;//不影响界面布局
3.opacity来设置不透明级别，注意兼容性filter…
4.给div一个margin负值，这个负值恰好等于div自身的高度或宽度
5.overflow:hidden
6.将div的宽度和高度设置为0

display、visibility、opacity的差别
1.visibility为hidden的元素事件不能触发
2.transition对于hidden是无效的

8.flex弹性盒子模型

缺点：浏览器兼容性比较差，只能兼容到ie9及以上。
https://www.runoob.com/css3/css3-flexbox.html
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
1.flex-grow
子元素分别设置，表示flex布局中子元素的宽度比例
2.flex-shrink
子元素分别设置，表示flex布局中子元素的超出父元素被截断长度的比例
3.flex-basis
设置基准宽度

9.行内元素和行内块元素有什么区别？行内块元素在同一行显示时有默认空隙，如何解决？

A、区别： (1)display:inline;转换为行内元素
   	  (2)display:block;转换为块状元素
      (3)display:inline-block;转换为行内块状元素
 
 行内块状元素：
	(1)不自动换行
	(2)能够识别宽高
	(3)默认排列方式为从左到右

 行内元素：
	(1)设置宽高无效
	(2)对margin仅设置左右有效，上下无效；padding上下左右都有效，撑大空间
	(3)不会自动进行换行
	

B、解决空隙方法：删空格和换行
   把父级font-size设置为0

10.盒子模型

所有HTML元素可以看作盒子。包括边距，边框，填充，和实际内容。

11.自适应两栏布局的方法

1.浮动+BFC
左盒子用float：left，右盒子变为BFC区域
2.浮动+margin-left（小双飞翼）
3.table100%width+table-cell
4.flex
左盒子用flex: 0 0 200px 右盒子用flex-grow：1

12.css单位

em：
父元素字体的 font-size 值

rem:
根元素字体的font-size值

%：

  • 定位（left），块（width），translate
    包含块（但 不一定是 其父容器）同方向的 width或 height 计算
  • 文本百分比
    font-size根据父元素设置，line-height根据当前font-size设置
    -background
    size根据原区域，position根据（父元素宽高-图片宽高）

px、cm、mm

13.list-style-type

用于设置无序列表样式，可以设置为none或者square

14.样式优先级和选择器优先级

选择器：!important > 行内样式 > =ID选择器 > (类选择器 | 属性选择器 | 伪类选择器 ) > 元素选择器|伪元素 > *
样式优先级：行内样式>外链|内联|内联@import(会相互覆盖)

15.双飞翼布局和圣杯布局

由于普通的浮动三栏布局如果中间内容过长会到左右位置。所以产生了这两种布局。
双飞翼：给中间盒子嵌套一个子盒子，左右盒子负margin回到第一排

  • left、center、right三种都设置左浮动
  • 设置center宽度为100%
  • 设置负边距，left设置负边距为100%，right设置负边距为自身宽度
  • 设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度
    圣杯：相对定位，套个缩小的大盒子，左右盒子负margin回到上一排，再用负left和负right超出大盒子范围

16.为什么transform不会导致重排

因为transform的行为在Composite Layers（组合层），不会触发layout（排布层）的变化。
因此transform的效果类似相对定位不会对后面的内容产生影响

17.transform对css动画的优化

在animation中使用translate可以优化动画。
transform动画由GPU控制，支持硬件加速，并不需要软件方面的渲染，所以不会触发重绘，效果更好。

18.filter

  1. filter: blur(2px);
    高斯模糊
  2. filter: brightness(8%);
    亮度
  3. contrast(%)
    对比度
  4. filter: drop-shadow(5px 5px 5px #f03280);
    阴影，可以对png做有形阴影
  5. grayscale(0.7)
    灰度
  6. hue-rotate(20deg)
    色相旋转

19.GUI加速原理

将图层合成交由GPU处理，防止重新paint和layout

20.meta标签的作用

设置SEO的标签，也可以关联http头部内容（强缓存时间、cookie过期时间等），设置字符编码。

21.背景渐变

background: linear-gradient(90deg,  #000000 0%,#ffffff 100%);

22.手写轮播图

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>简单轮播图</title>
		<style>
			.container{
				width: 300px;
				height: 200px;
				position: relative;
				overflow: hidden;
				display: flex;
				align-items: center;
			}
			img{
				position: absolute;
				width: 100%;
				opacity: 0;
				transition: 1s all;
			}
			.bts{
				position: absolute;
				z-index: 1;
				font-size: 30px;
				cursor: pointer;
			}
			.right{
				right: 0;
			}
			.active{
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="bts left">&lt;</div>
			<div class="bts right">&gt;</div>
			<img src="img/p1.jpg" alt="" mode="widthFix" class="active">
			<img src="img/p2.jpg" alt="" mode="widthFix">
			<img src="img/p3.jpg" alt="" mode="widthFix">
			<img src="img/p4.jpg" alt="" mode="widthFix">
		</div>
	</body>
	<script>
		//关键点，定时器，图片，渐变，当前图片下标
		var timer;
		var index = 0;
		var imgs = [...document.querySelectorAll('img')];
		var btl = document.querySelectorAll('.left')[0];
		var btr = document.querySelectorAll('.right')[0];
		btl.addEventListener('click',function(){
			clearTimeout(timer);
			imgs[index].classList.remove('active');
			index = (index + 3) % 4;
			imgs[index].classList.add('active');
			timer = setTimeout(fun,2000);
		})
		btr.addEventListener('click',function(){
			clearTimeout(timer);
			timer = setTimeout(fun,100);
		})
		function fun(){ 
			imgs[index].classList.remove('active');
			index = (index + 1) % 4; 
			imgs[index].classList.add('active');
			timer = setTimeout(fun,2000);
		}
		timer = setTimeout(fun,2000)
	</script>
</html>

23.使用z-index失效的情况

1.非定位
2.受父级z-index影响
3.父元素position是relative
换句话说就是如果要设置z-index需要设置父级为非relative并且自身也要设置定位，同时也要考虑到父级的z-index

24.高度始终是宽度的50%的盒子

方法1.使用padding-bottom50%将下内边距变为父盒子宽度的一半
方法2.使用vw

 margin-left: 10px;
 /* vw是视口的宽度， 1vw代表1%的视口宽度 */
 width: calc(100vw - 20px);
 /* 宽度的一半 */
 height: calc(50vw - 10px);

25.字体大小自适应

方法1:用vw,vh
方法2:用js计算容器宽度，同比例设置字体大小

26.flex中align-items和align-content区别

align-items：简单的单列交叉轴排列方式，多行效果如下在这里插入图片描述
align-content：排列方式对多行生效，如下
在这里插入图片描述
综上，差别就是，align-content就是对多行生效的交叉轴排列规则

radation
关注
HTML、CSS、HTML5、CSS3学习笔记.zip
11-08
本资源包《HTML、CSS、HTML5、CSS3学习笔记.zip》的设计初衷，是为了帮助有志于成为网页开发者的学习者，构建一个全面且系统的知识框架。它涵盖了从基础的HTML和CSS标签使用，到复杂的响应式布局设计，再到现代网页...
css3的笔记
莫冲的专栏
03-28 255
1、width属性和height属性只能用在block类型的元素上，对于inline元素不起作用。inline-block也是block元素，但是表现的效果与inline一样。 2、使用inline-block可以将两个div元素并列显示，不需要float属性。同时去除环形围绕方式的clear:both属性也不需要了。 3、inline-block并列显示的元素默认是底部对齐。为了改成顶部对齐，还
css3 笔记
weixin_30367873的博客
05-08 127
1.元字符使用： []: 全部可选项 ||：并列 |：多选一 ?: 0个或者一个 *：0个或者多个 {}: 范围 2.CSS3属性选择器： E[attr]：存在attr属性即可； E[attr=val]：属性值完全等于val E[attr*=val]：属性值里包含val字符并且在“任意”位置 E[attr^=val]：属性值里包含val字符并且在“开始”位置 E[at...
CSS3 笔记
fyinthesky的专栏
11-12 337
https://www.runoob.com/css/css-pseudo-classes.html https://www.runoob.com/try/try.php?filename=trycss_image_gallery_responsive https://www.runoob.com/css/css-image-sprites.html https://blog.csdn....
css3笔记
09-09 118
文本效果　 　　文本阴影效果 　　　　text-shadow　　： 水平阴影，垂直阴影，模糊的距离，以及阴影的颜色； 　　Text Overflow属性 　　　　white-space：nowrap 规定段落中的文本不进行换行 　　　　overflow：hidden 文本溢出隐藏 　　　　text-overflow：clip 文本溢出裁剪 　　　　text-over...
CSS和CSS3学习笔记（全）
03-29
CSS和CSS3学习笔记，知识全面，知识分类清晰，内涵学习3D的链接博客
CSS3笔记
Youle-Rose记录一些学习前端的知识和遇到的难点
11-12 320
CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符 [38] 。 新增特性中transform的原理较为特殊，虽然使用位移函数translate()、缩放函数scale()、旋转函数rotate()和倾斜函数skew()可以简单地实现变形，但是变形中的矩阵函数都可以使用matrix()函数来代替
CSS3学习笔记：个人详细代码调试与实践
【标签】css3 css3.0 css3学习笔记 学习笔记 【压缩包子文件的文件名称列表】: css3 知识点详细说明： 1. CSS3简介与新特性 CSS3是CSS (层叠样式表)技术的最新版本，它引入了许多新的模块和属性，允许网页设计师...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值