HTML、CSS、JS面试题

文章目录

    • HTML
      • HTML结构
      • HTML语义化标签
      • 3. DOCTYPE(⽂档类型) 的作⽤
      • 块级元素和行内元素
        • 行内元素
        • 块级元素
        • 区别
      • meta标签
        • meta viewport
      • 怎样处理 移动端 `1px` 被渲染成 `2px` 问题,及其原因
      • 移动端适配
      • `src` 与 `href` 区别
      • img的srcset属性的作⽤?
      • defer和async
      • alt是干啥的
      • 获取某些 DOM
      • HTML5新特性
        • 语义化标签
        • 媒体标签audio和video和source
        • localStorage和sessionStorage
        • localStorage什么情况下会被清空?如何手动清空
        • localStorage跨域
        • cookie跨域
        • SessionStorage什么情况下会被清空?如何手动清空
        • 离线存储
        • web worker
        • websocket
      • iframe 有那些优点和缺点?
    • CSS
      • CSS基础
      • CSS选择器及其优先级
      • 12. title与h1的区别、b与strong的区别、i与em的区别?
      • display的block、inline和inline-block的区别
      • display,visibility,opacity三个属性有什么区别
      • link 和 @import
      • transition和animation的区别
      • 伪元素和伪类的区别和作用?
      • 盒子模型
      • 为什么有时候⽤translate来改变位置⽽不是定位?
      • CSS3中有哪些新特性
      • BFC、形成BFC的条件,BFC的应用
      • 外边距重叠
      • 定位position
      • 常见的图片格式及使用场景
      • 布局
        • 三栏布局
        • 两栏布局
        • 上下高度固定,中间自适应
        • 垂直水平局中
      • flex布局
      • 手撕
        • 三角形
        • 同心圆
        • 扇形
        • 正方形
        • 0.5px的线
        • 小于12px的字体
    • JS基础

HTML

HTML结构

<!DOCTYPE html>  声明文档的类型、按标准模式解析
<html>
	<head>
		<meta charset="utf-8">  页面的元数据信息
		<title></title>		页面的标题
		<link rel="stylesheet" type="text/css" href=""/> 引入的外部样式
		<style type="text/css"> 自定义样式
		</style>
		<script type="text/javascript"> 脚本
		</script>
	</head>
	<body> 内容
	</body>
</html>

HTML语义化标签

  • 概念
    语义化指根据内容的结构化、选择合适的标签
  • 优点
    • 利于seo优化,网络爬虫更容易爬取信息
    • 语义类还支持读屏软件
    • 增加了代码的可读性以及结构性 、利于维护
<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块(有语义化的div)

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

3. DOCTYPE(⽂档类型) 的作⽤

DOCTYPE是HTML5的文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档,不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

浏览器渲染页面的两种模式:

  • CSS1Compat:标准模式(Strick mode),默认模式,浏览器使用W3C的标准解析渲染页面。在标准模式中,浏览器以其支持的最
    高标准呈现页面。
  • BackCompat:怪异模式(混杂模式)(Quick mode),浏览器使用自己的怪异模式解析渲染页面。在怪异模式中,页面以一种比较宽松
    的向后兼容的方式显示。

块级元素和行内元素

行内元素

一个行内元素只占据它对应标签的边框所包含的空间
常见的行内元素有:

  • b, big, i, small, tt
  • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
  • a, bdo, br, img, map, object, q, script, span, sub, sup
  • button, input, label, select, textarea

块级元素

块级元素占据其父元素(容器)的整个空间
块级元素可以包含行内元素和其他块级元素

  • h1, h2, h3, h4, h5, h6
  • *footer, *header , *hgroup, *aside, *article, *section
  • *vedio, *audio
  • div, p, form, table, pre, hr, blockquote, noscript
  • ul, ol, li

