![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML和CSS
文章平均质量分 71
介绍一些HTML和CSS常见的问题
代码写的完嘛
这个作者很懒,什么都没留下…
展开
-
flex语法与布局
Flex语法 Flex Flex作CSS3加入的弹性盒子。 .box{ display:flex display:inline-flex display:-webkit-flex /*Safari Chrome*/ } Flex的属性 flex-flow flex-flow:<flex-direction>||<flex-wrap> 例子: flex-flo...原创 2020-03-19 22:41:18 · 145 阅读 · 0 评论 -
WebWorker
概述 Js本身单线程执行,对于一部处理使用事件循环,但H5新增WebWorker允许多线程。 Js主线程创建Worker子线程,允许在后台运行。主线程和worker线程互不影响。对于计算密集型任务交予worker执行,不会阻塞更为流畅。 注意点: worker线程和主线程同源 worker的全局对象与主线程不一致,无法读取DOM对象。 worker和主线程通信限制,不在一个上下文执行环境,需要通...原创 2020-03-03 12:36:42 · 138 阅读 · 0 评论 -
CSS3新增
新增选择器 边框 border-radius 用于添加圆角边框 border-shadow 边框阴影 border-image 边框图片 背景 background-size 规定背景大小,长/宽 background-origin 规定背景区域content-box,padding-box,border-box 文字 text-shadow 文字阴影 @font-face 外部引入,改...原创 2020-03-03 12:06:19 · 81 阅读 · 0 评论 -
常见响应式布局
三栏布局 流体布局 左侧和右侧固定宽度,中间自适应 <div class="container"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> ...原创 2020-03-02 12:43:37 · 803 阅读 · 0 评论 -
BFC和IFC
BFC BFC概念 格式化上下文,由浮动元素创建一个封闭环境,封闭环境与外界互不影响 BFC的创建 float:left|right overflow:hidden|auto|scroll position:absolute|fixed display:flex|inline-box BFC的特性 可清除浮动和高度坍塌 解决外边距折叠的问题 封闭,内外无影响 BFC的作用 1. 清除浮动 ...原创 2020-03-02 11:47:22 · 145 阅读 · 0 评论 -
WebSocket
WebSocket介绍 H5新增,建立一个基于单个TCP的持久化全双工通讯协议 WebSocket核心 HTTP字段中 Upgrade: websocket Connection: Upgrade WebSocket创建 var websocket = new WebSocket(url,[protocal]) WebSocket属性和方法 readyState属性 readyState...原创 2020-03-02 10:16:26 · 685 阅读 · 0 评论 -
WebStroage
Cookie cookie简介 cookie是一个小文本文件,用于客户端和服务器通信时保存客户端状态。 cookie弊端 cookie在不同浏览器中数目限制不一样,IE6以下限制cookie20个,IE7以上和firefox浏览器限制50个,Safari和Chrome没有数目限制 过多使用cookie会造成资源浪费 安全性问题,cookie会被人截获,截获者不需破译即可利用客户端状态。(解决方...原创 2020-03-02 09:38:50 · 170 阅读 · 0 评论 -
HTML常见问题
HTML语义化 解释:用正确的标签做正确的事 作用: 对人,增强可读性,便于开发人员理解网页内容和样式 对机器,利于SEO和网络爬虫爬取信息,利于读屏软件 常见语义化标签 <p>,<header>,<address>,<footer> 移动端<meta viewport> <meta name="viewport" co...原创 2020-03-02 09:33:35 · 310 阅读 · 0 评论 -
CSS的一些问题
position属性 position 表现 inherit 子元素继承父元素 static 元素默认位置 fixed 元素相对于浏览器文档位置 absolue 元素相对于外层第一个父元素的位置 relative 元素相对于正常位置的偏移 区分单位 px 绝对大小,像素,相对于浏览器的分辨率 em 相对大小,继承自父元素,相对于父元素的大小 rem CSS3引...原创 2020-03-01 22:54:17 · 98 阅读 · 0 评论 -
CSS3新增
对比transition和animation transition animation 事件触发 时间触发 着重属性变化 @keyframe帧的变化 需要-webkit兼容 需要-webkit兼容 transition div{ width:100px; height:100px; transition:width 2s; -webkit-transitio...原创 2020-02-29 09:05:22 · 79 阅读 · 0 评论 -
HTML5新增元素
Canvas和SVG的对比 Canvas SVG 基于JavaScript渲染2D图形 基于HTML渲染2D图形 标量图 矢量图 不支持事件处理 各个DOM元素均支持事件处理 不可被SEO 可以被SEO 一般用于游戏 谷歌地图等 表单的扩充 新增元素 datalist 提示内容 <form action=""> <input type=...原创 2020-02-29 08:54:05 · 86 阅读 · 0 评论 -
清除浮动,水平居中,垂直居中。
清除浮动 浮动:元素可通过设置float:left || right来实现浮动。浮动框将脱离文档流,知道触碰到另一个浮动框为止。 手动设置父元素的宽度和高度 设置父元素为overflow:hidden 在子元素后设置空元素的样式clear:both 在父元素后设置伪类:after和zoom .clearfix :after{ display:block; clear:both; heig...原创 2020-02-24 11:36:52 · 251 阅读 · 0 评论 -
盒模型
关于CSS的盒模型 CSS的盒模型作为网页的一部分显示在页面上。从内到外分为四个部分:content,padding,border,margin。 标准盒模型 支持W3C标准的盒模型 content显示内容,可以设置width和height属性控制盒模型的宽度与高度。 padding填充区,内容背景的最外层,将内容和边距分隔开。 border边界,可设置其宽度,样式和颜色。 margin外边距,使...原创 2020-02-24 10:27:00 · 175 阅读 · 0 评论 -
关于CSS选择器
CSS选择器 CSS选择器是CSS规则的一部分,它能够告诉浏览器,相应的HTML元素的样式规则。 CSS选择器类型 ID选择器,类选择器,元素选择器 ID选择器 #ID{ } 类选择器 .class{ } 元素选择器 html,body{ } 属性选择器 属性选择器只对存在属性的HTML元素有效,常见<a>标签的href属性 <a href="url"> URL ...原创 2020-02-24 09:56:56 · 117 阅读 · 1 评论