HTML + CSS 高频面试题

盒模型

CSS盒模型本质是一个盒子,封装周围的HTML元素,包括margin,border,padding,和content。

根据盒子大小的计算方式不同,盒模型分为两种:
1. 标准盒模型:box-sizing: content-box。设置 width 和 height 设置的是 content 的大小。盒子实际的宽度需要加上两边的 border 和 padding。
2. 怪异盒模型(IE盒模型):box-sizing: border-box。设置 width 和 height 设置的是盒子的大小,如果有 padding 和 border 会压缩 content 区域。

HTML语义化

HTML语义化简单呢来说就是正确的标签做正确的事。给某个内容使用恰当的标签,能使页面拥有良好清晰的结构。

常见的语义化标签:
header、footer、main、h1-h6等。

优点:
1. 在没有 css 的情况下,页面也能呈现出清晰的结构。
2. 有助于SEO和搜索引擎建立良好的沟通,有助于爬虫抓取更多的有效信息。(爬虫是依赖于标签来确定上下文和关键词的权重的。)
3. 增强代码的可读性,方便团队开发和维护。

对浮动的理解

浮动的作用:
1. 对于图片,浮动可以实现文字环绕图片。
2. 对于块级元素,浮动可以使块级元素横向排列。
3. 对于行内元素,浮动可以设置宽度,同时可以对齐排列盒子。

浮动的特点:
浮动会脱离文档流,当父元素不设置高度的时候,需要子元素撑开,而子元素浮动就会导致父元素高度塌陷的问题。

解决塌陷问题:(2, 3, 4也是清除浮动的方法)
1. 给父元素设置高度。
2. 给父元素设置overflow: hidden。
3. 在下方创建一个空白元素,添加样式clear: both。
4. 给父级元素添加伪类::after: {content: '', clear: both, display: table}

样式优先级规则

!import > 行内 > id > class选择器/伪类选择器 > 元素选择器/伪元素

!import: 10000
行内:1000
id选择器:100
class选择器/伪类选择器:10
元素选择器/伪元素:1
继承/通配符:0

CSS尺寸设置单位

共有五个单位,px,rem,em,vw,vh。除了px为绝对单位其余都是相对的。

px: 绝对长度单位。大小取决于屏幕分辨率。
rem: 相对长度,相对于根元素像素。
em: 相对长度,相对于当前元素字体大小的倍数,自己没有设置font-size时相对于父类。
vw: 视口宽度。
vh: 视口高度。
 

对BFC的理解

BFC全称:block Formatting Content,块级格式化上下文。简单来说BFC是页面中的一个隔离的独立容器,让空间里的子元素不会影响到外面的元素布局。

BFC可以解决什么问题:
1. 使用浮动,父元素高度塌陷的问题。(最常见给父元素设置:overflow: hidden)
2. 解决上下相邻两个元素外边距折叠。(可以给其中一个元素加上display: inline-block)

怎样触发BFC:
* 浮动
* overflow: hidden
* disply: flex / inline-block
* position: absolute / fixed

元素水平垂直居中方法

1. 绝对定位:position: absolute; left: -50%; top: -50%; transform: translate(-50%, -50%)
2. flex布局:display: flex; align-items: center; justify-content: center
3. table-cell:父元素{ display: table-cell; vertical-align: middle; text-align: center },子元素{ display: inline-block }。
4. display: grid网格布局(和flex布局类似,只是把 display: flex 改为 display: grid。兼容性ie10以上。)

三栏布局实现方案

三栏布局是什么:两端固定,中间自适应。

方案:
1. flex布局:display:flex,左右定宽,中间flex:1
2. 绝对定位:两边定宽分别定位到两边,中间宽度100%-两边宽度,中间margin-left: 左边宽度。
3. 圣杯布局:
利用浮动和负边距来实现。父元素设置左右padding,中间内容元素需要放在前面。三列都设置float: left。再给左边元素margin-left: -100%,右边元素margin-left: 负数元素宽度,再利用相对定位定位到两边。(需要注意的是,当中间宽度小于两边宽度时,布局会错乱,双飞翼没有这个问题)

<div class="father"><div class="main col"></div><div class="left col"></div><div class="right col"></div>
</div>
.father{padding: 0 120px;				/*对整体div设置内边距,之后将两边div移到内容区以外*/
}
.col{float: left;					/*使用浮动,使用margin-left就可以移到上一行*/height: 200px;					position: relative;             /*采用相对定位,相对自己的位置挪出去*/
}
.left,.right{width: 120px;					/*设置两边的宽度*/
}
.left{background-color: blue;margin-left: -100%;right: 120px;					/*把图像的右边缘设置在其包含元素右边缘向左 120 像素的位置*/
}
.right{background-color: green;margin-left: -120px;left: 120px;
}									
.main{width: 100%;background-color: pink;
}