区别

  1. 换行

    每个块级盒子都会换行;内联盒子不会产生换行

  2. 默认宽高

    块级盒子默认宽度为父容器宽度的100%,默认高度取决于内容本身;

    内联盒子默认宽高由内容本身决定

  3. 设置宽高

    块级盒子可以直接设置 widthheight;

    内联盒子直接设置不起作用,需要设置 display: blockdisplay: inline-block 变为块级盒子后,再设置宽高

    注意inline-block 存在空隙问题,这是因为当处理行内元素排版时,浏览器会处理元素间的空白符(如空格,回车),解决办法主要有:

    • 牺牲可读性,将它们写在一行
    • 父元素中将字号置 0,在子元素上重置字号
    • 使用浮动或绝对定位,隐式将生效的 display 值变为 block,因此还需要解决由浮动带来的高度坍塌或绝对定位后再调整位置
  4. 内外边距及边框

    块级盒子设置内外边距,边框大小后,水平垂直方向都被应用,且能将其他元素按预期推开;内联元素设置这些属性后,水平垂直方向都被应用,但是只有水平方向会按预期将元素推开

  5. 包含的元素

    块级元素可以包含块级元素和行内元素;

    行内元素中最好只包含行内元素,如包含块级元素,父行内元素并不会包含子块级元素

内联盒子默认宽高由内容本身决定

meta标签

meta 标签可以用来定义文档的各种元数据。

  1. 使用 namecontent 指定名/值元数据对

    • 设置 descriptionkeywords 提高点击率

      并不一定能促进 SEO(Search Engine Optimization,搜索引擎优化)

      需要看不同搜索引擎的搜索策略

    • 设置 viewport 控制视口大小及比例

    • 设置 HTTP [Referer]

  2. 使用 charset 声明字符编码

  3. 使用 http-equivcontent模拟 HTTP 标头字段

    • content-type 属性只能用于 MIME type 为 text/html 的文档,不能用于MIME类型为XML的文档。、

meta viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>




   
    
  

怎样处理 移动端 1px 被渲染成 2px 问题,及其原因

  • 原因
    设备像素比:dpr=window.devicePixelRatio,也就是设备的物理像素与逻辑像素的比值
    css里写的1px宽度映射到物理像素上就有2px或3px宽度。
  • 解决
    • 局部处理
      • mate标签中的viewport属性 ,initial-scale设置为1
      • rem按照设计稿标准走,外加利用transfromescale(0.5)缩小一倍即可;
    • 全局处理
      • mate标签中的viewport属性 ,initial-scale设置为0.5
      • rem按照设计稿标准走即可
  • 伪元素-先放大再缩小
#container[data-device="2"] {
    position: relative;
}
#container[data-device="2"]::after{
      position:absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      content:"";
      transform: scale(0.5);
      transform-origin: left top;
      box-sizing: border-box;
      border: 1px solid #333;
    }
}

移动端适配

移动端适配主要有两个维度:

  • 适配不同像素密度, 针对不同的像素密度,使用 CSS 媒体查询,选择不同精度的图片,以保证图片不会失真;
  • 适配不同屏幕大小, 由于不同的屏幕有着不同的逻辑像素大小,所以如果直接使用 px 作为开发单位,会使得开发的页面在某一款手机上可以准确
    款手机上就会失真。为了适配不同屏幕的大小,应按照比例来还原设计稿的内容。
  • 为了能让页面的尺寸自适应,可以使用 rem,em,vw,vh 等相对单位。

解决

  1. 使用@media媒体查询可以针对不同的媒体类型定义不同的样式
    • width,height 浏览器可视宽度和高度
    • device-width:设备宽度
    • device-height:设备高度
      @media 可以针对不同的屏幕尺寸设置不同的样式
      ,当重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
      HTML、CSS、JS面试题_第1张图片
  2. 利用rem和媒体查询,在分辨率发生变换时,给它不同的font-size。一般固定宽度的用rem
    HTML、CSS、JS面试题_第2张图片

srchref 区别

src和href都是用来引用外部的资源,它们的区别如下:

  • src: 表示对资源的引用,它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内,如请求js脚本。当
    浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执⾏完毕,所以⼀般js脚本会放在页面底部。
  • href: 表示超文本引用,它指向一些网络资源,建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时,就会并⾏
    下载资源,不会停⽌对当前⽂档的处理。 常用在a、link等标签上。

img的srcset属性的作⽤?

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下,img 会
自动加载不同的图片。用法如下

defer和async

  • defer和async的作用:
    • 传统方式下,在文档中遇到script标签,会先加载js脚本,后面的文档加载会先停止
    • 如果在script脚本中插入defer和async,可以使得js脚本与文档加载异步进行
  • 区别: 在于脚本加载完成后何时运行
    • defer 是在浏览器渲染完成之后执行js代码;并且按照加载的顺序执行代码
    • async 是在加载完成后立即执行;特点是乱序执行,因为每个js代码的加载时间不同

