HTML+CSS基础知识
文章平均质量分 68
介绍html+css一些常见的基础用法。适合新手快速入门,也适合对基础知识的查漏补缺,提示对html+css的理解。
不及你笑靥如花
这个作者很懒,什么都没留下…
展开
-
Json数据格式要求
1、JSON文件都是被包裹在一个大括号中 {},通过key-value的方式来表达数据。 2、JSON的Key必须包裹在一个双引号中,在实践中,编写 JSON 的时候,忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。 3、JSON的值只能是以下几原创 2021-08-01 17:56:05 · 4688 阅读 · 1 评论 -
01-css经典布局整理-圣杯布局
圣杯布局一、圣杯布局基本概论二、圣杯布局的原理三、圣杯布局的完整代码一、圣杯布局基本概论圣杯布局指的是左右两栏固定宽度,中间部分自适应。如下二、圣杯布局的原理三、圣杯布局的完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-06-02 10:05:45 · 671 阅读 · 1 评论 -
BFC详解
BFC详解一、定位方案基本概念二、BFC基本概念三、BFC的实际应用3.1、解决父子盒子外边距塌陷问题3.2、解决浮动高度坍塌的问题一、定位方案基本概念在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案:普通流 (normal flow)在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流原创 2021-06-16 11:33:31 · 348 阅读 · 0 评论 -
事件类型(DOM3)整理:包含了dom3的知识点以及浏览器的兼容性标注
思维导图下载地址,也可以私我要免费的压缩包原创 2021-04-06 09:00:06 · 112 阅读 · 0 评论 -
盒子模型:盒子模型概念、margin外边距概念以及外边距合并、border边、padding内边距
盒子模型一、盒子模型概念二、margin外边距1、基本概念margin外边框属性margin外边框各个数值代表含义2、、外边距合并基本概念相邻的兄弟合并祖先合并(级父元素与其第一个/最后一个子元素)一、盒子模型概念所有HTML元素可以看作盒子,它包括Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域,内边距是透明的。Content(内容) - 盒子的内容,显示文本和图像。也是我们所原创 2020-12-02 14:43:25 · 761 阅读 · 0 评论 -
样式转换详解:块级元素/标签/样式、内联元素/标签/样式、 行内块元素/标签/样式
这里写目录标题一级目录一级目录一级目录一级目录二级目录三级目录一级目录标签的特征:块级元素/标签/样式:span、a、i、em、strong、sub、sup、img(特例、支持宽高)内联元素/标签/样式:div、p、h1-h6、行内块元素:input一级目录1、没有宽度时,默认宽度100%2、支持宽高3、独占一行 (列展示)4、支持所有css命令一级目录1、 默认内容撑开宽高2、不支持宽高3、 可以继续跟同类标签(横排展示、4、 不支持上下的margin5、上下paddi原创 2020-11-30 20:58:35 · 582 阅读 · 0 评论 -
font用法分析讲解:样式、大小(解决浏览器默认字体大小问题)、粗细、类型、行高、小型大写、 文本的大小写、对齐方式、首行缩进、文本修饰横线、间距、 换行方式与强制换行、文本溢出(...)、字符实体
font详细用法一、font-family 字体一、font-size 字体大小二级目录三级目录一、font-family 字体一、font-size 字体大小单位:px |%|em|rem注意:% -相对于父容器中字体%调整1em -等于父级的字体尺寸— 相对于父级字体大小而言rem -相对于html(根标签)的字体大小二级目录三级目录...原创 2020-11-28 01:12:39 · 2513 阅读 · 0 评论 -
新手入门:text-shadow文字阴影和box-shadow盒子阴影使用详解
阴影一、文字阴影一、文字阴影一、文字阴影1、语法:text-shadow: h-shadow v-shadow blur color; 值 描述 h-shadow (必选)水平阴影的位置。允许负值。 v-shadow (必选)垂直阴影的位置。允许负值。 blur (可选)模糊的距离。 color (可选)阴影的颜色。 2、垂直阴影x轴和原创 2020-11-09 20:57:26 · 550 阅读 · 1 评论 -
新手入门:圆角使用方法详解,圆角形成原理以及各个值的意义
使用 CSS3 border-radius 属性,你可以给任何元素制作 “圆角”。原理: border-radius: 值;八个值:水平左上角 水平右上角 水平右下角 水平左下角/ 垂直左上角 垂直右上角 垂直右下角 垂直左下角四个值: 左上角 右上角 右下角 左下角三个值原创 2020-11-09 16:47:32 · 1448 阅读 · 0 评论 -
新手入门:canvas的drawImage()在画布上绘制图片详解
drawImage()的用法一、绘制图片1、用法一:将图片直接定位在画布上2、用法二:定图像的宽度和高度,将图像放大或者缩小3、用法三:剪切图像,并在画布上定位被剪切的部分三级目录一、绘制图片1、用法一:将图片直接定位在画布上 context.drawImage(img,x,y);<!DOCTYPE html><html> <head> <meta charset="UTF-8">原创 2020-11-05 14:49:57 · 12735 阅读 · 0 评论