《web前端笔记30》css三栏布局、左右两栏宽度固定，中间自适应

Posted 2023-04-22

参考技术A

三栏布局一般指的是页面中一共有三栏， 左右两栏宽度固定，中间自适应的布局 ，三栏布局的具体实现：

利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

前端笔记整理（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`（无样式内容闪烁）
• 常见兼容性问题？

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