alt是干啥的

图片的属性ALT标签用于对图片进行描述说明。ALT标签众多关键词信息在搜索引擎优化中曾发挥了一定作用

获取某些 DOM

  • 直接取
    • getElementById
    • getElementsByTagName
    • getElementsByClassName
  • 子节点
    • childNodes:包含空格,换行
    • children
    • firstChild / lastChild:包含空格,换行
    • firstElementChild / lastElementChild
  • 父节点
    • parentElement / parentNode
    • offsetParent
  • 兄弟节点
    • previousSibling / nextSibling:包含空格,换行
    • previousElementSibling / nextElementSibling

HTML5新特性

HTML、CSS、JS面试题_第3张图片

语义化标签

  • 概念
    语义化指根据内容的结构化、选择合适的标签
  • 优点
    • 利于seo优化,网络爬虫更容易爬取信息
    • 语义类还支持读屏软件
    • 增加了代码的可读性以及结构性 、利于维护
<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块(有语义化的div)

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

媒体标签audio和video和source

audio

<audio src='' controls autoplay loop='true'></audio>
  • controls 控制面板
  • autoplay 自动播放
  • loop=‘true’ 循环播

video

<video src='' poster='imgs/aa.jpg' controls></video>
  • poster 视屏没下载完时,默认显示封面,可以自定义或者是视屏第一帧
  • controls 控制面板
  • width height

source

<video>
 	<source src='aa.flv' type='video/flv'></source>
 	<source src='aa.mp4' type='video/mp4'></source>
</video>

因为浏览器对视频格式支持程度不一样,为了能够兼容不同浏览器,可以通过source指定视频源

localStorage和sessionStorage

  1. 生命周期:localStorage:localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。 sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。

  2. 存储大小:localStorage和sessionStorage的存储数据大小一般都是:5MB

  3. 存储位置:localStorage和sessionStorage都保存在客户端,不与服务器进行交互通信。

  4. 存储内容类型:localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

  5. 获取方式:localStorage:window.localStorage;;sessionStorage:window.sessionStorage;。

  6. 应用场景:localStoragese:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。sessionStorage:敏感账号一次性登录;

localStorage什么情况下会被清空?如何手动清空

  • 保存数据:localStorage.setItem(key,value);
  • 读取数据:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);

localStorage跨域

可以使用postMessage和iframe
假设有a.haorooms.com/text.html和b.haorooms.com/text.html两个页面。

通过a.haorooms.com/text.html页面去修改b.haorooms.com/text.html页面的本地数据:

① 在a.haorooms.com/text.html页面创建一个iframe,嵌入b.haorooms.com/text.html页面。

② a.haorooms.com/text.html页面通过postMessage传递指定格式的消息给b.haorooms.com/text.html页面。

③ b.haorooms.com/text.html页面解析a.haorooms.com/text.html页面传递过来的消息内容,调用localStorage API 操作本地数据。

④ b.haorooms.com/text.html页面包装localStorage的操作结果,并通过postMessage传递给a.haorooms.com/text.html页面。

⑤ a.haorooms.com/text.html页面解析b.haorooms.com/text.html页面传递回来的消息内容,得到 localStorage 的操作结果。

cookie跨域

利用nginx的方向代理来解决cookie跨域问题,其实是通过“欺骗”浏览器来实现的,通过nginx,我们可以将不同工程的cookie放到nginx域下,通过nginx反向代理就可以取到不同工程写入的cookie。

SessionStorage什么情况下会被清空?如何手动清空

关闭当前页面数据的销毁与否有两种情况:
①如果它的页面中没有其他的超链接,或者没有打开,那么关闭当前页面,数据就会被销毁。
②而如果通过当前这个页面,打开了其他的页面,那么只有当这些页面都关闭了,数据才会销毁。

离线存储

HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:

  • 离线浏览 – 用户可在应用离线时使用它们
  • 速度 – 已缓存资源加载得更快
  • 减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。

原理
HTML5的离线存储是基于一个新建的.appcache文件的,通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。

