前端笔记整理（CSS）

Posted 2021-06-04 Leatitia

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端笔记整理（CSS）相关的知识，希望对你有一定的参考价值。

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图片格式支持不好(引用一段脚本处理)

以上是关于前端笔记整理（CSS）的主要内容，如果未能解决你的问题，请参考以下文章

前端笔记整理（CSS）

前端学习笔记（HTML/CSS）

markdown Snippets.md是我最常用的HTML，CSS和JavaScript代码片段，用于前端Web开发

前端片段整理

吐血整理的前端代码规范系列 -- css规范

前端笔记整理（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（无样式内容闪烁）

常见兼容性问题？

`position:absolute`和`float`属性

`margin`塌陷

`display:none`和`visibility:hidden`

`link` 和`@import`

`CSS sprites`

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