标签：flex float 300px height padding 10px 解决 table left
float、table、flex解决等分布局出现的问题及解决方案
解决出现的问题
解决float出现的问题
问题一：如果给子块加上间距的话则会导致一行不够分而导致有的块被挤掉
盒子模型：box-sizing：
content-box:盒子模型 width宽度 = width + padding-left/right + border-left/right
border-box:怪异盒模型 width宽度 =width（padding+border已经计算进去了）
margin 不影响盒子模型的大小 => 间距 / 位置移动
- 对问题一的解决.解决边框线方法一：添加box-sizing: border-box
问题二 用盒子模型做出来了边距后出现了第一个模块的左边距有空隙
- 错误做法：这样虽然可以在视觉上欺骗自己，但是实际上最左边的模块要比其他的要大一点
.col1:first-child{
border: 0px;
}
对问题二的解决：
解决方法一：整体往左边移动 - 间距隐藏起来
#parent{
height: 300px;
/*对问题二的解决：整体往左边移动 - 间距隐藏起来*/
margin-left: -10px;
}
解决方法二：padding已经计算进了25%，padding是内容的一部分
解决后的代码块：
.col1,
.col2,
.col3,
.col4 {
height: 300px;
/*等分 = float 100%/4*/
width: 25%;
float: left;
/*解决方法二：padding已经计算进了25%，padding是内容的一部分*/
padding-left: 10px;
box-sizing: border-box;
}
解决后的代码块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5.1等分布局利用float+盒子模型用padding解决（解决方法二）</title>
<style>
*{margin: 0;padding: 0;}
/* clearfix进行清浮动的封装 => 公用代码*/
.clearfix::after{
content: '';
display: block;
clear: both;
}
.parent-fix {
overflow: hidden;
}
#parent{
height: 300px;
margin-left: -10px;
}
.col1,
.col2,
.col3,
.col4 {
height: 300px;
/*等分 = float 100%/4*/
width: 25%;
float: left;
/*解决方法二：padding已经计算进了25%，padding是内容的一部分*/
padding-left: 10px;
box-sizing: border-box;
}
.col1 .inner{height: 300px; background-color:hotpink}
.col2 .inner{height: 300px; background-color:rgb(105, 220, 255)}
.col3 .inner{height: 300px; background-color:rgb(21, 255, 33)}
.col4 .inner{height: 300px; background-color:rgb(203, 255, 13)}
</style>
</head>
<body>
<div class="parent-fix">
<!-- 作为父级容器 -->
<div id="parent" class="clearfix">
<div class="col1">
<div class="inner"></div>
</div>
<div class="col2">
<div class="inner"></div>
</div>
<div class="col3">
<div class="inner"></div>
</div>
<div class="col4">
<div class="inner"></div>
</div>
</div>
</div>
</body>
</html>
解决table出现的问题
问题 margin-left: -10px;导致右边不对齐了
问题：第一个模块如果去掉padding-left: 10px;会导致第一个模块直接消失了
解决方案：
/*解决右边又不对齐*/
.parent-wrap {
margin-left:-10px;
}
解决的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5.1等分布局利用float+盒子模型用padding解决（解决方法二）</title>
<style>
*{margin: 0;padding: 0;}
/*解决右边又不对齐*/
.parent-wrap {
margin-left:-10px;
}
#parent{
width: 100%;
/*问题 margin-left: -10px;导致右边不对齐了 */
/*table*/
display:table;
}
.col1,
.col2,
.col3,
.col4 {
/*td*/
display:table-cell;
height: 300px;
padding-left: 10px;
/*内部计算 padding-left*/
}
/*问题：第一个模块如果去掉padding-left: 10px;会导致第一个模块直接消失了*/
/* .col1{
padding-left: 0px;
} */
.col1 .inner{height: 300px; background-color:hotpink}
.col2 .inner{height: 300px; background-color:rgb(105, 220, 255)}
.col3 .inner{height: 300px; background-color:rgb(21, 255, 33)}
.col4 .inner{height: 300px; background-color:rgb(203, 255, 13)}
</style>
</head>
<body>
<div class="parent-wrap">
<!-- 作为父级容器 -->
<div id="parent">
<div class="col1">
<div class="inner"></div>
</div>
<div class="col2">
<div class="inner"></div>
</div>
<div class="col3">
<div class="inner"></div>
</div>
<div class="col4">
<div class="inner"></div>
</div>
</div>
</div>
</body>
</html>
解决flex的问题
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5.1等分布局利用float+盒子模型用padding解决（解决方法二）</title>
<style>
*{margin: 0;padding: 0;}
/*解决右边又不对齐*/
.parent-wrap {
margin-left:-10px;
}
#parent{
width: 100%;
/*问题 margin-left: -10px;导致右边不对齐了 */
/*table*/
display:table;
}
.col1,
.col2,
.col3,
.col4 {
/*td*/
display:table-cell;
height: 300px;
padding-left: 10px;
/*内部计算 padding-left*/
}
/*问题：第一个模块如果去掉padding-left: 10px;会导致第一个模块直接消失了*/
/* .col1{
padding-left: 0px;
} */
.col1 .inner{height: 300px; background-color:hotpink}
.col2 .inner{height: 300px; background-color:rgb(105, 220, 255)}
.col3 .inner{height: 300px; background-color:rgb(21, 255, 33)}
.col4 .inner{height: 300px; background-color:rgb(203, 255, 13)}
</style>
</head>
<body>
<div class="parent-wrap">
<!-- 作为父级容器 -->
<div id="parent">
<div class="col1">
<div class="inner"></div>
</div>
<div class="col2">
<div class="inner"></div>
</div>
<div class="col3">
<div class="inner"></div>
</div>
<div class="col4">
<div class="inner"></div>
</div>
</div>
</div>
</body>
</html>
标签：flex,float,300px,height,padding,10px,解决,table,left 来源： https://blog.csdn.net/qq_43218276/article/details/114631941
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。