web worker

  • 作用

    • 可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信

    • 可以在worker中通过importScripts(url)加载另外的脚本文件

    • 可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

    • 可以使用XMLHttpRequest来发送请求

    • 可以访问navigator的部分属性

  • 有哪些局限性:

    • 同源限制:不能跨域加载JS

    • dom限制:worker内代码不能访问DOM

    • 兼容性:各个浏览器对Worker的实现不大一致,例如FF里允许worker中创建新的worker,而Chrome中就不行

    • 通信限制:worker线程和主线程不在同一个上下文环境,不能直接通信,只能通过消息完成

    • 文件限制:worker线程无法读取本地文件,加载的脚本来自网络
      HTML、CSS、JS面试题_第4张图片

websocket

因为 HTTP 协议有一个缺陷:通信只能由客户端发起。只能是客户端向服务器发出请求,服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。如果服务器有连续的状态变化,客户端要获知就非常麻烦。我们只能使用"轮询":每隔一段时候,就发出一个询问,了解服务器有没有新的信息。最典型的场景就是聊天室。

  • 特点
    • 服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话

    • 建立在 TCP 协议之上,服务器端的实现比较容易。

    • 与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。

    • 数据格式比较轻量,性能开销小,通信高效。

    • 可以发送文本,也可以发送二进制数据。

    • 没有同源限制,客户端可以与任意服务器通信。

    • 协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

iframe 有那些优点和缺点?

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

优点:

  • 用来加载速度较慢的内容(如广告)
  • 可以使脚本可以并行下载
  • 可以实现跨子域通信

缺点:

  • iframe 会阻塞主页面的 onload 事件
  • 无法被一些搜索引擎索识别
  • 会产生很多页面,不容易管理

CSS

CSS基础

CSS选择器及其优先级

选择器 格式 优先级权重
id选择器 #id 100
类选择器 #classname 10
属性选择器 a[ref=“eee”] 10
伪类选择器 li:last-child 10
标签选择器 div 1
伪元素选择器 li:after 1
相邻兄弟选择器 h1+p 0
子选择器 ul>li 0
后代选择器 li a 0
通配符选择器 * 0

对于选择器的优先级:

  • 标签选择器、伪元素选择器:1
  • 类选择器、伪类选择器、属性选择器:10
  • id 选择器:100
  • 内联样式:1000

注意事项:

  • !important声明的样式的优先级最高;
  • 继承得到的样式的优先级最低;
  • 通用选择器(*)、子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以它们的权值都为 0 ;
  • 样式表的来源不同时,优先级顺序为:内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

12. title与h1的区别、b与strong的区别、i与em的区别?

  • strong标签有语义,是起到加重语气的效果,而b标签是没有的,
  • b标签只是一个简单加粗标签。b标签之间的字符都设为粗体,
  • strong标签加强字符的语气都是通过粗体来实现的,而搜索引擎更侧重strong标签。
  • title属性没有明确意义只表示是个标题
  • H1则表示层次明确的标题,对页面信息的抓取有很大的影响
  • i内容展示为斜体,em表示强调的文本

display的block、inline和inline-block的区别

(1)block: 会独占一行,多个元素会另起一行,可以设置width、height、margin和padding属性;
(2)inline: 元素不会独占一行,设置width、height属性无效。但可以设置水平方向的margin和padding属性,不能设置垂直方向的padding和margin
(3)inline-block: 将对象设置为inline对象,但对象的内容作为block对象呈现,之后的内联对象会被排列在同一行内。

对于行内元素和块级元素,其特点如下:
(1)行内元素

  • 设置宽高无效;
  • 可以设置水平方向的margin和padding属性,不能设置垂直方向的padding和margin;
  • 不会自动换行;
    (2)块级元素
  • 可以设置宽高;
  • 设置margin和padding都有效;
  • 可以自动换行;
  • 多个块状,默认排列从上到下。

display,visibility,opacity三个属性有什么区别

  • display:会让元素完全从渲染树中消失,渲染的时候不占据任何空间,不能点击。子孙节点修改属性不改变本身显隐。会引起重排,性能较差。

  • visibility:不会让元素从渲染树消失,元素继续占据空间,只是内容不可见,不能点击。通过设置visibility: visible,可以让子孙节点显示。只会引起本元素重绘,性能较好

  • opacity:不会让元素从渲染树消失,元素继续占据空间,只是内容不可见,可以点击。子孙节点修改属性不改变本身显隐。提升到合成层后,不会触发重绘,否则只引起本元素重绘,性能较好

