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

<div id="left">我是左边</div>
    <div id="center">我是中间</div>
<div id="right">我是右边</div>

所以有了以下代码:

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;}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值