面试 - 布局篇

最新推荐文章于 2025-06-05 18:49:30 发布
原创 最新推荐文章于 2025-06-05 18:49:30 发布 · 109 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5

这篇博客探讨了如何使用CSS确保footer在内容不足一屏时位于页面底部，而当内容超过一屏时，footer能跟随主要内容显示。关键在于设置主内容区域的min-height，footer的高度以及负margin，以此实现灵活的页面布局。

1.footer位置的自动适配（主内容不足一屏时显示在最底部，超出一屏时跟随主内容显示）

html

<div class="page"></div>
<div class="footer"></div>

css

.page{min-height: 100vh;padding-bottom: 50px;}
.footer{height:50px;background: #ccc;margin-top: -50px;}

主要注意的是：主内容的min-height，footer的height和margin-top

前端面试--CSS篇
The_upside_of_down的博客
09-07 1886
前端面试--CSS篇介绍下BFC及其应用怎样让一个div水平垂直居中？介绍下重流和重绘，以及如何进行优化？分别比较opacity：0，visibility：hidden，display：none的优劣和适用场景？简述CSS盒模型简述rem及其转换原理简述伪类和伪元素行内元素的margin和paddingCSS中那些属性可以继承？CSS3新增伪类有哪些？用CSS创建一个三角形min-width/max-width和min-height/max-height属性间的覆盖规则？ 介绍下BFC及其应用 BFC块级格
前端面试 - css , 布局 ，js ,vue
四月
07-27 319
1. 介绍一下标准盒子模型和低版本IE盒子模型标准盒子模型 宽度 = content+border+padding+margin 低版本IE盒子模型 宽度 = 内容宽度(content+border+padding)+margin 也就是说区别在于，低版本IE盒子模型的内容宽度直接包含了border和padding 转存失败重新上传取消转存失败重新上传取消正在上传…重新上传取消转存失败重新上传取消转存失败重新上传取消 ...
前端面试-基础篇
GarfieldEr007的专栏
02-02 6758
第一部分：基础篇 #一、HTML、HTTP、web综合问题 #1 前端需要注意哪些SEO 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；...
前端面试-高级篇
GarfieldEr007的专栏
02-02 7344
一、JavaScript进阶 #1 内置类型 JS中分为七种内置类型，七种内置类型又分为两大类型：基本类型和对象（Object）。 基本类型有六种：null，undefined，boolean，number，string，symbol。 其中JS的数字类型是浮点类型的，没有整型。并且浮点类型基于IEEE 754标准实现，在使用中会遇到某些 Bug。NaN也属于number类...
2024前端面试题-css篇
FormAda的博客
08-21 1367
使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/...；‌3.使用display属性‌：将元素的display属性设置为inline-block、table-cell、table-caption、flex或grid等也可以触发BFC。
Android面试题--布局
lollipop的专栏
04-13 464
看了一些有关android的面试题，决定小结一下容易出错的问题。 这篇文章主要总结的是有关布局方面的。 1、如何获得LinearLayout的高度和宽度？ 因为LinearLayout是View的子类，所以，可以用View.getMeasuredWidth()和View.getMeasuredHeight()获取组件的宽度和高度。 注意：若组件的高度或宽度设为fill_parent或mat
2022前端面试-性能优化篇
weixin_43842488的博客
04-20 1451
2022前端面试-性能优化篇
前端面试题---CSS篇
weixin_45815479的博客
03-17 973
前端面试基础题总结---CSS篇
前端开发面试题总结-CSS篇
最新发布
分享前端与鸿蒙开发技术、面试题总结
06-05 575
1.为什么谷歌默认可设置最小字体12px，特殊场景需要设置更小字体2.方式一CSS3的缩放p {注意：行内元素没有效果3.方式二zoom属性p {zoom:0.5;
嵌入式面试知识点总结 -- C语言篇
不积跬步，无以至千里
04-15 6933
之前有写过 日常生活 – 嵌入式面试 ，讲了面试大部分都会问哪些问题。 也有自己总结了一些面试题： C语言再学习 – 详解C++/C 面试题 1 C语言再学习 – 详解C++/C 面试题 2 但是每次我都要翻好几篇文章按着看知识点，这就很烦了。现在将所用到的知识点在这篇文章内加以总结。 ...
2024前端面试系列--网络篇
Web面试那些事儿的博客
12-03 1821
本文是我的前端面试系列的网络篇，汇总整理了网络相关的常见面试题，后续的复习过程中随时会对本文查漏补缺。复习这部分内容的时候，感觉又回到了大学时期的“计算机网络”课堂。每个题目后面的推荐内容或参考链接，个人认为其阅读价值更高，值得仔细研读。本文是 网络篇 的内容，其他章节内容更新后可在专栏查看：2024前端面试系列--Vue 篇2024前端面试系列-- JS 篇2024前端面试系列--HTML & CSS篇2024前端面试系列-- webpack & Git篇。
面试专题--框架篇代码
09-12
本篇文章将深入探讨Java框架相关的面试知识点，帮助你为面试做好充分准备。 首先，Java框架是用于简化应用程序开发的预构建工具集合。它们提供了一种结构化的开发方式，遵循一定的设计模式，如MVC（Model-View-...
前端面试-css篇
09-03
在前端面试中，CSS部分是不可或缺的知识点，它涉及到网页的布局、元素隐藏、文本处理、样式继承以及选择器的使用等多方面内容。以下是对这些知识点的详细说明： 3.1 CSS布局的理解： CSS布局是指如何在网页上合理地...
最新大厂前端面试题-面试指南css篇面试题.docx
06-06
前端面试指南 - CSS 篇面试题 本文将详细讲解 CSS 相关知识点，涵盖 CSS 初始化、margin 重合问题、盒模型问题、隐藏元素问题等多个方面。 考点 1：初始化样式问题 CSS 初始化是指开发者对浏览器的默认样式进行...
宏任务和微任务的执行顺序
四月
08-04 917
参考文章：https://www.jianshu.com/p/5b4c4756e461 一、宏任务（macrotask） 1、发起者：宿主（Node、浏览器） 2、事件：script(整体代码)、setTimeout、setInterval、setImmediate(Node.js 环境)、UI事件、I/O（Node.js） 3、运行：后运行 二、微任务（microtask） 1、发起者: JS引擎 2、事件：Promise、Mutai
vue 是什么？与其他框架对比？什么是MVVM？
四月
08-03 852
一：vue是什么？ vue是一套用于构建用户界面的渐进式框架。 与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层，不仅易于上手， 1>还便于与第三方库或既有项目整合。 2>另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。 vue 框架的特点？ * MVVM框架模式 * 轻量级，灵活，容易上手 * 数据驱动 * 组件化（单文件组件） * ...
插值表达式和指令 .self 和 .stop的区别 以及.capture
四月
08-06 799
一：插值表达式{{xxx}}： 在模板中输出变量，在插值表达式中是可以写javascriptbiao表达式的， 例如{{1+2}},但是不可以写语句。 <!-- 插值表达式 --> <h2>插值表达式</h2> <div> <div>{{message}}</div> <div>{{message+'信息'}}</...
列表循环和条件判断
四月
08-09 696
条件判断：一般都用v-show和v-if v-show和v-if都是用来做条件渲染的 使用方法： <div v-if="isShow">v-if显示/隐藏</div> <div v-show="isShow">v-show显示/隐藏</div> 区别 v-show： 控制DOM元素显示，其实控制的是css样式，也就是display:noe v-if进行判断，在浏览器中预览，你会发现整个DOM元素都不见了 v-
vue中的计算属性computed
四月
08-06 405
计算属性的特性：当计算属性依赖的内容发生改变时，才会重新执行计算。 若依赖的内容没有变化，则返回的是之前计算的结果，而不会再次执行函数，这 大大优化 了性能 computed的使用： <div>总数：{{total}}</div> // computed 用法 <div>总数：{{getTotal()}}</div&gt...
PHP面试必备：基础篇-传智播客面试宝典
"传智播客的PHP面试宝典第一版(上卷基础篇)主要涵盖了PHP相关的基础知识，包括HTML和CSS等前端技术。这份资料由韩顺平和王超平搜集整理，旨在帮助学习者准备PHP面试，通过各种题目和实例解析来提升面试者的技能水平...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值