link 和 @import

  • 加载页面时,link引入的CSS被同时加载,@import引入的CSS将在页面加载完毕后加载;
  • link标签作为HTML元素,不存在兼容性问题,而@import是CSS2.1才有的语法,故老版本浏览器(IE5之前)不能识别;
  • 可以通过JS操作DOM,来插入link标签改变样式;由于DOM方法是基于文档的,无法使用@import方式插入样式;

transition和animation的区别

  • transition是过度属性,强调过度,它的实现需要触发一个事件(比如鼠标移动上去,焦点,点击等)才执行动画。它类似于flash的补间动画,设置一个开始关键帧,一个结束关键帧

  • animation是动画属性,它的实现不需要触发事件,设定好时间之后可以自己执行,且可以循环一个动画。它也类似于flash的补间动画,但是它可设置多个关键帧(用@keyframe定义)完成动画。

伪元素和伪类的区别和作用?

  • 伪元素:在内容元素的前后插入额外的元素或样式,但是这些元素实际上并不在文档中生成。它们只在外部显示可见,但不会在文档的源代码中找
    为“伪”元素。例如:
    常见的有:::after,::before,::first-letter
p::before {content:"第一章:";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
  • 伪类:将特殊的效果添加到特定选择器上。它是已有元素上添加类别的,不会产生新的元素。例如:
    常见的有:link,:visited, :hover,:active,:focus,:first-child,:nth-child()
a:hover {color: #FF00FF}
p:first-child {color: red}

总结: 伪类是通过在元素选择器上加⼊伪类改变元素状态,⽽伪元素通过对元素的操作进⾏对元素的改变。

盒子模型

盒模型都是由四个部分组成的,分别是margin、border、padding和content。
标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同:

  • 标准盒模型的width和height只包含content。
  • IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型:

  • box-sizeing: content-box 表示标准盒模型(默认值)
  • box-sizeing: border-box 表示IE盒模型(怪异盒模型)

为什么有时候⽤translate来改变位置⽽不是定位?

  • translate 是 transform 属性的⼀个值。
  • 改变transform或opacity不会触发浏览器重新布局(reflow)或重绘(repaint),只会触发复合(compositions)
  • 改变绝对定位会触发重新布局,进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层,但改变绝对定位会使⽤到 CPU图层。 因此translate()更⾼效,可以动画的绘制时间。
  • ⽽translate改变位置时,元素依然会占据其原始空间,绝对定位就不会发⽣这种情况。

CSS3中有哪些新特性

  • 新增各种CSS选择器 (: not(.input):所有 class 不是“input”的节点)
  • 圆角 (border-radius:8px)
  • 多列布局 (multi-column layout)
  • 阴影和反射 (Shadoweflect)
  • 文字特效 (text-shadow)
  • 文字渲染 (Text-decoration)
  • 线性渐变 (gradient)
  • 旋转 (transform)
  • 增加了旋转,缩放,定位,倾斜,动画,多背景

BFC、形成BFC的条件,BFC的应用

BFC,块格式化上下文

它会将内部内容与外部上下文隔开来,不会和外部的元素重叠或相互影响

BFC 的好处为

  • 可以包含浮动元素
  • 防止外边距折叠
  • 防止文档流围绕浮动元素排列

开启方式

  • float 设为非 none 的值,如 left,right
  • overflow 设为非 visible 的值,如 hidden,auto,scroll
  • position: absolute 或 position:fixed
  • 块级容器,如 display: inline-block, table-cell,table-caption,flex,inline-flex,grid,inline-grid

解决方式

  • 给父元素添加属性 overflow: hidden;

    • 优点:浏览器支持好,简单;

    • 缺点:当子元素有定位属性时,设置 overflow: hidden; 容器以外的部分会被裁剪掉。

  • 在子元素的末尾添加一个空的 div ,并设置下方样式

div{
    clear: both;
    height: 0;
    overflow: hidden;
}
- 优点:所有浏览器都支持,并且容器溢出不会被裁剪

-  缺点:在页面中添加无意义的div,容易造成代码冗余。
  • 不需要新增一个标签空间
.box1:after{
	/*添加一个内容*/
	content: "";
	/*转换为一个块元素*/
	display: block;
	/*清除两侧的浮动*/
	clear: both;
}

优点:不会造成代码冗余,剩余代码性能优化,推荐使用。

外边距重叠

计算原则:
折叠合并后外边距的计算原则如下:

  • 如果两者都是正数,那么就去最大者
  • 如果是一正一负,就会正值减去负值的绝对值
  • 两个都是负值时,用0减去两个中绝对值大的那个

解决办法:
对于折叠的情况,主要有两种:兄弟之间重叠和父子之间重叠
(1)兄弟之间重叠

  • 底部元素变为行内盒子: display: inline-block
  • 底部元素设置浮动: float
  • 底部元素的position的值为 absolute/fixed

(2)父子之间重叠

  • 父元素加入: overflow: hidden
  • 父元素添加透明边框: border:1px solid transparent
  • 子元素变为行内盒子: display: inline-block
  • 子元素加入浮动属性或定位

定位position

绝对定位:
* 1.开启绝对定位,会使元素脱离文档流
* 2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化
* 3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况,开启了子元素的绝对定位都会同时开启父元素的相对定位)
* 如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位
* 4.绝对定位会使元素提升一个层级
* 5.绝对定位会改变元素的性质,
* 内联元素变成块元素,
* 块元素的宽度和高度默认都被内容撑开

常见的图片格式及使用场景

(1)BMP,是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩,所以BMP格式的图片通常是较大的文件。
(2)GIF是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码。文件小,是GIF格式的优点,,所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。
(3)JPEG是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色,得益于更丰富的色彩,JPEG非常适合用来存储照片,
(4)PNG-8是无损的、使用索引色的点阵图。无损压缩、质量高、支持透明;体积大;应用:logo 等小图
(5)SVG特点:基于 XML;文本文件、体积小、可压缩性强、不失真、兼容性好;图片在放大时,不会失真,所以它适合用来绘制Logo、Icon等。

布局

三栏布局

  • 定位 左右两栏设置为绝对定位,中间设置margin值
.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

  • flex布局 左右两栏设置固定大小,中间设置flex:1
    缺点:flex布局比较强大,但是还是存在IE上兼容性问题,只能支持到IE9以上
.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}

  • 浮动 利用浮动,左右两栏设置固定大小,并设置对应方向的浮动。中间一栏设置左右两个方向的margin值
    缺点:目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。
