正文

前端笔记整理（css）(代码片段)

Leatitia  Leatitia  2022-12-04  470

关键词：

前端基础知识

CSS3新特性
定位
- 常见类型
- `position:absolute`和`float`属性
CSS盒模型
`margin`塌陷
浮动
- .clearfix
- BFC
常见布局
怎么能让图文不可复制
px/rem/em
canvas和svg的区别
transition、animation、transform三者有什么区别？
`display:none`和`visibility:hidden`
`link` 和`@import `
`CSS sprites`
`FOUC`（无样式内容闪烁）
常见兼容性问题？

CSS3新特性

文字换行：word-wrap
text-overflow、text-decoration、text-shadow
gradient 渐变
transition、transition-duration 过渡
transform 拉伸、压缩、旋转灯变换
animation 动画
calc()

transition和animation的区别:
transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from .... to，而animation可以一帧一帧的

定位

常见类型

absolute：绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。
fixed （老IE不支持）：绝对定位的元素，相对于浏览器窗口进行定位。
relative ：相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中

`position:absolute`和`float`属性

共同点：
对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：
float仍会占据位置，position会覆盖文档流中的其他元素。复制代码；

CSS盒模型

CSS盒模型本质上就是一个盒子，封装周围的HTML元素。box-sizing：属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

box-sizing:content-box;（标准盒模型）：元素的宽高表现为内容的大小；
box-sizing:border-box;（怪异盒模型）：元素的宽高表现为内容+内边距+边框大小，背景会延伸至边框的外沿。

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

`margin`塌陷

现象：margin 边界叠加只会出现在普通文档流中，在相邻块元素中，垂直外边距合并取两者中的最大值；嵌套块元素，垂直外边距合并形成一个外边距，合并到父元素的外边距并取其中的最大值

解决办法：触发 BFC 来解决（为父元素定义1px的上边框或上边距；为父元素添加oveflow:hidden）

浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠（注意这里指的是上下相邻的元素）
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
用同一方向的margin，都设置为top或者bottom。

浮动

基本原理：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动元素引起的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动方法：

额外标签法：在所有浮动标签后面添加一个空标签，定义css clear:both。弊端：增加了无意义标签。
使用overflow：给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1;用于兼容IE6。
使用after伪对象清除浮动：只适用非IE浏览器。
该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

.clearfix

.clearfix:before,.clearfix:after
	display:table;
	content:" ";

.clearfix:after
	clear:both;

.clearfix:after
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	
.clearfix
	display: inline-block;
 /* for IE/Mac */

#parent:after
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;

BFC

BFC：格式化上下文，是web页面中盒模型布局的css渲染模式，指的是一个独立的渲染区域。

应用
- 防止margin塌陷
- 清除内部浮动
- 自适应多栏布局
- 防止字体环绕
触发BFC条件
- 根元素
- float的值不为none
- overflow的值不为visible
- display：table-cell(inline-block、table-caption)
- position:absolute(fixed)
BFC特性
- 内部div会垂直排列
- 垂直方向的距离由margin决定
- bfc的区域不会与float的元素区域重叠
- 计算bfc的高度时，浮动元素也参与计算
- bfc里的子元素不会影响外面元素

常见布局

水平垂直居中

flex布局

.box
	display:flex;
	align-items:center;
	justify-content:center;

absolute定位

.box
	width:100px;
	height:10px;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;

.box1
	width:100px;
	height:10px;
	position:absoulte;
	top:50%;
	left:50%;
	mrgin-top:-50px;
	margin-left:-50px;

transform翻转

.box
	position:absoulte;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)

flex布局

flex属性

flex-direction：row、row-reverse、column、column-reverse
flex-wrap：wrap、nowrap、wrap-reverse
flex-flow：【flex-derection】【flex-wrap】
justify-content：flex-start、flex-end、center、space-around、space-between
align-items：flex-start、flex-end、center、baseline、stretch

flex items属性

order：[int]；数值越小越靠前；
flex-grow：[number]；扩展率分配剩余空间；
flex-shrink：[number]；收缩比率收缩空间；
flex-basic：[length], auto；伸缩基准值；
align-self：auto、flex-start、flex-end、center、baseline、stretch

两边宽度固定、中间栏自适应三栏布局

圣杯布局

/*1.flex实现*/

/*2.float实现*/
body 
   min-width: 550px;  /* 2x leftContent width + rightContent width */
   font-weight: bold;
   font-size: 20px;

.container
	padding-left: 200px;   /* leftContent width */
    padding-right: 150px;  /* rightContent width */
    overflow: hidden;

.column
	position:relative;
	float:left;
	height:300px;

.center
	width:100%

