07 2020 档案

CSS布局-position
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv 阅读全文
posted @ 2020-07-12 18:17 JasonWangTing 阅读(171) 评论(0) 推荐(0)
CSS布局-display
摘要：display属性值： 常用的大的分类值：block inline inline-block <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev 阅读全文
posted @ 2020-07-12 17:47 JasonWangTing 阅读(152) 评论(0) 推荐(0)
CSS盒子模型
摘要：CSS盒子模型：只针对block元素或者inline-block元素，也就是可以设置size的元素 在元素上设置的height和width是作用在内容区域的。 background作用在contect + padding的区域。 盒子模型的size是content + padding + borde 阅读全文
posted @ 2020-07-12 17:33 JasonWangTing 阅读(150) 评论(0) 推荐(0)
CSS布局-table表格布局
摘要：table布局历史久远，现在已经很少使用，但是因为table本身的一些特性，比如上下对齐，左右对齐，文字默认居中使得table布局在处理一些规范的布局时还是很有用的，另外，通过table布局也正好可以学习一下table的使用方式。 <!DOCTYPE html> <html lang="en"> < 阅读全文
posted @ 2020-07-12 14:39 JasonWangTing 阅读(5150) 评论(0) 推荐(0)
CSS 面试题
摘要：css样式（选择器）的优先级: 1.计算权重的方式 important权重最高内联样式更高相同权重后写的优先级更高2.雪碧图的作用：减少HTTP请求数，提高加载性能。3.自定义字体的使用场景：1在宣传、品牌、banner等固定文案中 2.当作图标使用4.base64的作用： 1.减少http请求 2 阅读全文
posted @ 2020-07-11 23:41 JasonWangTing 阅读(154) 评论(0) 推荐(0)
CSS装饰性属性
摘要：CSS装饰性属性： 字重： font-weight 斜体： font-style: itatic 下划线： text-decoration 指针：cursor 阅读全文
posted @ 2020-07-11 23:30 JasonWangTing 阅读(180) 评论(0) 推荐(0)
CSS文字折行
摘要：CSS文字折行有3个属性控制： overflow-warp(老版word-warp) 通用换行控制 word-break 是否要把字母作为一个单位，是否要把中文的句子作为一个单位 white-space 在空白位置是否断行，经常使用no-warp 阅读全文
posted @ 2020-07-11 23:26 JasonWangTing 阅读(2165) 评论(0) 推荐(0)
CSS滚动
摘要：什么时候会产生滚动？当内容比容器多时就会产生滚动。 滚动的行为 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init 阅读全文
posted @ 2020-07-11 23:16 JasonWangTing 阅读(423) 评论(0) 推荐(0)
CSS边框
摘要：边框的属性：大小 线型 颜色 1px solid grey 边框的背景图 边框的衔接： 三角形 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width 阅读全文
posted @ 2020-07-11 22:59 JasonWangTing 阅读(194) 评论(0) 推荐(0)
CSS背景
摘要：背景颜色 渐变色背景：可以做出各种各样的图形，复杂的图形可以使用这个方案，比如=>这样的图形 多背景叠加 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device- 阅读全文
posted @ 2020-07-11 21:46 JasonWangTing 阅读(1191) 评论(0) 推荐(0)
CSS行高
摘要：行高的构成及行高的作用：行高是由line box的高度组成的，line box的高度是inline box的高度决定的。 行高不决定元素的高度，但是它决定元素所占的空间大小，所以，经常会看到设置了line-height的元素有留白的情况。 inline元素组成了inline box。一行的元素组成了 阅读全文
posted @ 2020-07-11 19:52 JasonWangTing 阅读(345) 评论(0) 推荐(0)
CSS字体
摘要：字体族:在CSS中定义字体族时不需要引号，都是字体就需要引号了 衬线字体serif：字体周围有一些装饰性的内容。比如宋体 非衬线字体sans-serif：规则的字体，一般的字体都是 等宽字体monospace：每个字母都是占有相同的空间。写代码时的字体IDE使用的一般是等宽字体。 手写体cursiv 阅读全文
posted @ 2020-07-10 23:43 JasonWangTing 阅读(241) 评论(0) 推荐(0)
CSS选择器分类
摘要：浏览器执行CSS选择器的规则： 有一个选择器.body div .hello {} 正常情况下，我们会认为浏览器会先找到 .body元素，然后在.body元素的子元素中寻找div元素，然后在div元素的子元素中寻找.hello元素。 但是，可以想象一下，浏览器先找到多个.body元素，那么每个都会进 阅读全文
posted @ 2020-07-10 15:11 JasonWangTing 阅读(200) 评论(0) 推荐(0)
CSS样式叠加
摘要：CSS可以把多个样式加到同一个元素上。如果多个样式有重合，浏览器会根据权重的大小进行样式覆盖，这就是层叠样式表的由来。 下面我们先来看一下叠加是怎么回事。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam 阅读全文
posted @ 2020-07-10 14:09 JasonWangTing 阅读(1548) 评论(0) 推荐(1)
HTML面试真题
摘要：1. doctype的意义是什么？ 让浏览器以标准模式渲染（盒子模型对于浏览器不统一，使用doctype可以让浏览器以标准模式渲染） 让浏览器知道元素的合法性（是html4，还是xml，还是html5，比如在doctype为html4的html中写了article元素，如果没有doctype，浏览器 阅读全文
posted @ 2020-07-09 00:28 JasonWangTing 阅读(229) 评论(0) 推荐(0)
HTML元素的默认样式
摘要：为什么需要默认样式？ 在html发展初期，还没有css文件，另外，css文件可能不能加载，所以这里默认样式就是必要的。 默认样式带来的问题，会影响我们写css，需要我们覆盖默认样式。还有一些默认样式是很难覆盖的，比如下拉框的默认样式，是很难去覆盖的。 DEMO2-7.html <!DOCTYPE h 阅读全文
posted @ 2020-07-08 23:41 JasonWangTing 阅读(707) 评论(0) 推荐(0)
HTML元素嵌套关系
摘要：HTML元素嵌套关系（使用验证网站进行验证html的合法性 https://validator.w3.org/） block元素中是可以包含inline元素的。 block元素中不一定是可以包含block元素。比如div元素是可以包含div元素的，但是block元素p是一般不能再包含block元素。 阅读全文
posted @ 2020-07-08 23:06 JasonWangTing 阅读(441) 评论(0) 推荐(0)
HTML5 新增内容
摘要：HTML版本新加元素 header/footer 页面的头部或者一个区域的头部，所以header和footer可以被包含到section或者article中 section/article 表示区域，div也是区域，但是它没有语义，当不知道使用什么标签时，使用div，当明确知道是区域时，使用sect 阅读全文
posted @ 2020-07-08 22:04 JasonWangTing 阅读(295) 评论(0) 推荐(0)
HTML 工具集
摘要：使用https://h5o.github.io/来查看网站的语义化是否做的好。 检查html是否合法 https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content 阅读全文
posted @ 2020-07-08 21:46 JasonWangTing 阅读(196) 评论(0) 推荐(0)
HTML元素分类
摘要：在head中的元素 meta title style link script base 在body中的元素 div/ section/ article/ aside/ header/ footer（表示一个区域） p（表示段落） span/ em/ strong（表示行内元素(内联元素，inline 阅读全文
posted @ 2020-07-08 21:38 JasonWangTing 阅读(214) 评论(0) 推荐(0)