CSS - 随笔分类 - xiaoxustudy

高度

摘要：本笔记为学习张鑫旭的《CSS世界》时做的。目录： 1. 让元素支持 height:100%效果 2. height: auto 3. 父元素 height:auto 时，子元素不支持 height:100% 4. 绝对定位的宽高百分比计算是相对于 padding box 的，非绝对定位元素则是相对阅读全文

posted @ 2020-10-25 19:36 xiaoxustudy 阅读(318) 评论(0) 推荐(0)

替换元素的尺寸计算规则

摘要：本文为学习《CSS世界》第 4 章后所作笔记。内联替换元素和块级替换元素使用同一套尺寸计算规则。尺寸有 3 种：固有尺寸、HTML 尺寸、CSS 尺寸这几种尺寸是有优先顺序的：CSS 尺寸 > HTML 尺寸> 固有尺寸，比如说 CSS 尺寸会覆盖 HTML 尺寸。图片资源的固有尺寸是无法改阅读全文

posted @ 2020-10-03 17:58 xiaoxustudy 阅读(343) 评论(0) 推荐(0)

内联盒模型

摘要：以下为学习《CSS世界》第 3 章后所作笔记。阅读全文

posted @ 2020-10-03 17:04 xiaoxustudy 阅读(183) 评论(0) 推荐(0)

width/height、min-width/min-height、max-width/max-height 初始值

摘要：阅读全文

posted @ 2020-10-03 11:25 xiaoxustudy 阅读(531) 评论(0) 推荐(0)

宽度分离

摘要：本文为学习《CSS世界》第 3 章后所作笔记。思考一种情况，如果要在一个宽 100px 的盒子里排列几个盒子，这几个盒子的大小定了，现在要改变其中一个盒子的 padding，怎么做到改变它的 padding 之后它的大小不变？给设置 padding、border，又不让盒子大小改变，有 3 种阅读全文

posted @ 2020-10-02 17:18 xiaoxustudy 阅读(182) 评论(0) 推荐(0)

元素内部尺寸的首选最小宽度

摘要：本文为学习《CSS世界》第 3 章后所作笔记。 “内部尺寸”的意思是，元素的尺寸由内部的元素决定，不由外部的容器决定。假如一个元素里面没有内容，宽度就是 0，那么就是应用的 “内部尺寸” 。 “内部尺寸”有 3 种表现形式，包裹性、首选最小宽度和最大宽度。下面是关于首选最小宽度的笔记。首选最小宽阅读全文

posted @ 2020-10-01 21:50 xiaoxustudy 阅读(458) 评论(0) 推荐(0)

元素内部尺寸的包裹性

摘要：本文为学习《CSS世界》第 3 章后所作笔记。 “内部尺寸”的意思是，元素的尺寸由内部的元素决定，不由外部的容器决定。假如一个元素里面没有内容，宽度就是 0，那么就是应用的 “内部尺寸” 。 “内部尺寸”有 3 种表现形式，包裹性、首选最小宽度和最大宽度。下面是关于包裹性的笔记。如果一个元素的阅读全文

posted @ 2020-10-01 20:58 xiaoxustudy 阅读(196) 评论(0) 推荐(0)

借助浏览器流特性设置宽度

摘要：本文为学习《CSS世界》第 3 章后所作笔记。目录： 1. 借助浏览器流特性设置宽度 2. 通过 “ 容器宽度 - 水平 padding - 水平 margin = ? ”计算具体宽度给垂直导航栏设置宽度有 2 种方法，一是借助浏览器流特性设置宽度，二是通过 “ 容器宽度 - 水平 paddin 阅读全文

posted @ 2020-10-01 16:15 xiaoxustudy 阅读(125) 评论(0) 推荐(0)

元素类型的转换

摘要：目录： 1. 元素类型 2. 元素类型的转换一. 元素类型元素类型有块元素、内联元素。内联元素也称为行内元素。块元素有 div、h1-h6、p、ul、ol、li 等。内联元素有 span、strong、em、b、a、u 等。块元素独占一行、能设置宽高。内联元素不独占一行，不能设置宽高。二阅读全文

posted @ 2020-10-01 09:43 xiaoxustudy 阅读(908) 评论(0) 推荐(0)

浮动

摘要：目录： 1. 初识浮动 2. 固定盒子与浮动盒子相邻 3. 浮动元素相邻一. 初识浮动现在一个块级标签里面有两个块级标签，两个块级标签独占一行。现在希望他们在同一行显示。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></ 阅读全文

posted @ 2020-10-01 09:09 xiaoxustudy 阅读(172) 评论(0) 推荐(0)

雪碧图

