[前端面试]HTML AND CSS

server/2024/11/19 23:24:55/

HTML

html_2">html语义化标签的理解

是什么:
在布局页面的时候,根据内容的结构与含义,选择合适的带语义的html标签
如header,footer,nav,article,main,aside,h标签等

好处

  1. 增强代码可读性,有利于开发者开发与维护
  2. 有利于seo搜索引擎优化
  3. 有利于在网络卡顿时,正常显示页面结构(虽然没有样式),提高用户体验

html5_15">html5的新特性

添加语义化标签,main,nav,article,header,footer

添加媒体标签,audio,video,source标签

新增一些api,webstorage,拖放api,canvas标签,geolocation api

websockets

行内元素块级元素的区别

行内元素:

一行显示,设置宽高不生效,span,a,img,b,i,

块级元素:

换行显示,设置宽高生效,div,p,h,ul,li

转换:

display:block

display:inlineblock

CSS

css_47">css选择器有哪些,权重

id选择器
类选择器|属性选择器|伪类选择器:hover
标签选择器|伪元素选择器::before
通配符选择器

css_54">css优先级

  1. !import
  2. 行内样式 > 嵌入式与外联
  3. 选择器优先级
  4. 继承样式

CSS3新增特性

盒子模型

flex和grid布局

css变量

伪类与伪元素

动画

变形与过渡

盒子模型的理解

what
在布局网页的时候,可以把一个个元素看作一个盒子
具有margin,border,padding,content属性
分为两种盒子:
1)标准盒子模型(默认情况)
2)怪异盒子模型
设置宽高,默认设置的是内容的宽高
而怪异盒子情况下,设置的是除margin之外所有属性的总和
how

box-sizing:border-box;//转化为怪异盒子模型

position定位方式

1)绝对定位

定位标准:最近已定位的祖先元素,没有相对窗口定位

在文档流中不占据位置

2)相对定位:

定位标准:相对自己原位置

在文档流中占据空间

3)固定定位:

定位标准:页面窗口(视口定位)

页面滚动不改变位置

4)默认定位:static

元素按照正常文档流排列,不会受到top,bottom,left,right的影响

dispay:none与visiblity:hiden的区别

改变元素的显示与隐藏状态

1)将元素从文档树中移除

浏览器不会在为这个元素进行绘制与事件处理,适合频繁添加与移除元素的场景

会触发回流,对页面布局有显著影响

2)改变元素的显示状态,未移除元素,仍占据原来的空间

浏览器仍要保留这个元素的布局消息,占据更多的内存与资源

触发重绘

对flex布局的理解

容器

1)父容器

display:flex

justify-content 子容器按主轴方向排列 flex-start/end,center,space-around/between

align-items 子容器按交叉轴排列 flex-satrt/end,center,baseline(首行文字),stretch

flex-wrap 自动换行

2)子容器

flex 在主轴上伸缩

(flex是多个属性的缩写,允许1-3个值连用,)

align-self 在交叉轴上的排列,取值和上面一样

1)主轴

2)交叉轴

flex-direction:row/column

对BFC的理解

what
块级格式化上下文
一个独立的渲染区域,使其内部的布局不受外部元素的影响
why
主要用于清除浮动影响,与避免外边距合并等问题
how
创建bfc:

  1. float left/right
  2. position absolute/fixed
  3. display inline-block/table-cell
  4. overflow:hidden/auto/scroll

实现移动端响应式布局的方式

响应式:在不同屏幕的设备上,动态调整页面布局与样式

1)采用flex布局,避免使用固定宽度,采用百分比

使用vw,vh,rem,em单位定义尺寸

2)使用媒体查询,针对不同屏幕尺寸编写样式

图片适配:使用百分比宽度,srcset属性

3)使用第三方组件库

css_199">css尺寸单位

  • px 绝对长度,由屏幕分辨率决定
  • em 相对长度,相对自身font大小,自身fontsize未设置继承父元素
  • rem 相对长度,相对页面根元素大小
  • vw/vh 相对长度,相对视窗的宽/高 1/100

居中的实现方式

  1. 利用flex布局
    display:flex
    justify-Content:center
    align-Items:center

  2. 利用定位:
    position:absolute
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);


http://www.ppmy.cn/server/143319.html

相关文章

【国产MCU系列】-GD32F470-直接存储器访问控制器(DMA)

直接存储器访问控制器(DMA) 文章目录 直接存储器访问控制器(DMA)1、DMA介绍2、DMA寄存器列表3、DMA的传输模式与传输操作3.1 DMA的传输模式3.2 DMA的传输操作3.3 传输完成与软件清除4、DMA的中断4.1 中断标志4.2 中断异常4.3 中断错误5、固件库的DMA相关API6、DMA示例每个嵌…

nacos开启鉴权与配置加密

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、Nacos漏洞复现 1.1.查看配置 1.2.查看用户列表 1.3.注册新用户 二、Nacos开启鉴权 三、变更配置与信息加密 1.变更配置 2.信息加密 四、增强安全性 五、常见问…

为了数清还有几天到周末,我用python绘制了日历

日历的秘密 昨天,在看小侄子写作业的时候,发现了一个秘密:他在“演算纸”(计算数学题用的草纸)上画了非常多的日历。对此我感到了非常的困惑,“这是做什么的?” 后来,经过了我不懈…

【Rust中的项目管理】

Rust中的项目管理 前言Package,Crate,Module &use ,Path通过代码示例解释 Crate,Module ,use,Path创建一个package:代码组织化skin.rs 中的代码struct & enum 相对路径和绝对路径引用同…

基于C语言easyX实现的推箱子游戏

基于80x86汇编语言的推箱子游戏 一、游戏背景介绍 推箱子是一款众所周知的益智游戏,此游戏只有一个目标:将游戏中的所有箱子推到指定位置。简单易懂的游戏规则是此款游戏成功的根本原因。 此游戏具有如下特点:简便的操作、复杂的关卡以及层…

20241114软考架构-------软考案例15答案

每日打卡题案例15答案 15.【2016年真题】 难度:一般 阅读以下关于应用服务器的叙述,在答题纸上回答问题1至问题3。(25分) 【说明】 某电子产品制造公司,几年前开发建设了企业网站系统,实现了企业宣传、产品…

学习笔记023——Ubuntu中设置Java项目的 jar 包自启动

目录 1、设置 crontab 定时任务 2、定时脚本 startJar.sh内容 3、查看jar包进程 4、如何杀死进程 背景:有个需求,Ubuntu服务器中,虽有Java环境,但是没有tomcat。 想要运行jar包,只能通过java -jar命令了。 但是我…

基于 Python Django 的二手房间可视化系统分析

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…