4. 双飞翼布局:
跟圣杯模式写法类似,左右位置的保留不需要用过父元素padding,给中间元素再加一个子元素加margin预留左右位置。

<div class="father"><div class="main col"><div style="margin: 0 120px"></div></div><div class="left col"></div><div class="right col"></div>
</div>
.father{overflow: hidden; // 去除父元素浮动
}
.col{float: left;					/*使用浮动,使用margin-left就可以移到上一行*/height: 200px;					
}
.left,.right{width: 120px;					/*设置两边的宽度*/
}
.left{background-color: blue;margin-left: -100%;
}
.right{background-color: green;margin-left: -120px;
}									
.main{width: 100%;background-color: pink;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/701443.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring Boot 笔记 025 主界面

1.1 路由搭建 1.1.1 安装vue router npm install vue-router4 1.1.2 在src/router/index.js中创建路由器&#xff0c;并导出 import { createRouter, createWebHistory } from vue-router//导入组件 import LoginVue from /views/Login.vue import LayoutVue from /views/La…

第9章 包和进程管理

9.1 软件安装 在 Linux 中安装软件分为以下三种方式&#xff1a; 源码安装 rpm包安装 yum/dnf安装 9.1.1 源码安装 软件准备 我们接下通过一个源码程序来演示如何安装这种软件。 [rootjock ~]# lltotal 60-rw-r--r--. 1 root root 59172 Feb 22 15:43 tree-2.0.4.tgz​#…

Aidex移动端项目入门

运行效果 项目源码下载 若依-ruoyi-AiDex-Uniapp: 若依-Ruoyi APP 移动解决方案&#xff0c;基于uniappuView封装的一套基础模版&#xff0c;开箱即用&#xff0c;免费开源&#xff0c;一份代码多终端适配&#xff0c;支持H5、支付宝小程序、微信小程序、APP&#xff0c;实现了…

改进Yolov5目标检测与单目测距 yolo速度测量-pyqt界面-yolo添加注意力机制

当设计一个结合了 YOLOv5 目标检测、单目测距与速度测量以及 PyQt 界面的毕业设计时&#xff0c;需要考虑以下几个方面的具体细节&#xff1a; 计算机视觉、图像处理、毕业辅导、作业帮助、代码获取&#xff0c;私聊会回复! YOLOv5 目标检测&#xff1a; 首先&#xff0c;选择…

B树的介绍

R-B Tree 简介特性B树特性m阶B树的性质&#xff08;这些性质是B树规定的&#xff09; B树的搜索B树的添加B树的删除——非叶子结点 简介 R-B Tree又称为Red-Black Tree&#xff0c;红黑树。是一种特殊的二叉查找树&#xff0c;红黑树的每个节点上都有存储为表示结点的颜色&…

Camunda7.18流程引擎启动出现Table ‘camunda_platform_docker.ACT_GE_PROPERTY‘的解决方案

文章目录 1、问题描述2、原因分析3、解决方案3.1、方案一&#xff1a;降低mysql版本3.2、方案二&#xff1a;增加nullCatalogMeansCurrent参数&#xff08;推荐&#xff09; 4、总结 1、问题描述 需要在docker中&#xff0c;部署Camunda流程引擎。通过启动脚本camunda-platfor…

分布式架构(分布式ID+分布式事务)

分布式架构 分布式事务产生的场景&#xff1a; 跨JVM进程产生的分布式事务 单体系统访问多个数据库实例 多服务访问同一个数据库实例 CAP理论 C&#xff1a;一致性&#xff0c;指写操作后的读操作可以读取到最新的数据状态&#xff0c;当数据分布在多个节点上&#xff0…

flet 读取本地音频文件的信息,歌名,歌手,歌曲长度,封面

请先安装 pip install flet, tinytag 组件 tinytag 是用来读取音频文件的信息的 测试用最好找一个有封面的音频的文件, 我是windows电脑,打开预览模式,选中文件时候能够右边显示图片, 如下,我电脑上某个音频文件的封面 import flet as ft from tinytag import TinyTag import…

自动驾驶---行业发展及就业环境杂谈

进入21世纪以来&#xff0c;自动驾驶行业有着飞速的发展&#xff0c;自动驾驶技术&#xff08;L2---L3&#xff09;也逐渐落地量产到寻常百姓家。虽然最早期量产FSD的特斯拉有着深厚的技术积累&#xff0c;但是进入2010年以后&#xff0c;国内的公司也逐渐发展起来自己的自动驾…

题目 1264: 防御导弹

题目描述: 某国为了防御敌国的导弹袭击&#xff0c;发展出一种导弹拦截系统。但是这种导弹拦截 系统有一个缺陷&#xff1a;虽然它的第一发炮弹能够达到任意的高度&#xff0c;但是以后每一发炮弹都不能高于前一发的高度。某天&#xff0c;雷达捕捉到敌国的导弹来袭。由于该系统…

YOLOv5算法进阶改进(18)— 引入动态蛇形卷积DSConv(ICCV2023 | 用于管状结构分割)

前言:Hello大家好,我是小哥谈。动态蛇形卷积(Dynamic Snake Convolution,简称DSConv)是一种用于图像处理和计算机视觉任务的卷积神经网络(CNN)操作。它是在传统的卷积操作基础上引入了动态蛇形路径的概念,以更好地捕捉图像中的细节和边缘信息。传统的卷积操作是在固定的…

读书笔记-增强型分析:AI驱动的数据分析、业务决策与案例实践

目录 前言 运用人工智能技术&#xff0c;可以使人类社会变得更美好。人们总是期待产品更适合、服务更贴心、生活更便利。在实践中&#xff0c;技术给企业赋能&#xff0c;企业通过优质的产品和服务满足社会&#xff0c;提升人类福祉。很多金融企业已经开始尝试向潜在客户推送…

Uniapp小程序开发-底部tabbar的开发思路

文章目录 前言一、uniapp 实现 tabbar二、图标使用网络图片后端返回tabbar信息uniapp方式中的setTabBarItem 总结 前言 记录uniapp 开发小程序的底部tabbar &#xff0c;这里讨论的不是自定义tabbar的情况。而是使用wx.setTabBarItem(Object object) 这个api的情况。关于custo…

【Linux进程】进程状态---进程僵尸与孤儿

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1.进程排队2.进程状态…

【Ubuntu】通过网线连接两台电脑以实现局域网连接的方法

有时我们需要将多台计算机连接在一起&#xff0c;以便实现数据共享、资源访问等功能。本文将介绍如何通过网线连接两台运行Ubuntu操作系统的电脑&#xff0c;以便它们能够直接通信&#xff0c;从而实现局域网连接。 1. 准备工作 在开始之前&#xff0c;请准备好&#xff1a; …

[云原生] 二进制安装K8S(上)搭建单机matser、etcd集群和node节点

一、单机matser预部署设计 目前Kubernetes最新版本是v1.25&#xff0c;但大部分公司一般不会使用最新版本。 目前公司使用比较多的&#xff1a;老版本是v1.15&#xff0c;因为v1.16改变了很多API接口版本&#xff0c;国内目前使用比较多的是v1.18、v1.20。 组件部署&#xff…

中序遍历+二分,LeetCode 2476. 二叉搜索树最近节点查询

一、题目 1、题目描述 给你一个 二叉搜索树 的根节点 root &#xff0c;和一个由正整数组成、长度为 n 的数组 queries 。 请你找出一个长度为 n 的 二维 答案数组 answer &#xff0c;其中 answer[i] [mini, maxi] &#xff1a; mini 是树中小于等于 queries[i] 的 最大值 。…

WordPress前端如何使用跟后台一样的Dashicons图标字体?

很多站长都喜欢在站点菜单或其他地方添加一些图标字体&#xff0c;常用的就是添加Font Awesome 图标和阿里巴巴矢量库图标iconfont。其实我们使用的 WordPress 本身就有一套管理员使用的官方图标字体 Dashicons&#xff0c;登录我们站点后台就能看到这些图标字体。那么有没有可…

力扣思路题:丑数

此题的思路非常奇妙&#xff0c;可以借鉴一下 bool isUgly(int num){if(num0)return false;while(num%20)num/2;while(num%30)num/3;while(num%50)num/5;return num1; }

vim 寄存器

文章目录 寄存器 查看调取寄存器值寄存器类型 寄存器 查看 查看所有寄存器值&#xff1a;:reg 查看指定寄存器值&#xff1a;:reg {register_name} 调取寄存器值 NORMAL Mode(一般模式)&#xff1a;"{register_name} COMMAND MODE(命令模式)&#xff1a;"寄存器…