![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML&CSS
HTML及CSS相关知识点汇总整理。
Freya_yyy
天天向上
展开
-
cookie、session以及HTML5的本地存储
浏览器的缓存机制提供了可以将用户的数据存储在客户端上的方式,可以利用cookie,session等跟服务器端进行数据的交互。cookie和session:cookie和session都是用来跟踪浏览器用户身份的会话方式,其区别如下:1、保持状态:cookie保存在浏览器端,session保存在服务器端2、使用机制:(1)cookie机制:如果不在浏览器中设置过期时间,cooki...原创 2019-08-31 16:59:04 · 346 阅读 · 0 评论 -
h5新增元素之canvas渲染问题
笔试题中遇到canvas元素渲染的问题,平时不太使用canvas元素,有些疑惑,总结一二。<canvas>是HTML5新增的,可以通过脚本(通常为javascript)在其中绘制图像的HTML元素。<canvas>元素本身没有绘制能力,它仅仅是一个图形容器,必须使用脚本来完成绘图任务,它就像我们画画的画布一样,需要人来用画笔完成画作。1.canvas基本使用:...原创 2019-08-05 11:06:28 · 726 阅读 · 0 评论 -
h5开发常用颜色书写汇总
1.HTML中颜色的五种写法1)直接用颜色英文名字表示例如background-color:white;表示背景颜色为白色;2.通过16进制数表示例如background-color: #000000;表示背景颜色为黑色3).通过RGB方式表示RGB:是红色(red)绿色(green)蓝色(blue)三种颜色的英文字母的首字母,取值范围在0-255之间,有三个参数值...转载 2018-07-23 10:27:21 · 7386 阅读 · 0 评论 -
HTML之meta标签
所有浏览器均支持<meta>标签。<meta>元素可以提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部,不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。在HTML中,<meta>标签没有结束标签。在XHTML中,<meta>...原创 2018-06-23 14:56:13 · 320 阅读 · 0 评论 -
H5新增标签
article: 标签定义外部的内容。aside:标签定义 article 以外的内容。aaudio:h5新增音频标签。没有高宽属性。canvas:h5新增画布标签。command: 定义命令按钮(未测试)datalist:标签定义选项列表。datalist 及其选项不会被想显示出来,它仅仅是合法的输入值列表。details:标签用于描述文档或文档某个部分的细节。figure:标签用于对元素进行组...原创 2018-04-03 17:55:23 · 192 阅读 · 0 评论 -
CSS应用之绘制正六边形
使用CSS绘制一个正六边形:具体步骤:通过绘制三个长方形进行叠加实现,其中长方形的长宽比例为::1。代码:效果图:原创 2020-04-06 17:01:40 · 1390 阅读 · 0 评论 -
CSS实现元素水平居中、垂直居中、水平垂直居中
1.元素水平居中1.1行内元素水平居中像文本text、图像img、按钮等行内元素要实现水平居中,只需要给父元素设置text-align:center;即可。.center{ text-align:center;}<div class="center">文本水平居中</div>1.2块级元素水平居中定宽块级元素的水平居中:方法1:给...原创 2019-08-19 18:56:38 · 615 阅读 · 1 评论 -
为table设置滚动条,汇总CSS的overflow属性
做项目的时候有一个需求:让一个table的高度固定,这样多出来的内容需要在竖直方向显示滚动条。遇到问题:table的宽度已经设置100%,td的宽度已设置。然后无论设置table的高度为多少,都不会出现竖直方向的滚动条。解决方案:为table设置一个父div,并设置父div的height属性为固定值; 为父div设置overflow-y: scroll;1.overflow属性:C...原创 2018-09-03 20:06:08 · 4105 阅读 · 0 评论 -
区分CSS单位:px、em、rem、rpx
记录一下前端开发中容易混乱的几个单位:px、em、rem、rpx(用于微信小程序)1.px:绝对单位,名称为像素。像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你所用屏幕分辨率的最小分割)。2.em:相对单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。em单位转换为像素值...原创 2018-09-01 23:23:49 · 3052 阅读 · 0 评论 -
CSS应用之实现三列布局(左右固定宽度,中间自适应)
实现一个三列布局的左右宽度固定,中间自适应。可以使用传统的css布局,也可以使用css3的新特性flex布局实现。补充圣杯布局和双飞翼布局。1.使用自身浮动法:自身浮动法的原理就是对左右分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。该布局法的不足是三个元素的顺序...原创 2018-07-20 22:00:29 · 10916 阅读 · 4 评论 -
CSS应用之画三角形(等腰、直角、正三角形)和提示框
1.用CSS实现一个三角形:需要把元素的宽度、高度设置为0,然后为其设置边框。需要哪个边框设置哪个边框的颜色,相邻边框的颜色设置color为transparent,对应边框可以设置color为transparent也可以不设置。代码如下:<!DOCTYPE html><html><head><meta http-equiv="Content...原创 2018-07-29 12:08:35 · 1959 阅读 · 0 评论 -
CSS应用之设计满屏品字布局
设计一个满屏品字布局经常会出现在前端的面试或是笔试题目中,需要对CSS能够灵活的运用。首先,这里面涉及到的相关知识点有:1.元素的水平居中:使用margin:0 auto;可以水平居中; 使用text-align:center;给父元素设置使其行内元素水平居中。2.元素相对窗口定位:使用position:fixed;固定定位,元素总是根据浏览器的窗口进行定位; 使用positio...原创 2018-07-29 11:14:10 · 1126 阅读 · 0 评论 -
CSS3之Flexbox布局
一.简述flexbox是 flexible box 的简称,是 css3引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。是一种自适应布局方式。其强大之处在于:在不同方向排列元素 重新排列元素的显示顺序 更改元素的对齐方式 动态...原创 2018-06-15 19:59:46 · 245 阅读 · 0 评论 -
CSS3之transform属性
近期在实现音乐播放器的图片旋转时,用到了CSS3的属性transform。在此总结一下:支持transform浏览器:不同浏览内核的transform有不同的书写规则,如果需要兼容各浏览器的话,所有写法都需要调用,如下所示:eg:旋转一个imgimg{transform:rotate(7deg); /* W3C标准 */-ms-transform:rotate(7de...原创 2018-06-12 17:20:16 · 322 阅读 · 0 评论 -
CSS3之视区单位vw, vh,vmin, vmax
说一下在一个应用中设置元素大小时用到的一些方法:1.CSS3中的新单位即vw, vh:#songList {display:none; position:fixed; bottom:0px;left:35%; height:50vh; width:30%; text-align:center;}vw:则是相对于视窗的宽度,vh:相对于视窗的高度。“视区”所指为浏览器内部的可视区域...原创 2018-06-11 23:20:45 · 380 阅读 · 0 评论 -
CSS之清理浮动的原因及方式
出现浮动的原因:浮动元素碰到包含它的边框或者浮动元素的边框停留。一.由于浮动元素不在文档流中,所以文档流的块框表现的就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。即框的文本内容会受到浮动元素的影响,会移动以留出空间,行框围绕浮动框。(实际上,可以创建浮动框使文本围绕图像)清除方式:要阻止行框围绕在浮动框的外面,需要对包含这些行框的元素应用clear属性。clear属性值可以是left、ri...原创 2018-04-23 11:53:39 · 261 阅读 · 0 评论 -
CSS选择器和声明的特殊性(优先级)
CSS选择器:CSS选择器有:id选择器(#myid)、类选择器(.myclassname)、标签选择器(div,h1,p)、相邻选择器(h1+p)、子选择器(ul>li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel="exterbal"])、伪类选择器(a:hover,li:nth-child)、伪元素选择器(p::first-letter)相邻选择器:选...原创 2018-04-03 15:33:19 · 498 阅读 · 0 评论