.left
	width: 200px;           /* leftContent width */
    right: 200px;           /* leftContent width */
    margin-left:-200px;

.right
	width: 150px;           /* rightContent width */
    margin-left: -150px;   /* rightContent width */
    right: -150px;

<body>
	<div class='container'>
		<div class="column center"></div>
		<div class="column left"></div>
		<div class="column right"></div>
	</div>
</body>

双飞翼布局

/*1.flex实现*/

/*2.float实现*/
body 
    min-width: 500px;

#container 
    width: 100%;

.column 
    float: left;

#center 
    margin-left: 200px;
    margin-right: 150px;

#left 
    width: 200px;
    margin-left: -100%;

#right 
    width: 150px;
    margin-left: -150px;

<body>
	<div id="container" class="column">
	    <div id="center">center</div>
	</div>
	<div id="left" class="column">left</div>
	<div id="right" class="column">right</div>
</body>

怎么能让图文不可复制

-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

px/rem/em

px，物理像素，固定不变；（在PC端，设备像素比等于1,1px就等于一个物理像素；但是在移动端屏幕上，设备像素比普遍是2或者3，1px就不等于1个物理箱数了，所以看起来比设计稿要粗；）
rem，css3新增的一个相对单位。移动端单位，根元素的字体大小。rem是相对的css单位，1rem=html元素上的字体大小。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';

em，相对长度单位，相当于当前对象内文字的字体尺寸；现指字符宽度的倍数；

canvas和svg的区别

canvas发生任何变化都需要重新生成，不易修改。
svg可为其中个别节点绑定事件。
canvas有像素的概念，svg没有，不会失真。
canvas是基于js绘制的，svg是基于xml进行定义的，因此svg有节点的概念，可对其中部分节点绑定事件。

transition、animation、transform三者有什么区别？

transition：一般是通过 hover来对所选择的样式进行变化，设置一个过渡动画效果
animation：用于指定元素样式动画可以分帧设计。0% ～ 100%
transform：对元素应用2D或3D转化。常用 translate rotate scale 等

`display:none`和`visibility:hidden`

display:none：隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在；
visibility:hidden：隐藏对应的元素，但是在文档布局中仍保留原来的空间；

`link` 和`@import`

link属于HTML标签，而@import是CSS提供的;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
link方式的样式的权重高于@import的权重。

`CSS sprites`

CSS Sprites：把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

优点：减少很多图片请求的开销，因为请求耗时比较长；
缺点：修改图片不好处理

`FOUC`（无样式内容闪烁）

FOUC - Flash Of Unstyled Content 文档样式闪烁
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了

常见兼容性问题？

png24位的图片在IE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
浏览器默认的margin和padding不同。解决方案是加一个全局的*margin:0;padding:0;来统一。
IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。
浮动IE产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）

 #box float:left; width:10px; margin:0 0 0 100px; 
/*这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)*/

渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

.bb
     background-color:#f1ee18;/*所有识别*/
    .background-color:#00deff\\9; /*IE6、7、8识别*/
    +background-color:#a200ff;/*IE6、7识别*/
    _background-color:#1e0bd1;/*IE6识别*/

IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性.
解决方法：统一通过getAttribute()获取自定义属性.
IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none;解决.
超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link a:visited a:hover a:active
怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。
上下margin重合问题
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法：养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
ie6对png图片格式支持不好(引用一段脚本处理)

前端笔记整理（html）(代码片段)

前端基础知识DOCTYPEDOCTYPE声明hack支持HTML5新标签严格模式与混杂模式区别xml和HTML的区别标签属性对语义化的理解？`iframe`的优缺点？DOCTYPEDOCTYPE声明<!DOCTYPE>声明有助于浏览器中正确显示网页。网页上不同的文件... 查看详情

前端笔记整理（编程）(代码片段)

基础编程在js中怎么捕获异常？写出来看看？应该在哪些场景下采用呢？说说你对hosts文件的理解，它都有哪些作用？a标签的href和onclick属性同时存在时，哪个先触发？数组去重遍历循环.indexOf()利用Set... 查看详情

前端笔记整理（vue）(代码片段)

Vue学习总结MVVM原理了解响应原理v-model双向绑定原理生命周期nextTick在哪里使用？原理是？vue.use是干什么的？原理是什么？Vue路由vue路由模式路由导航方式Vue-router有几种钩子函数？组件通信axios拦截器配置webpac... 查看详情

前端笔记整理（编程）(代码片段)

一名深漂程序员：我所整理和收集的前端面试题（笔记）(代码片段)

系列文章目录一名深漂程序员：我所整理和收集的前端面试题（一）一名深漂程序员：我所整理和收集的前端面试题（二）一、如何做性能优化1.webpack工程环境层面的优化1.新的工具，更好的代码压缩... 查看详情

