html & css
关注
分享
扫一扫
文章平均质量分 70
html和css的一些内容
楼兮诺
加油哦！
展开
-
左侧固定右侧宽度自适应的布局方式
最近这段时间一直在面试，在自己的经历上、做的项目上扯得天花乱坠。谁曾想那天一个面试官突然问了我如何实现一个左侧宽度固定、右侧自适应的布局，一下自给我搞蒙了，因此特地来整理一下废话不多说，简单的列举三种方法方法一左侧盒子浮动，右侧盒子使用margin-left实现方法二左侧盒子浮动，触发右侧盒子BFC的方式实现方法三使用flex布局实现直接上代码 <style> div { box-sizing: border-box; } [cl.原创 2021-11-19 15:34:32 · 422 阅读 · 1 评论 -
css面试题-圣杯布局
圣杯布局网上的其他资料讲的已经非常清晰了，这里主要提供练习源码和实现过程及原理分析一、圣杯布局是什么？header和footer各自占领屏幕所有宽度，高度固定。中间的container是一个三栏布局（左中右）。三栏布局两侧宽度固定不变，中间部分自动填充整个区域（中间占满剩余宽度）。以上内容引自 这里二、圣杯布局的练习源码2.1 完整初始源码<!DOCTYPE html><html><head> <meta charset="UT.原创 2021-10-17 09:28:40 · 254 阅读 · 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 · 1311 阅读 · 0 评论