省建设厅网站合同备案用户名,深圳企业网站制作维护,上海美容论坛网站建设,开发 程序网站圣杯模型和比翼双飞模型主要的特指1.首先加载的是中间部分#xff0c;其次是左边#xff0c;然后是右边 2.中间是自适应#xff0c;二边是定宽 实现方法1.grid2.margin float position:releative父亲加padding 挤进去3.margin float box-size:border-box 1.gridhtml:其次是左边然后是右边 2.中间是自适应二边是定宽 实现方法 1.grid 2.margin float position:releative父亲加padding 挤进去 3.margin float box-size:border-box 1.grid html: div classwrapdiv classheaderheader/divdiv classmiddlemiddle/divdiv classleftleft/divdiv classrightright/divdiv classfooterfooter/div/div css .middle {grid-area: middle;background-color: pink;}.left {grid-area: left;background-color: red;}.right {grid-area: right;background-color: blue;}.header {grid-area: header;background-color: yellow;}.footer {grid-area: footer;background-color: gray;}.wrap {display: grid;grid-template-areas: header header header left middle right footer footer footer;grid-template-columns: 150px 1fr 150px;grid-template-rows: 150px 1fr 150px;text-align: center;height: 500px;width: 500px;} 实现效果 2.margin float position:releative父亲加padding 挤进去 html: div classheaderheader/divdiv classwrapdiv classmiddlemiddle/divdiv classleftleft/divdiv classrightright/div/divdiv classfooterfooter/div css: .header,.footer {height: 30px;text-align: center;background: gray;}.wrap {overflow: hidden;padding: 0 200px;}.middle,.left,.right {float: left;min-height: 130px;position: relative;}.middle {width: 100%;background: pink;}.left {margin-left: -100%;background: blue;width: 200px;left: -200px;}.right {background: yellow;margin-left: -200px;width: 200px;right: -200px;}.footer {clear: both;} 效果 3. margin float box-size:border-box html: div classheaderheader/divdiv classwrapdiv classmiddlemiddle/divdiv classleftleft/divdiv classrightright/div/divdiv classfooterfooter/div css: .header,.footer {height: 30px;text-align: center;background: gray;}.wrap {overflow: hidden;}.middle,.left,.right {float: left;min-height: 130px;}.middle {width: 100%;background: pink;box-sizing: border-box;padding: 0 200px;}.left {margin-left: -100%;background: blue;width: 200px;}.right {background: yellow;margin-left: -200px;width: 200px;}.footer {clear: both;} 效果 分析 1.grid 兼容性的的问题面试只能作为一个亮点来吸引面试官gird 很多新属性可以查文旦了解更多。 2.方法2最大亮点在于父容器的padding: 0 200px; 以及margin:-100%; 3.方法3和方法2很像处理不同的就是main加上box-sizing:boeder-box;在用padding:0 200px;从而到达效果。
