首页 > 其他分享> 文章详细

CSS核心知识总结

2022-04-07 19:02:56 阅读：167 来源： 互联网

标签：总结知识 border 元素 100px width margin CSS left

HTML语义化

增加代码的可读性
更好的SEO

b与strong的区别，i与em的区别

b是实体标签，用来给文字加粗的，只有加粗的样式，没有加粗的含义
strong表示标签内字符比较重要，用以强调
i，em同理

image标签的title，alt有什么区别

title：鼠标移入到图片上时显示
alt：图片无法加载时显示

png、jpg、gif

png：无损压缩，体积比jpg的大，适合小图标
jpg：采用压缩算法，有一点失真，但是体积比png小
gif：一般做动图、数据埋点用1*1的gif图片传输数据

块级元素、内联元素

块级元素：display:block/table，有div h1 table ul ol p等
内联元素：display:inline/inline-block，有span img input button等

页面导入样式时，link和@import有什么区别

浏览器先加载link后加载@import

盒模型的宽度如何计算

offsetWidth = (width + padding*2 + border)
box-sizing: border-box：offsetWidth = width

CSS的优先级算法

!important>内嵌样式>id选择器>类选择器>标签/伪元素选择器> *、>、+
继承样式的权重为0

magin纵向重叠问题

相邻元素的margin-top和margin-bottom会发生重叠，取两者的最大值
空白内容的p标签也会发生重叠

margin负值问题

margin-top，margin-left负值，元素向上，向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响

BFC的理解和应用

块级格式化上下文
一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
常见形成BFC的条件：
- float不是none
- overflow不是visible
- position是absolute或fixed
- display是flex，inline-block等
应用：清除浮动

css画三角形

<!DOCTYPE html>
<html lang="zh">
	<head>
		<style type="text/css">
			div {
				width: 0px;
				height: 0px;
				border-left: 100px solid transparent;
				border-right: 100px solid transparent;
				border-top: 100px solid transparent;
				border-bottom: 100px solid palegreen;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

float布局问题(圣杯，双飞翼)

<!DOCTYPE html>
<html lang="zh">
	<head>
		<style type="text/css">
			.fl {
				float: left;
			}
			header,
			footer {
				width: 100%;
				height: 50px;
				background-color: gray;
				clear: both;
			}
			.main {
				width: 100%;
				height: 300px;
				background-color: pink;
				padding: 0 100px;
				box-sizing: border-box;
			}
			.left,
			.right {
				width: 100px;
				height: 300px;
				background-color: aqua;
			}
			.left {
				margin-left: -100%;
			}
			.right {
				margin-left: -100px;
			}
		</style>
	</head>
	<body>
		<header>header</header>
		<div>
			<div class="main fl">main</div>
			<div class="left fl">left</div>
			<div class="right fl">right</div>
		</div>
		<footer>footer</footer>
	</body>
</html>

手写clearfix

.clearfix::after {
    content: '';
    display: table;
    clear: both
}

flex画骰子

<!DOCTYPE html>
<html lang="zh">
	<head>
		<style type="text/css">
			.main {
				width: 100px;
				height: 100px;
				border: 2px solid #000;
				border-radius: 5px;
				display: flex;
				justify-content: space-between;
			}
			.box {
				width: 25px;
				height: 25px;
				background-color: #000;
				border-radius: 50%;
				margin: 5px;
			}
			.box:nth-child(2) {
				align-self: center;
			}
			.box:last-child {
				align-self: flex-end;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
		</div>
	</body>
</html>

absolute和relative分别依据什么定位

relative依据自身定位
absolute根据最近一层的定位元素定位
- absolute，relative，fixed，body

居中对齐有哪些实现方式

水平居中
- text-align: center
- margin: auto
- absolute: left: 50% + margin-left负值/transform: translateX(-50%)
垂直居中
- linheight = height
- absolute: top: 50% + margin-top负值/transform: translateY(-50%)
- top,left,bottom,right = 0, margin: auto

line-hight的继承问题

写具体数值，如30px，直接继承该值
写比例，如2/1.5，继承该比例
写百分比，如200%，继承计算出来的值

hight和line-hight的区别

line-hight是每一行文字的高，如果文字换行，则整个盒子的高度会增大
而hight是一个死值，就是这个盒子的高度

display:none和visibility:hidden的区别

display:none不占位置，visibility:hidden虽然隐藏了，但是占用位置
重绘和回流的问题：
- html解析器 ->dom css解析器 ->render渲染 -> layout布局 -> paint绘制 -> 合并
- 都会产生重绘，但是display:none还会产生回流
- 回流一定会重绘，重绘不一定回流
- 产生回流的情况：改变元素的位置（left、top...）、显示或隐藏元素
- 产生重绘的情况：样式改变（background,color）

opacity和rgba的区别

都可以实现透明效果
opacity，0完全透明，1表示不透明
opacity会继承父元素的opacity属性，而rgba不会继承

rem是什么

em是一个长度单位，相对于父元素
rem是一个长度单位，相对于根元素
弊端：具有阶梯性

如何实现响应式

媒体查询（media-query）：根据不同的屏幕宽度设置根元素font-size
1vh = 视口高度的1/100

图片响应式显示

<picture>
	<source srcset="1.jpg" media="(min-width:1000px)">
	<source srcset="2.jpg" media="(min-width:700px)">
	<img srcset="3.jpg">
</picture>

：和：：的区别

:是伪类，::是伪元素

怎么让chrome支持小于12px的文字

css的tranform：scale(0.2)

标签：总结,知识,border,元素,100px,width,margin,CSS,left
来源： https://www.cnblogs.com/19BigData/p/16113737.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9