摘要：目录： 1. 基本概念 2. 优点 3. 注意 4. 图示 5. 例子本片笔记为学习叶建华老师的网课之后所做。传送门：https://study.163.com/course/courseLearn.htm?courseId=1006399046#/learn/video?lessonId=105 阅读全文

posted @ 2020-08-20 21:32 xiaoxustudy 阅读(384) 评论(0) 推荐(0)

绝对定位

摘要：position 的值为 absolute 时，就是开启了绝对定位。元素设置绝对定位以后，如果不设置偏移量，元素的位置不会发生变化。绝对定位的元素是相对于距离他最近的祖先元素进行定位，如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进行定位。绝对定位的元素会完全脱离文档流。绝对定位会改变阅读全文

posted @ 2020-08-19 22:37 xiaoxustudy 阅读(716) 评论(0) 推荐(0)

相对定位

摘要：position 的值为 relative 时，就是开启了相对定位。当元素开启了定位以后，可以通过偏移量来设置元素的位置。偏移量可以通过 left、top、right、button 来设置。一般情况下，只使用两个值即可定义一个元素的位置。开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化阅读全文

posted @ 2020-08-19 21:39 xiaoxustudy 阅读(437) 评论(0) 推荐(0)

选择器

摘要：目录： 1.通用选择器 2.标签选择器 3.类选择器 4.id选择器 5.复合选择器 6.群组选择器 7.后代选择器 8.直接后代选择器 9.属性选择器 10.伪类和伪元素 11.兄弟选择器 12.否定伪类本篇笔记记录各种选择器使用效果，是学习叶建华老师的网课时做的。传送门：https://st 阅读全文

posted @ 2020-08-04 02:07 xiaoxustudy 阅读(381) 评论(0) 推荐(0)

rem

摘要：目录：1. 概念 2.使用 3.例子一、概念 rem 可以在用户浏览网页时，根据屏幕的尺寸来向用户展示更适合用户的布局、文字、图片、按钮。 rem(font size of the root element)是相对于根元素的字体大小的单位。一旦根节点 html 定义的 font-size 变化，阅读全文

posted @ 2020-08-03 15:46 xiaoxustudy 阅读(445) 评论(0) 推荐(0)

表格和表单

摘要：目录：1.表格 2.表单 3.例子一、表格(接近淘汰) 长表格使用场景：有一些情况下表格是非常地长的，这时就需要将表格分为三个部分，表头、表格的主体、表格底部。三个标签： 1. thead 表头： thead 中的内容，永远会显示在表格的头部 2. tbody 表格主体：tbody 中的内阅读全文

posted @ 2020-08-01 17:07 xiaoxustudy 阅读(449) 评论(0) 推荐(0)

双飞翼布局、圣杯布局

摘要：目录： 1. 圣杯布局 2. 双飞翼布局 3. 双飞翼布局与圣杯布局的效果区别双飞翼布局跟圣杯布局功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。双飞翼布局与圣杯布局共同遵循的特点是：1. 两侧宽度固定，中间宽度自适应；2. 中间部分在 DOM 结构上优先，以便先行渲染；3. 阅读全文

posted @ 2020-08-01 00:40 xiaoxustudy 阅读(927) 评论(0) 推荐(0)

三栏布局

摘要：本篇为学习网络资料后做的笔记。资料来源(原文第 6 点)：https://juejin.im/post/6844903828278493197 目录： 1. flex 方式 2. 绝对定位方式 3. 浮动方式 4. 双飞翼布局、圣杯布局一、flex 方式实现方式：在父盒子中设置为伸缩布局，让行级阅读全文

posted @ 2020-08-01 00:29 xiaoxustudy 阅读(167) 评论(0) 推荐(0)

伸缩布局复合属性

摘要：复合属性 flex，是 flex-grow、flex-shrink 和 flex-basis 的简写属性，用来指定 flex 子项如何分配空间。例子三个子盒子在父盒子中的宽度比例为 1：2：3 <!DOCTYPE html> <html> <head> <meta charset="utf-8 阅读全文

posted @ 2020-07-31 17:10 xiaoxustudy 阅读(157) 评论(0) 推荐(0)

伸缩布局常用属性

摘要：伸缩布局也叫 flex 布局。有 2 个属性比较重要： display: inline-flex 将对象作为弹性伸缩盒展示，用于行内元素 display: flex 将对象作为弹性伸缩盒展示，用于块级元素一般都是用 display: flex 。基本都是针对块级元素布局。常用属性 flex-di 阅读全文

posted @ 2020-07-31 16:47 xiaoxustudy 阅读(386) 评论(0) 推荐(0)

随笔分类 - CSS