一名深漂程序员：我所整理和收集的前端面试题（笔记）(代码片段)

前端开发笔记css基础（上）(代码片段)

CSS介绍层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配... 查看详情

前端笔记整理（js）(代码片段)

前端基础知识数据类型JS数据类型数组检测数组迭代方法转换方法栈方法（后进先出）队列方法（先进先出）重排序方法操作方法位置方法（全等比较）归并方法类数组（Array-like）对象对象属性类... 查看详情

html笔记：前端-移动端下拉刷新-1.html基本结构和css文件(代码片段)

查看详情

css进阶班笔记(代码片段)

...的移动端web开发，今天补上了💂‍♂️🔥web前端剑法之css🔥web前端剑法之css地址🔥CSS基础班笔记(一)https://blog.csdn.net/Augenstern_QXL/article/details/115560532🔥CSS基础班笔记(二) 查看详情

css笔记：前端开发中的“居中”，绝对定位，transform和flex布局：5。css中的transform属性(代码片段)

查看详情

详细解读css渐变用法——web前端系列学习笔记(代码片段)

文章目录线性渐变属性解析实例代码效果图径向渐变属性解析示例代码效果图多学一招：重复渐变线性渐变属性解析通过关键词来确定渐变的方向。默认值为top（从上向下），取值范围是[left,right,top,bottom,center,topr... 查看详情

css笔记：前端开发中的“居中”，绝对定位，transform和flex布局：相对绝对定位-1(代码片段)

查看详情

css笔记：前端开发中的“居中”，绝对定位，transform和flex布局：4。相对绝对定位(代码片段)

查看详情

前端面试整理(代码片段)

第一阶段1、XHTML与HTML与HTML5的有何异同？HTML是一种超文本标记语言HTML5最先由whatwg命名的一种超文本标记语言，随后与W3Cxhtml2.0相结合，生成现代最新的一种超文本标记语言h5=html+css3+js+APIhtml与html5主要区别是语义化的标签<heade... 查看详情

css笔记：前端开发中的“居中”，绝对定位，transform和flex布局：基于viewport的居中(代码片段)

查看详情

css笔记：前端开发中的“居中”，绝对定位，transform和flex布局：6。通过flex布局(代码片段)

查看详情

css过渡属性transitions详细解读——web前端系列学习笔记(代码片段)

文章目录transitionteansition-property属性名称transtion-duration花费时间transition–timing-function时间曲线transition-delay等待时间样例代码效果图transitiontransition是一个复合属性，由4个属性构成，如下表所示。teansition-property属性名称tra... 查看详情

正文

前端笔记整理（css）(代码片段)

前端基础知识

CSS3新特性

定位

常见类型

position:absolute和float属性

CSS盒模型

margin塌陷

浮动

.clearfix

BFC

常见布局

水平垂直居中

flex布局

flex属性

flex items属性

两边宽度固定、中间栏自适应三栏布局

怎么能让图文不可复制

px/rem/em

canvas和svg的区别

transition、animation、transform三者有什么区别？

display:none和visibility:hidden

link 和@import

CSS sprites

FOUC（无样式内容闪烁）

常见兼容性问题？

前端笔记整理（html）(代码片段)

前端笔记整理（编程）(代码片段)

前端笔记整理（vue）(代码片段)

前端笔记整理（编程）(代码片段)

一名深漂程序员：我所整理和收集的前端面试题（笔记）(代码片段)

一名深漂程序员：我所整理和收集的前端面试题（笔记）(代码片段)

前端开发笔记css基础（上）(代码片段)

前端笔记整理（js）(代码片段)

html笔记：前端-移动端下拉刷新-1.html基本结构和css文件(代码片段)

css进阶班笔记(代码片段)

css笔记：前端开发中的“居中”，绝对定位，transform和flex布局：5。css中的transform属性(代码片段)

详细解读css渐变用法——web前端系列学习笔记(代码片段)

css笔记：前端开发中的“居中”，绝对定位，transform和flex布局：相对绝对定位-1(代码片段)

css笔记：前端开发中的“居中”，绝对定位，transform和flex布局：4。相对绝对定位(代码片段)

前端面试整理(代码片段)

css笔记：前端开发中的“居中”，绝对定位，transform和flex布局：基于viewport的居中(代码片段)

css笔记：前端开发中的“居中”，绝对定位，transform和flex布局：6。通过flex布局(代码片段)

css过渡属性transitions详细解读——web前端系列学习笔记(代码片段)

`position:absolute`和`float`属性

`margin`塌陷

`display:none`和`visibility:hidden`

`link` 和`@import`

`CSS sprites`

`FOUC`（无样式内容闪烁）