.outer {
  height: 100px;
}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

  • table布局
    缺点:table布局使用起来方便,兼容性也不存在问题,不利于搜索引擎抓取信息
.main{
    width: 100%;
    display: table;
}
.left,.center,.right{
    display: table-cell;
}
.left{
    width: 300px;
    background-color: red;
}
.center{
    background-color: blue;
}
.right{
    width: 300px;
    background-color: red;
}
  • grid 布局
    缺点:grid布局很强大,但是兼容性很差。
.div{
    width: 100%;
    display: grid;
    grid-template-rows: 100px; //行
    grid-template-columns: 300px auto 300px; //列
}
  • 圣杯布局
    利用浮动和负边距来实现。父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,
    挤到了下一行,通过设置 margin 负值将其移动到上一行,再利用相对定位,定位到两边。
.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

  • 双飞翼布局
    双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的 margin 值来实现的,而不是通过父元素的 padding 来实现的。通
    过浮动和外边距负值来实现的
.outer {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}

两栏布局

  • 浮动
			.box{
				height: 500px;
				background: #0000FF;
				overflow: auto;
			}
			.box1{
				float: left;
				width: 200px;
				height: 500px;
				background: red;
			}
			.box2{
				margin-left: 200px;
				height: 500px;
			}
  • absolute
			.box{
				overflow: auto;
				position: relative;
				background: red;
				width: 500px;
				height: 500px;
				
			}
			.box1{
				position: absolute;
				left: 0;
				top: 0;
				width: 200px;
				height: 500px;
				background:black;
			}
			.box2{
				margin-left: 200px;
				background: skyblue;
				height: 500px;
			}
  • flex:1
<style type="text/css">
			.box{
				display: flex;
			}
			.left{
				width: 200px;
				height: 500px;
				background-color: #00008B;
			}
			.right{
				background-color: #008000;
				flex: 1;
			}
		</style>
  • 表格
/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
/* 表格布局 */
.wrap {
    display: table;
    width: 100%;
}

.left {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    display: table-cell;
    background: skyblue;
    height: 200px;
}

上下高度固定,中间自适应

  • 定位
