前端整理——css部分

迷南。 2023-06-10 06:26 18阅读 0赞

[![返回主页][aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg]][aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg 1]

# **[前端整理——css部分][css]** #

### **（1）盒模型（普通盒模型、怪异盒模型）** ###

1、元素的content（内容）、padding(内边距)、border（边框）、margin（外边距）构成了CSS盒模型  
2、IE盒模型和W3C盒模型  
1）IE盒模型是怪异模式下的盒模型，W3C盒模型是标准模式下的盒模型；  
2）IE盒模型的width/height包含了content的width/heigh+padding+border  
W3C盒模型的width/height只是content的width/height  
3、CSS3中的box-sizing  
不同的人有不同的习惯，在css3中增加了box-sizing：content-box（遵循W3C盒模型）| border-box（遵循ie盒模型）|inherit（该属性的值从父元素继承）

### **（2）如何让元素水平居中** ###

1、绝对定位实现水平垂直居中：

<code>position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;</code>

注意：  
1>对父元素要使用 position: relative; 对子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。  
2>如果只要垂直居中，可以不写right: 0；left: 0;  
margin: auto; 可以换成 margin-top: auto; margin-bottom: auto;  
3>如果只需要水平居中，top: 0; bottom: 0; 可以省略不写  
margin: auto; 可以换成 margin-rihgt: auto; margin-left: auto; 。

2、确定高度的块级元素居中：

<code>position：absolute;
 top:50%;
 margin-top:(自身高度的值的一半的负值)</code>

3、对不定高的div实现垂直居中  
a、利用css3的弹性布局实现  
在父元素的css样式中加入以下代码：

<code>display：flex；
 justify-center:center;
 align-items：center；</code>

b、利用平移实现  
在子组件中加入以下代码：

<code>position：relative：
 left:50%；
 top:50%;
 transform:translate(-50%,-50%);
 -weikit-transform: translate(-50%,-50%);</code>

4、一段文本、一张图片水平居中  
text-content:center;  
图片是行内元素，在 ie, edge, chrome, firefox, opera 中对于 img 的默认显示方式是： display: inline;  
5）块级元素水平居中，使用margin：auto；  
6）单行文本垂直居中 ，让height和line-height相等  
注意：当box-sizing:content-box时，line-height和height相等；  
当box-sizing:border-box时，line-height=height-(padding-top)-(padding-bottom)-(border-top)-(border-bottom)四个值，也就是说line-height等于content的有效高度。

### **（3）浮动&清浮动** ###

1、是什么浮动？  
浮动的元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。  
2、为什么要清浮动？  
浮动会导致父元素的高度塌陷。当父元素不设置高度，由内容撑开时，浮动元素脱离了文档流，并不占据文档流的位置，父元素就不能被撑开，也就没有了高度。所以需要通过清浮动来解决父元素高度坍塌的问题。  
3、清浮动的方式：  
1）clear清除浮动  
在浮动元素后面添加一个空的div，设置clear属性为both。  
clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，原理在被清除浮动的元素上面或者下面添加足够的清除空间。  
2）clear清除浮动的最佳实践：利用伪类元素来清除有浮动的标签  
IE8和非ie浏览器才支持：after，相当于在该元素后面添加了一个空元素，利用clear：both清除浮动。zoom可解决ie6、ie7的浮动问题。

<code><div class="box clearfix">
 <div class="red"></div>
 <div class="green"></div>
 </div>
 <style>
 .clearfix::after{ //向元素的内容之后添加新内容
 display: block;
 content:'';
 clear:both;
 visibility:hidden;
 height:0
 }
 .clearfix{ 
 zoom:1;
 }
 </style></code>

3）父级div定义overflow：hidden  
原理：必须要定义width或zoom：1，同时不能定义高，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

### **（4）圣杯布局和双飞翼布局** ###

圣杯布局和双飞翼布局都是三栏布局，两边的盒子宽度固定，中间盒子宽度自适应。  
1)圣杯布局  
写结构时优先写中间盒子，因为中间盒子优先被渲染，设置其自适应，宽度设为100%。中间栏放在文档流前面以优先渲染。  
第一步：设置center宽度为100%,然后left和right设置固定宽度。然后三个div都左浮动。  
![format_png][]  
第二步：设置最外层包裹box： padding-left:200px;padding-right:250px;  
![format_png 1][]

第三步：设置left： margin-left: -100%; 设置right：margin-left: -250px;  
![format_png 2][]

第四步：需要将left和right通过相对定位移动到两侧  
![format_png 3][]

注意：最好给body加一个最小宽度min-width  
圣杯布局有个问题，就是当面板的main部分比两个子面板宽度小的时候，布局就会乱掉。

<code><head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 body{
 min-width:550px;
 }
 #box{
 height:700px;
 padding-left:200px;
 padding-right:250px;
 }
 .content {
 background: yellow;
 width:100%;
 height:600px;
 float:left;
 }
 .left {
 background: pink;
 width:200px;
 height:600px;
 float:left;
 margin-left: -100%;
 position: relative;
 left:-200px;
 }
 .right {
 background: yellowgreen;
 width:250px;
 height:600px;
 float:left;
 margin-left: -250px;
 position: relative;
 right:-250px;
 }
 
 </style>
 </head>
 <body>
 <div id="box">
 <div class="content"></div>
 <div class="left"></div>
 <div class="right"></div>
 </div>
 </body></code>

2）双飞翼布局

<code><body>
 <div class="box">
 <div class="main">
 <div class="center">center</div>
 </div>
 <div class="left">left</div>
 <div class="right">right</div>
 </div>
 </body>
 <style>
 *{margin:0;padding:0;}
 body{
 min-width:500px;
 }
 .main{
 width:100%;
 background: palevioletred;
 float:left;
 }
 .left{
 width:150px;
 background: greenyellow;
 float:left;
 margin-left:-100%;
 }
 .right{
 width:200px;
 background: yellow;
 float:left;
 margin-left:-200px;
 
 }
 .center{
 margin:0 200px 0 150px;
 }
 </style></code>

[https://www.zhihu.com/question/21504052/answer/50053054][https_www.zhihu.com_question_21504052_answer_50053054]

圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。  
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。  
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：  
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。  
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。  
多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。  
简单说起来就是”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了“。

分类: [前端学习][Link 1]

[aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg
[aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg 1]: /images/20230531/71c4f1c4a4a44425858fe5409dd240b0.png
[css]: /images/20230531/71c4f1c4a4a44425858fe5409dd240b0.pngp/10191278.html
[format_png]: /images/20230531/648f8541bbe84dcfbbcb36e9f0c299fe.png
[format_png 1]: /images/20230531/19b6a785c4ac4c0794d0b5127ad5db50.png
[format_png 2]: /images/20230531/8294fbf635d141caacd283da20dd21e0.png
[format_png 3]: /images/20230531/bd6358cf6ae144fabeb97341aac1b2c9.png
[https_www.zhihu.com_question_21504052_answer_50053054]: https://www.zhihu.com/question/21504052/answer/50053054
[Link 1]: /images/20230531/71c4f1c4a4a44425858fe5409dd240b0.pngcategory/1198258.html