面试题(写一个左中右布局占满屏幕,其中左右两块是固定宽度200|面试题:写一个左中右布局占满屏幕,其中左右两块是固定宽度200 , 中间自适应宽,要求先加载中间块,请写出结构及样式:)

首先想到的是完成效果,也就是左右200,中间自适应。

我是左边 我是中间 我是右边

所以有了以下代码:
PS:方法可能不会最好,但是自己敲经过验证,是靠谱代码。
html,body{ margin: 0px; width: 100%; } #left{ width:200px; height: 200px; background-color: coral; position: absolute; left: 0; } #right{ width:200px; height: 200px; background-color: coral; position: absolute; right: 0; } #center{ height: 200px; background-color: aqua; position: absolute; right: 200px; left: 200px; } #center{ height: 200px; background-color: aqua; margin: 0 200px; }

【面试题(写一个左中右布局占满屏幕,其中左右两块是固定宽度200|面试题:写一个左中右布局占满屏幕,其中左右两块是固定宽度200 , 中间自适应宽,要求先加载中间块,请写出结构及样式:)】css样式默认加载顺序
  1. 样式表的元素选择器选择越精确,则其中的样式优先级越高:
    id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式
  2. 对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高
    所以把类选择器center写在后面就可以了。
    当然也写了另一种方法:
html,body{ margin: 0px; width: 100%; } #left,#right{width: 200px; height: 200px; background-color: aqua; position: absolute; } #left{left: 0; top:0; } #right{right: 0; top:0; } #center{margin: 0 200px; background-color: blue; height: 200px; }

    推荐阅读