![](https://img-blog.csdnimg.cn/20190918140213434.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
html & css
文章平均质量分 70
html和css的一些内容
楼兮诺
加油哦!
展开
-
左侧固定右侧宽度自适应的布局方式
最近这段时间一直在面试,在自己的经历上、做的项目上扯得天花乱坠。谁曾想那天一个面试官突然问了我如何实现一个左侧宽度固定、右侧自适应的布局,一下自给我搞蒙了,因此特地来整理一下废话不多说,简单的列举三种方法方法一左侧盒子浮动,右侧盒子使用margin-left实现方法二左侧盒子浮动,触发右侧盒子BFC的方式实现方法三使用flex布局实现直接上代码 <style> div { box-sizing: border-box; } [cl.原创 2021-11-19 15:34:32 · 394 阅读 · 1 评论 -
css面试题-圣杯布局
圣杯布局网上的其他资料讲的已经非常清晰了,这里主要提供练习源码和实现过程及原理分析一、圣杯布局是什么?header和footer各自占领屏幕所有宽度,高度固定。中间的container是一个三栏布局(左中右)。三栏布局两侧宽度固定不变,中间部分自动填充整个区域(中间占满剩余宽度)。以上内容引自 这里二、圣杯布局的练习源码2.1 完整初始源码<!DOCTYPE html><html><head> <meta charset="UT.原创 2021-10-17 09:28:40 · 229 阅读 · 1 评论 -
css面试题-margin负值问题
先上结论margin-top 和 margin-left 负值,元素向上、向左移动margin-right负值,右侧元素左移,自身不受影响margin-bottom负值,下方元素上移,自身不受影响1.margin-top 为负值的情况注意,我们操作的是下方的元素(item2)从图片中可以看出,margin-top为负的时候,元素自身向上移动2.margin-left 为负值的情况注意,我们操作的是右侧的元素(item4)从图片中可以看出,margin-left为负的时候,元素自身左移原创 2021-10-15 11:45:56 · 1207 阅读 · 0 评论