前端技能树，面试复习第 6 天 - CSS 篇（5）: 布局 | 垂直居中 | 实现一个形状

已于 2022-07-14 07:57:54 修改
阅读量231 收藏 6
点赞数 7
CC 4.0 BY-SA版权
分类专栏： 前端面试复习笔记 文章标签： css 前端 面试 两栏布局 三栏布局
于 2022-06-12 16:34:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ImagineCode/article/details/125246821
本文介绍了前端面试中关于CSS的布局技巧，包括两栏布局、三栏布局的多种实现方式，以及如何实现垂直居中。此外，还讲解了如何使用CSS创建三角形和扇形，以及实现一个宽高自适应的正方形。

1. 两栏布局的实现

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：

  • 利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。
.outer {
   
   
  height: 100px;
}
.left {
   
   
  f
了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端技能树，面试复习第 29 天—— 简述 Babel 的原理 | Webpack 构建流程 | Webpack 热更新原理 | Git 常用命令
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
07-21 1515
前端修罗场提供全网最专业的前端优质文章与社区服务，为应届生，初中级前端工程师提供全面、优质的面试服务、技能提升、职场解惑服务！内容包含：前端面试辅导，前端面试题，前端交流，前端答疑，前端基础知识，前端知识体系，技能树搭建，Javascript，CSS，CSS3，HTML，React，Vue，小程序，前端简历，职业交流，远程工作，英文交流，英文提升，外企，互联网，国企，大厂，牛客面试题，掘金面试题，面经，优质前端文章分享...
CSS - 利用 vertical-align:middle 垂直居中元素容器
🏆 前端领域优质创作者
08-02 3898
前言 以前总是以为 vertical-align 与 text-align 是同样的道理，一个是垂直居中，一个是水平居中。 vertical - align vertical-align 属性设置元素的垂直对齐方式，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，允许指定负长度值和百分比值。 这会使元素降低而不是升高，在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 【第一种用法】： 先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果
HTML+CSS小实例（进度条）
qq_45846929的博客
07-22 322
仅用HTML+CSS实现好看的进度条小实例
前端面试题----html css
qq_45422185的博客
12-22 586
前端面试之HTML、CSS
19 前端css面试核心知识点复习1：面试基础知识超详细总结
c5dnuser的博客
05-09 541
a ba > bdiff ： 后代 - 子代。
前端基础知识总结---CSS篇
Web前端开发工程师
09-09 2690
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 选择符有哪些？ 3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 4.伪类与伪元素的区别 5.CSS 中哪些属性可以继承？ 6.CSS 优先级算法如何计算？ 7.关于伪类 LVHA 的解释? 8.CSS3 新增伪类有那些？ 9.如何居中 div？ 10.disp
css面试复习
weixin_54327001的博客
05-25 1895
常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;padding-top、padding-right、padding-bottom、padding-left的简写属性。 font-style、font-variant、font-weight可以随意调换顺序，也可以省略。 min-height：最小高度，无论内容多少，高度都大于或等于min-height。
前端宽度一至显示宽度不一致_前端硬核面试专题之 CSS 55 问
weixin_36046580的博客
12-30 1947
前言本文讲解前端面试的 CSS 的内容。复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！注意：文章的题与题之间用下划线分隔开，答案仅供参考。笔者技术博客首发地址 GitHub，欢迎关注。CSS盒子模型的理解 ?标准模式和混杂模式(IE)。在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止...
大前端高频面试题详解 确定不看看？（持续更新）
starry-sea1412的弃坑之路
05-28 2881
在前端面试中，除了要求掌握 HTML、CSS、JavaScript 等基础知识外，还需要对框架、工具、技术栈等有深入的理解和应用能力。针对这样的需求，我准备了一篇前端面试文章介绍的简介，希望能够帮助读者更好地了解前端面试的内容。
前端经典面试500题【上】
01-31 8736
前端经典面试500题是一篇非常流行的前端面试笔记和指南，可以帮助准备面试的开发人员更好地了解和准备常见面试问题。该书包含了以下主题： 1. HTML，CSS和JavaScript基础知识； 2. DOM，BOM及常用API； 3. Ajax原理以及相关技术； 4. 前端自动化构建工具，如Gulp、Grunt和Webpack等； 5. 前端框架，如AngularJS、React和Vue.js等； 6. 浏览器兼容性问题； 7. 性能优化； 8. 安全问题； 9. 移动端开发问题。
前端+AI：CSS3（二）
luckypian
10-18 900
本文介绍了CSS的核心知识点，包括选择器、文本样式、三大特性和盒子模型。选择器部分详细讲解了基础选择器、关系选择器、伪类和伪元素选择器的用法；文本样式部分涵盖字体样式和布局；三大特性包括继承性、层叠性和优先级；盒子模型部分重点解析了圆角边框、外边距问题和尺寸计算等实用技巧。文章还提供了CSS调试小技巧，适合前端开发者系统学习或复习CSS基础知识。
前端CSS：CSS设置水平垂直居中的方法
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-28 1397
掌握了这些方法和技术后，你就可以在各种场景下灵活地实现元素的水平垂直居中。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，CSS Grid 是一种更为现代的布局方法，它同样可以用来实现元素的水平垂直居中。当需要居中多个元素时，可以将它们放在一个共同的容器中，并对该容器应用居中样式。Flexbox 是现代浏览器的一项强大特性，它可以轻松地实现元素的居中。
前端必知必会-CSS 布局水平和垂直对齐
qq_24018193的博客
08-22 2032
本文介绍了的CSS 布局水平和垂直对齐使用，如有问题欢迎私信和评论。
前端面试--CSS篇
The_upside_of_down的博客
09-07 1888
前端面试--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篇
程序员小寒的博客
11-23 719
当涉及到网站的性能优化时，CSS 的优化是一个非常重要的方面。如果你的 CSS 太复杂，那么你的网站可能会像一个慢吞吞的乌龟一样缓慢地加载和渲染，影响用户的留存网站的转化率以及网站的体验和传播等，所以对于 CSS 优化还是非常需要的，本文将介绍一些 CSS 性能优化的技巧，帮助你在编写 CSS 代码时提高性能。本文主要通过CSS 加载性能优化CSS 选择器性能优化CSS 属性性能优化CSS 动画性能优化和CSS 渲染性能优化这些方向介绍了 CSS 的性能优化技巧。
CSS基础详解(1)
Coding...
11-22 1087
CSS（层叠样式表）是控制网页外观的声明式语言，通过选择器和属性值定义元素样式。CSS语法基于规则，由选择器、属性和值组成，支持多种选择方式：元素类型、类、ID、属性状态及伪类/伪元素。CSS可实现文本样式、布局设计和动画效果，通过<link>标签与HTML文档关联。选择器可组合使用，但语法错误会导致整条规则失效。CSS的核心特性是层叠优先级机制，确保复杂网站的样式规则有序应用。
CSS svg
xiangxiongfly
11-23 641
SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形，由 W3C 指定，支持无损缩放、交互性和动态效果。特点：https://www.iconfont.cn/ SVG图标必须包裹在 标签内。结构：获取svg描边的长度：在 svg 的 path 上定义id，通过该 id 在控制台执行JavaScript代码：id名.getTotalLength()
CSS 和 JS 如何阻塞浏览器渲染 DOM
最新发布
YSbnhoffer的博客
11-25 685
CSS和JS会阻塞浏览器渲染DOM：CSS会阻塞渲染，JS会阻塞解析。这是因为浏览器需要完整加载CSS才能正确计算样式，而JS可能修改DOM结构需先执行。优化策略包括：CSS方面可压缩合并文件、异步加载非关键CSS；JS方面使用async/defer属性、代码分割；还可利用CDN和缓存减少资源加载时间。通过合并文件、延迟加载等技巧可显著提升页面加载速度，改善用户体验。
css主流布局
2403_87953847的博客
11-22 916
CSS 布局是前端开发的核心，经历了从早期浮动、定位到现代 Flexbox 和 Grid 的演变。下面将系统地介绍当前主流和必须掌握的 CSS 布局方案。布局演进简图。
评论 15
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蟹蟹蟹风流

期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值