面试题(写一个左中右布局占满屏幕,其中左右两块是固定宽度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样式默认加载顺序
- 样式表的元素选择器选择越精确,则其中的样式优先级越高:
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式 - 对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高
所以把类选择器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;
}
推荐阅读
- JAVA(抽象类与接口的区别&重载与重写&内存泄漏)
- PMSJ寻平面设计师之现代(Hyundai)
- 杜月笙的口才
- 今天写一些什么
- 小影写在2018九月开学季
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- Linux下面如何查看tomcat已经使用多少线程
- 皮夹克
- 写给陈羡
- angular2内置管道