float: right;margin-left: -400px;这两个是关键

上代码看下？

• 最初是想让padding-bottom加长所有列，再使用"overflow: hidden"将它们一刀切成高度相同的列（超过父容器边框都被隐藏掉）。

• 但是你会发现父容器没有显式设置高度（依赖子元素），父容器一直包裹着子元素，这样会导致"overflow: hidden"不生效。那么这个场景下就得考虑让父容器边框范围收缩（让子元素边框超过父容器边框）。

• margin-bottom取负值就可以让子元素盒子实际占用尺寸减少（content+padding+border+margin），但又不会影响到子元素边框（content+padding+border）。对应父容器内部被占用的空间减少，父容器边框范围收缩，"overflow: hidden"就可以生效了。（margin不会影响子元素边框，通过影响子元素实际占用尺寸来影响父容器边框）

这个等高布局涉及的知识点还是挺多的，比如"overflow: hidden"何时触发、内外边距对盒子的影响、盒子未显式设置高度时的处理。

用这个那会影响左边元素的

可以简单点理解，“table-layout: fixed”是宽度固定的，单元格里的内容可能会换行或者溢出；而“table-layout: auto”是宽度不固定的，内容会决定单元格以及表的宽度。

“table-layout: fixed”是表格固定宽度的一种表现。

某个列的宽度，是由显式设置的列宽或者该列的第一行单元格宽度决定的。

然后可以算出所有列宽也就是总列宽，最终会从总列宽和显式设置表宽这两个中取一个最大值作为表的宽度。

大致是这样的，有些细节和特殊情况在这里就不提了。“table-layout: auto”是表格自动宽度的一种表现，比固定宽度要复杂，这里也不提了哈哈~

添加parent-fix是为了设置margin-left: -10px；让最左边多余的10px抵消掉，这样四个子元素就只有三个间隙，最左边和最后边刚好没有间隙；如果直接在parent上添加margin-left: -10px，会导致整体向左移动10px，这样就会导致最右边空出来10px；所以只能在外面添加parent-fix来设置margin-left: -10px

【个人理解，有错请指正！】

参考博客：

（1）https://www.cnblogs.com/anvivi/p/9708987.html

（2）https://blog.csdn.net/qq_36470686/article/details/82864510

原因：

（1）这个问题是因为浏览器为了在页面中没有样式时也可以有一个比较好的显示效果，给很多元素都设置了一些默认的margin。图中的h1和p去浏览器调试一下可以发现，它们都被浏览器设置了margin。

（2）CSS有规定：相邻的两个或更多盒元素的margin将会合并为一个margin共享之。盒元素应该指的是能设置margin、border、padding的元素，本代码中的盒元素是div、h1和p；相邻指的是同级或者嵌套的盒元素，并且它们之间没有非空内容、padding或border分隔，本代码中p与h1、h1与#inner、#inner与#right符合这种情况，#right-fix因为设置了浮动所以不参与margin的折叠。

解决方法：

（1）将浏览器自带的margin设置去掉。

* {			
    margin: 0;		
}

（2）因为浮动或绝对定位不参与margin的折叠，所以可以对父元素#inner设置浮动或者绝对定位。

注意：由于本代码中#inner元素没有设置宽高，所以#inner的宽高取决于其内容。

（3）对父元素#inner设置overflow: hidden;即可。

可以的啊，子元素只要是块，设置margin：0 auto ；就是可以的

是的吧

我复制过来后，看到你的 #parent 的 height:200px后面的分号是错误的，改成英文的分号就好了。

看下兼容性的问题

这个你应该可以看看专门讲 网格布局 的那门课程

我也一样

position absolute  尽量少用

你好，同学，老师讲的主要是真对PC端的常用方法，display:flex; 在移动端是常用的。

有啊 完全可以

可以选择用第二种解决方法，table-cell会自动分配相等的值，不用自己计算

是的，因为右侧的宽度设置的是100%，position用于调整显示层级，将left显示在上面

是的，这节确实有问题，right的宽度还是100%

因为 text-align 对作为块级元素的子元素无效，但子元素的文本会继承 text-align 的效果导致该文本在子元素内水平居中。

我也是新人 我的理解是 首先inner也是div标签 那么会继承父级标签的宽度 也就是默认整个屏幕的宽度 这个情况下是有重叠的 但是他给#inner设置了CSS样式（margin-left,margin-right），也就是左外边距和右外边距。所以正好就不跟left和right的div标签有重合了。

因为有的时候，元素的高度是不确定的，实际开发中，可能会不断的改变，设定死的话，不利于后期的维护

这个布局应该是指容器的布局位置，中间部分有的需要放内容需要自适应。

vscode，下载地址 https://code.visualstudio.com/

1.可以设置百分比宽度。

2.根据媒体查询 设置不同分辨率下 输入框的固定宽度

如下：@media screen and (max-width: 1920){

input.xxx{width: 200px} 

}@media screen and (max-width: 1780){

input.xxx{width: 180px} 

}

td标签（display:table-cell）

1) td默认继承tr的高度，且平分table的宽度
2) 若table（display:table）不存在，给td设置的宽高不能用百分比只能用准确的数值
3) 给td设置vertical-align: middle; td元素里面(除float、position:absolute)所有的块级、非块级元素都会相对于td垂直居中
4) 给td设置text-align: center; td元素里面所有非block元素(除float、position:absolute)都会相对于td水平居中，虽然block元素不居中，但其中的文字或inline元素会水平居中

你自己再加个parent-fix容器，设置该容器“display: table; width: 100%”。因为你目前的表宽是根据单元格内容大概200px和width设置值100%算出来的。

如果不显式设置table宽度，根据单元格的内容和单元格的width设置去算总列宽，总列宽会作为表宽。

如果显示式设置了table宽度，跟上面一样要算出总列宽。如果表宽大于总列宽，会把多余的分配给列；如果表宽小于总列宽，表宽会被忽略，总列宽会作为表宽。

这两条规则其实不太严谨，中间过程会更复杂，具体去查相关资料吧~

<!--还是左中右的顺序-->
<div class="parent">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

.left, .center, .right {     
    height: 300px;
    float: left;
}        
.left { 
    background-color: red; 
    width: 300px;
}        
.center { 
    background-color: green;
    width: calc(100% - 600px);
}        
.right { 
    background-color: blue;
    width: 300px;        
}

查了一下，可以给right-fix的 width属性设置为 width:calc(100% - 400px)，同时left上的position也不用写了，calc()自适应布局属性是css3新增。个人踩坑补充一下，calc支持加减乘除，但是运算符号左右两边必须要有空格