随笔分类 -  CSS

CSS相关知识
flex 布局
摘要：flex布局是目前布局的主要方式，它能够解决大多数的布局问题。本文是flex布局的总结，记录了一下flex布局的常见使用场景及flex布局不能解决的一下问题和对应的解决方案。 阅读全文
posted @ 2020-09-11 15:57 JasonWangTing 阅读(166) 评论(0) 推荐(0)
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 阅读(164) 评论(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 阅读(146) 评论(0) 推荐(0)
CSS盒子模型
摘要：CSS盒子模型：只针对block元素或者inline-block元素，也就是可以设置size的元素 在元素上设置的height和width是作用在内容区域的。 background作用在contect + padding的区域。 盒子模型的size是content + padding + borde 阅读全文
posted @ 2020-07-12 17:33 JasonWangTing 阅读(148) 评论(0) 推荐(0)
CSS布局-table表格布局
摘要：table布局历史久远，现在已经很少使用，但是因为table本身的一些特性，比如上下对齐，左右对齐，文字默认居中使得table布局在处理一些规范的布局时还是很有用的，另外，通过table布局也正好可以学习一下table的使用方式。 <!DOCTYPE html> <html lang="en"> < 阅读全文
posted @ 2020-07-12 14:39 JasonWangTing 阅读(5146) 评论(0) 推荐(0)
CSS 面试题
摘要：css样式（选择器）的优先级: 1.计算权重的方式 important权重最高内联样式更高相同权重后写的优先级更高2.雪碧图的作用：减少HTTP请求数，提高加载性能。3.自定义字体的使用场景：1在宣传、品牌、banner等固定文案中 2.当作图标使用4.base64的作用： 1.减少http请求 2 阅读全文
posted @ 2020-07-11 23:41 JasonWangTing 阅读(153) 评论(0) 推荐(0)
CSS装饰性属性
摘要：CSS装饰性属性： 字重： font-weight 斜体： font-style: itatic 下划线： text-decoration 指针：cursor 阅读全文
posted @ 2020-07-11 23:30 JasonWangTing 阅读(179) 评论(0) 推荐(0)
CSS文字折行
摘要：CSS文字折行有3个属性控制： overflow-warp(老版word-warp) 通用换行控制 word-break 是否要把字母作为一个单位，是否要把中文的句子作为一个单位 white-space 在空白位置是否断行，经常使用no-warp 阅读全文
posted @ 2020-07-11 23:26 JasonWangTing 阅读(2163) 评论(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 阅读(422) 评论(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 阅读(192) 评论(0) 推荐(0)
CSS背景
摘要：背景颜色 渐变色背景：可以做出各种各样的图形，复杂的图形可以使用这个方案，比如=>这样的图形 多背景叠加 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device- 阅读全文
posted @ 2020-07-11 21:46 JasonWangTing 阅读(1182) 评论(0) 推荐(0)
CSS行高
摘要：行高的构成及行高的作用：行高是由line box的高度组成的，line box的高度是inline box的高度决定的。 行高不决定元素的高度，但是它决定元素所占的空间大小，所以，经常会看到设置了line-height的元素有留白的情况。 inline元素组成了inline box。一行的元素组成了 阅读全文
posted @ 2020-07-11 19:52 JasonWangTing 阅读(338) 评论(0) 推荐(0)
CSS字体
摘要：字体族:在CSS中定义字体族时不需要引号，都是字体就需要引号了 衬线字体serif：字体周围有一些装饰性的内容。比如宋体 非衬线字体sans-serif：规则的字体，一般的字体都是 等宽字体monospace：每个字母都是占有相同的空间。写代码时的字体IDE使用的一般是等宽字体。 手写体cursiv 阅读全文
posted @ 2020-07-10 23:43 JasonWangTing 阅读(238) 评论(0) 推荐(0)
CSS选择器分类
摘要：浏览器执行CSS选择器的规则： 有一个选择器.body div .hello {} 正常情况下，我们会认为浏览器会先找到 .body元素，然后在.body元素的子元素中寻找div元素，然后在div元素的子元素中寻找.hello元素。 但是，可以想象一下，浏览器先找到多个.body元素，那么每个都会进 阅读全文
posted @ 2020-07-10 15:11 JasonWangTing 阅读(199) 评论(0) 推荐(0)
CSS样式叠加
摘要：CSS可以把多个样式加到同一个元素上。如果多个样式有重合，浏览器会根据权重的大小进行样式覆盖，这就是层叠样式表的由来。 下面我们先来看一下叠加是怎么回事。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam 阅读全文
posted @ 2020-07-10 14:09 JasonWangTing 阅读(1543) 评论(0) 推荐(1)