（三）CSS【不多说了，前端面试 CSS 是必考知识，不过关直接回家】
2024-05-24 03:51:23
CSS
- HTML
- 如何理解HTML语义化？
- 默认情况下，哪些HTML标签是块级元素、哪些是内联元素？
- CSS
- 布局
- 盒子模型的宽度如何计算？
- margin纵向重叠问题
- margin负值的问题
- BFC理解和应用
- 形成BFC的常见条件
- 形成BFC的常见应用
- float布局的问题，以及clearfix
- 如何实现圣杯布局和双飞翼布局
- 圣杯布局和双飞翼布局的目的
- 圣杯布局和双飞翼布局的技术总结
- 手写clearfix
- flex实现一个三点的色子
- 定位
- absolute和relative分别根据什么定位？
- 居中对齐有哪些实现方式？
- 水平居中
- 垂直居中
- 图文样式
- line-height的继承问题
- 响应式
- rem是什么？
- 如何实现响应式？
- CSS3
- 关于CSS3动画
HTML
如何理解HTML语义化？
- 让人更容易读懂（增加代码可读性）
- 让搜索引擎更容易读懂（SEO）
默认情况下，哪些HTML标签是块级元素、哪些是内联元素？
- display:block/table：有div h1 h2 table ul ol p 等
- display:inline/inline-block：有span img input button 等
CSS
布局
盒子模型的宽度如何计算？
offsetWidth = （内容宽度 + 内边距 + 边框），无外边距
//div1的offsetWidth是多大？
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒模型</title><style type="text/css">#div1 {width: 100px;padding: 10px;border: 1px solid #ccc;margin: 10px;}#div2 {width: 100px;padding: 10px;border: 1px solid #ccc;margin: 10px;box-sizing: border-box;}</style>
</head>
<body><div id="div1">this is div1</div><div id="div2">this is div2</div><script>console.log(document.getElementById('div1').offsetWidth) //122console.log(document.getElementById('div2').offsetWidth) //100</script>
</body>
</html>
// 启动服务访问页面
npm install -p http-server
http-server -p 8881
margin纵向重叠问题
相邻元素的margin-top和margin-bottom会发生重叠
空白内容的<p></p>也会重叠
//AAA和BBB之间的距离是多少？15px
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>margin 纵向重叠</title><style type="text/css">p {font-size: 16px;line-height: 1;margin-top: 10px;margin-bottom: 15px;}</style>
</head>
<body><p>AAA</p><p></p><p></p><p></p><p>BBB</p></body>
</html>
margin负值的问题
对margin的top left right bottom设置负值，有何效果？
- margin-top和margin-bottom，元素向上、向左移动
- margin-right负值，右侧元素左移，自身不受影响
- margin-bottom负值，下方元素上移，自身不受影响
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>margin 负值</title><style type="text/css">body {margin: 20px;}.float-left {float: left;}.clearfix:after {content: '';display: table;clear: both;}.container {border: 1px solid #ccc;padding: 10px;}.container .item {width: 100px;height: 100px;}.container .border-blue {border: 1px solid blue;}.container .border-red {border: 1px solid red;}</style>
</head>
<body><p>用于测试 margin top bottom 的负数情况</p><div class="container"><div class="item border-blue">this is item 1</div><div class="item border-red">this is item 2</div></div><p>用于测试 margin left right 的负数情况</p><div class="container clearfix"><div class="item border-blue float-left">this is item 3</div><div class="item border-red float-left">this is item 4</div></div></body>
</html>
BFC理解和应用
什么是BFC？如何应用？
- Block format context，块级格式化上下文
- 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件
- float不是none
- position不是absolute或fixed
- overflow不是visible
- display是flex inline-block等
形成BFC的常见应用
- 清除浮动
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style type="text/css">.container {background-color: #f1f1f1;}.left {float: left;}.bfc {overflow: hidden; /* 触发元素 BFC */}</style>
</head>
<body><div class="container bfc"><img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/><p class="bfc">某一段文字……</p></div>
</body>
</html>
float布局的问题，以及clearfix
如何实现圣杯布局和双飞翼布局
圣杯布局和双飞翼布局的目的
- 三栏布局，中间一栏最先加载和渲染（内容最重要）
- 两侧内容固定，中间内容随着宽度自适应
- 一般用于PC网页
圣杯布局和双飞翼布局的技术总结
- 使用float布局
- 两侧使用margin负值，以便和中间内容横向重叠
- 防止中间内容被两侧覆盖，一个用padding一个用margin
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>圣杯布局</title><style type="text/css">body {min-width: 550px;}#header {text-align: center;background-color: #f1f1f1;}#container {padding-left: 200px;padding-right: 150px;}#container .column {float: left;}#center {background-color: #ccc;width: 100%;}#left {position: relative;background-color: yellow;width: 200px;margin-left: -100%;right: 200px;}#right {background-color: red;width: 150px;margin-right: -150px;}#footer {text-align: center;background-color: #f1f1f1;}/* 手写 clearfix */.clearfix:after {content: '';display: table;clear: both;}</style>
</head>
<body><div id="header">this is header</div><div id="container" class="clearfix"><div id="center" class="column">this is center</div><div id="left" class="column">this is left</div><div id="right" class="column">this is right</div></div><div id="footer">this is footer</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>双飞翼布局</title><style type="text/css">body {min-width: 550px;}.col {float: left;}#main {width: 100%;height: 200px;background-color: #ccc;}#main-wrap {margin: 0 190px 0 190px;}#left {width: 190px;height: 200px;background-color: #0000FF;margin-left: -100%;}#right {width: 190px;height: 200px;background-color: #FF0000;margin-left: -190px;}</style>
</head>
<body><div id="main" class="col"><div id="main-wrap">this is main</div></div><div id="left" class="col">this is left</div><div id="right" class="col">this is right</div>
</body>
</html>
手写clearfix
/* 手写 clearfix */
.clearfix:after {content: '';display: table;clear: both;
}
.clearfix {*zoom:1;/* 兼容IE低版本 */
}
flex实现一个三点的色子
//常见语法回顾
flex-direction
justify-content
align-items
flex-wrap
align-self<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>flex 画骰子</title><style type="text/css">.box {width: 200px;height: 200px;border: 2px solid #ccc;border-radius: 10px;padding: 20px;display: flex;justify-content: space-between;}.item {display: block;width: 40px;height: 40px;border-radius: 50%;background-color: #666;}.item:nth-child(2) {align-self: center;}.item:nth-child(3) {align-self: flex-end;}</style>
</head>
<body><div class="box"><span class="item"></span><span class="item"></span><span class="item"></span></div>
</body>
</html>
定位
absolute和relative分别根据什么定位？
- relative根据自身定位
- absolute依据最近一层的定位元素定位
//定位元素
absolute relative fixed
body
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>absote relative 定位问题</title><style type="text/css">body {margin: 20px;}.relative {position: relative;width: 400px;height: 200px;border: 1px solid #ccc;top: 20px;left: 50px;}.absolute {position: absolute;width: 200px;height: 100px;border: 1px solid blue;top: 20px;left: 50px;}</style>
</head>
<body><p>absolute 和 relative 定位问题</p><div class="relative"><div class="absolute">this is absolute</div></div></body>
</html>
居中对齐有哪些实现方式？
水平居中
- inline元素：text-align:center
- block元素：margin:auto
- absolute元素：left:50% + margin-left负值
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>水平对齐</title><style type="text/css">.container {border: 1px solid #ccc;margin: 10px;padding: 10px;}.item {background-color: #ccc;}.container-1 {text-align: center;}.container-2 .item {width: 500px;margin: auto;}.container-3 {position: relative;height: 100px;}.container-3 .item {width: 300px;height: 100px;position: absolute;left: 50%;margin-left: -150px;}</style>
</head>
<body><div class="container container-1"><span>一段文字</span></div><div class="container container-2"><div class="item">this is block item</div></div><div class="container container-3"><div class="item">this is absolute item</div></div>
</body>
</html>
垂直居中
- inline元素：line-height的值等于height值
- absolute元素：ltop:50% + margin-top负值
- absolute元素：transform(-50%,-50%)
- absolute元素：top,left,bottom,right = 0 + margin:auto
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>垂直对齐</title><style type="text/css">.container {border: 1px solid #ccc;margin: 10px;padding: 10px;height: 200px;}.item {background-color: #ccc;}.container-1{text-align: center;line-height: 200px;height: 200px;}.container-2 {position: relative;}.container-2 .item {width: 300px;height: 100px;position: absolute;left: 50%;margin-left: -150px;top: 50%;margin-top: -50px;}.container-3 {position: relative;}.container-3 .item {width: 200px;height: 80px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%)}.container-4 {position: relative;}.container-4 .item {width: 100px;height: 50px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}</style>
</head>
<body><div class="container container-1"><span>一段文字</span></div><div class="container container-2"><div class="item">this is item</div></div><div class="container container-3"><div class="item">this is item</div></div><div class="container container-4"><div class="item">this is item</div></div>
</body>
</html>
图文样式
line-height的继承问题
- 写具体数值，如30px，则继承该值（比较好理解）
- 写比例，如2/1.5，则继承该比例（比较好理解）
- 写百分比，如200%，则继承计算出来的值（考点）
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>line-height 继承问题</title><style type="text/css">body {font-size: 20px;line-height: 200%;/* 30px，1.5,200% */}p {background-color: #ccc;font-size: 16px;/* p标签的行高是多少 *//* 30px，24px(1.5 * 16),40px(20 * 200%) */}</style>
</head>
<body><p>这是一行文字</p>
</body>
</html>
响应式
rem是什么？
rem是一个长度单位
- px，绝对长度单位，最常用
- em，相对长度单位，相对于父元素，不常用
- rem，相对长度单位，相对于根元素，常用于响应式布局
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>rem 演示</title><style type="text/css">html {font-size: 100px;}div {background-color: #ccc;margin-top: 10px;font-size: 0.16rem;}</style>
</head>
<body><p style="font-size: 0.1rem">rem 1</p><p style="font-size: 0.2rem">rem 1</p><p style="font-size: 0.3rem">rem 1</p><div style="width: 1rem;">this is div1</div><div style="width: 2rem;">this is div2</div><div style="width: 3rem;">this is div3</div></body>
</html>
如何实现响应式？
- media-query，根据不同的屏幕宽度设置根元素font-size
- rem，基于根元素的相对单位
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>响应式布局</title><style type="text/css">@media only screen and (max-width: 374px) {/* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */html {font-size: 86px;}}@media only screen and (min-width: 375px) and (max-width: 413px) {/* iphone6/7/8 和 iphone x */html {font-size: 100px;}}@media only screen and (min-width: 414px) {/* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */html {font-size: 110px;}}body {font-size: 0.16rem;}#div1 {width: 1rem;background-color: #ccc;}</style>
</head>
<body><div id="div1">this is div</div>
</body>
</html>
- rem的弊端：“阶梯”性
- 网页视口尺寸
window.screen.height //屏幕高度
window.innerHeight //网页视口高度
document.body.clientHeight //body高度
- vw/vh
vh 网页视口高度的1/100
vw 网页视口宽度的1/100
vmax取两者最大值，vmin取两者最小值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vw vh test</title><style>body {margin: 0;padding: 0;}#container {background-color: red;width: 10vw;height: 10vh;}</style>
</head>
<body><p>vw vh 测试</p><div id="container"></div><script>// window.innerHeight === 100vh// window.innerWidth === 100vw</script>
</body>
</html>
CSS3
关于CSS3动画
（三）CSS【不多说了，前端面试 CSS 是必考知识，不过关直接回家】相关推荐
- 百度糯米android面试题,前端面试—CSS面试题汇总
前端面试-CSS面试题汇总 博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 1.flex常见面试题 Flex 是 Flexible ...
- 在各大厂的秋招春招中，笔试面试都是必考的
进修嵌入式须要那些内容? 数据构造与算法 这局部是程序员的必修课.在各大厂的秋招春招中,笔试面试都是必考的.常见的数据构造如链表,二叉树,堆,队列,常见排序算法及其改进(快排,归并,冒泡,插入)等都是 ...
- 2.前端面试 css篇
一.CSS基础 1. CSS选择器及其优先级 选择器 格式 优先级权重 id选择器 #id 100 类选择器 #classname 10 属性选择器 a[ref="eee"] 10 ...
- 前端面试CSS自检（上）CSS基础（先看问题 自己自述一遍 不会再看答案 ）
推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...
- 前端面试CSS自检（下）页面布局、定位与浮动和场景应用（先看问题 自己自述一遍 不会再看答案 ）
推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...
- 【前端面试 | css面试题整理】
层叠 层叠:对一个元素多次设置同一个样式,程序只会使用最后一次设置的属性值. 优势 多个文档的样式可以通过使用一个站点来控制多个html元素可以包含许多文档,可以在其中创建类对样式进行分组,最好使用选 ...
- 前端面试题目搜集——理论知识篇
一.理论知识 1.1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务器端响应http请求,浏览器 ...
- 关于三次握手与四次挥手面试官想考我们什么？--- 不看后悔系列
在面试中,三次握手和四次挥手可以说是问的最频繁的一个知识点了,我相信大家也都看过很多关于三次握手与四次挥手的文章,今天的这篇文章,重点是围绕着面试,我们应该掌握哪些比较重要的点,哪些是比较被面试官给问 ...
- 前端面试几个基础知识自查
1.JS中使用typeof能得到的哪些类型? <script>// 基本数据类型// number类型var num = 1;console.log(typeof num);//返回的是n ...
最新文章
- 拼接( read----contigs)和组装(contigs---Scaffolds)
- java元婴期(30)----java进阶（springmvc（4）---参数绑定（下）springmvc校验异常处理）
- CENTOS6.4安装vnc-server
- 【朝夕技术专刊】WebApi部署多服务器配置Nginx负载均衡
- 百度地图 Android SDK - 个性化地图
- 为什么要做漏洞扫描呢？
- 控制反转_.NET Core ASP.NET Core Basic 12 控制反转与依赖注入
- 数据：DeFi总锁仓量突破230亿美元
- [转载] python类内部成员的访问及外部访问（入门）
- 2.支付平台架构：业务、规划、设计与实现 --- 收银台系统
- Python开发工具PyCharm中文版安装与配置详细图文教程
- 雷达信号处理基础ppt
- C#即时通讯（局域网QQ）
- 中望lisp加密 浩辰_浩辰CAD2010的VLISP接口加载贱人工具箱
- win10访问服务器共享文件夹密码不对,WIN10 Samba文件共享的设置方法，解决不能访问和密码错误的问题...
- python 可视化 ploty 画3dmesh网格图
- 2019 华为手机录屏adb命令不识别
- SqlHelper类的使用
- 51单片机之外部中断方式 ——— INT0 中断
- 破壳问答 | 第一期