.top-center-bottom>div{
  position:absolute;
}
.top-center-bottom .top{
  top:0;
  height:100px;
  width:100%;
  background:red;
}
.top-center-bottom .bottom{
  bottom:0;
  height:100px;
  width:100%;
  background:red;
}
.top-center-bottom .center{
  bottom:100px;
  top:100px;
  width:100%;
  background:green;
}
  • flex
 html, body, .top-center-bottom{
  height:100%;
}
.top-center-bottom{
   display:flex;
   flex-direction:column;
}
.top-center-bottom .top{
  height:100px;
  background:red;
}
 .top-center-bottom .bottom{
  height:100px;
  background:red;
  }
 .top-center-bottom .center{
 flex:1;
  background:green;
}
  • grid
.html, body, .top-center-bottom{
  width:100%;
  height:100%;
}
.top-center-bottom{
  display:grid;
  grid-template-rows:100px auto 100px;
  grid-template-columns:100%
}
.top-center-top{
  background:red;
}
top-center-bottom{
  background:red;
}
top-center-center{
  background:green;
}
  • 计算属性
#main {

}
#top{
	
	top:0;
	height: 200px;
    width: 100%;
	background-color: #49FF55;
	
}
#center{
	background-color: #FFFF00;
	width: 100%;
	height: calc(100vh - 400px);
}
#bottom{
	
	bottom: 0;
	height: 200px;
	width: 100%;
	background-color: firebrick;
}

垂直水平局中

1.flex

		.wrap {
            width: 200px;
            height: 200px;
            border: solid 1px red;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .inner {
            width: 80px;
            height: 80px;
            border: solid 1px blue;
        }

2.定位

.wrap {
            width: 200px;
            height: 200px;
            border: solid 1px red;
            position: relative;
        }
        .inner {
            width: 80px;
            height: 80px;
            border: solid 1px blue;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

3.表格

.wrap {
            width: 200px;
            height: 200px;
            border: solid 1px red;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .inner {
            width: 80px;
            height: 60px;
            border: solid 1px blue;
            display: inline-block;
        }

4.auto+定位

.wrap{
            width: 200px;
            height: 200px;
            border: solid 1px red;
            position: relative;
        }
        .inner {
            width: 80px;
            height: 80px;
            border: solid 1px blue;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

5.网格grid

        .wrap {
            width: 200px;
            height: 200px;
            border: solid 1px red;
            display: grid;
            justify-content: center;
            align-items: center;
        }
        .inner {
            width: 80px;
            height: 80px;
            border: solid 1px blue;
            
        }

flex布局

  • “弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
  • 行内元素也可以使用Flex布局。
    布局以后,子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。
  • 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis),项目默认沿水平主轴排列。

以下6个属性设置在容器上:

  • flex-direction属性决定主轴的方向(即项目的排列方向)。
  • flex-wrap属性定义,如果一条轴线排不下,如何换行。
  • flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
  • justify-content属性定义了项目在主轴上的对齐方式。
  • align-items属性定义项目在交叉轴上如何对齐。
  • align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

以下6个属性设置在项目上:

  • order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
  • flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
  • flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
  • flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的
  • flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto。
  • align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有
    于stretch。

flex:1 为 0 1 0px

<div class="parent">
    <div class="a"></div>
    <div class="b"></div>
</div>

.parent {
    display: flex;
    height: 200px;
    width: 1000px;
    background-color: pink;
}

.a {
    width: 100px;
    flex: 1;
    background-color: skyblue;
}

.b {
    width: 100px;
    flex: 2;
    background-color: yellow;
}

HTML、CSS、JS面试题_第5张图片
按照比例分1:2

手撕

三角形

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

#main{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: #49FF55;
}

同心圆

#main{
		width: 200px;
		height: 200px;
		border-radius: 50%;
		background-color: #49FF55;
		padding: 10px;
		border: 1px solid red;
		background-clip:content-box;//只在内容区显示
	}

扇形

div{
    border: 100px solid transparent;
    width: 0;
    heigt: 0;
    border-radius: 100px;
    border-top-color: red;
}

正方形

.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}
.square::after {
  content: '';
  display: block;
  margin-top: 100%;
}

0.5px的线

transform: scale(0.5,0.5);
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

小于12px的字体

使用css3的transform缩放属性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收缩的是整个元素的大小,这时候,如果是内联元素
元素转换成块元素,可以使用display:block/inline-block/…;

JS基础

链接

你可能感兴趣的:(css,html5,html)