摘要: # 从零开始的前端生活--float和overflow float 本质 浮动的本质就是为了实现文字环绕效果。 浮动的特征 包裹与自适应性。 块状化,float不为none时,它的display就是block 万恶之源 使父元素的高度塌陷 <div> <img src="../image/pic0 阅读全文
posted @ 2020-06-17 16:10 从零开始的代码生活 阅读(691) 评论(0) 推荐(0) 编辑
摘要: # 从零开始的前端生活--line-height和vertical-align 前言 我觉得块级元素就是负责网页的结构骨架排列,而内联元素就是躲在块级元素内部来负责内容排列,创世者应该是这样考虑的吧 line-height 定义 对于非替换元素的纯内联元素,他的高度完全由line-height决定 阅读全文
posted @ 2020-06-13 16:07 从零开始的代码生活 阅读(341) 评论(0) 推荐(0) 编辑
摘要: # 从零开始的前端生活--盒尺寸 padding padding对块级元素的影响 css中默认的box-sizing 是content-box,使用padding会额外增加元素的尺寸。 当padding足够大,把width挤没掉了,这时width就无效。里面的内容表现为“首选最小宽度” 首选最小宽 阅读全文
posted @ 2020-06-12 14:38 从零开始的代码生活 阅读(333) 评论(0) 推荐(0) 编辑
摘要: # 从零开始的前端生活-理解content(二) 应用 清除浮动 伪元素加content最常见的应用是清除浮动带来的影响 .clear::after{ content:''; display:table; clear:both; } 字符内容的生成 content还可以插入Unicode字符(万国 阅读全文
posted @ 2020-06-07 15:44 从零开始的代码生活 阅读(448) 评论(0) 推荐(0) 编辑
摘要: # 从零开始的前端生活-理解content(一) 替换元素 定义 我们把通过修改某个属性值呈现的内容就可以被替换的元素被称为"替换元素"。 比如 <img src="xxx.jpg"> ,我们只需修改属性src的值,内容就会发生变化,这就是替换元素。 类似的有 <video>、<iframe>、< 阅读全文
posted @ 2020-06-03 22:42 从零开始的代码生活 阅读(933) 评论(0) 推荐(0) 编辑
摘要: 从零开始的前端生活--css基础(盒子模型、height:100%) 4个盒子 当我们声明一个div,并赋予它的宽高为200*200px,padding为20px,margin也为20px,border为1px <div class = "container"></div> .container { 阅读全文
posted @ 2020-05-30 21:16 从零开始的代码生活 阅读(626) 评论(0) 推荐(0) 编辑
摘要: 从零开始的前端生活--css基础 选择器 选择器是用来选择对应的html元素。 类选择器 以" . "为开头的选择器,很多元素可以共用同一个类选择器 ID选择器 以" # "为开头的选择器。一般指向唯一元素 属性选择器 含有[] 的选择器 <span class="item one">1</span 阅读全文
posted @ 2020-05-29 20:41 从零开始的代码生活 阅读(163) 评论(0) 推荐(0) 编辑
摘要: 从零开始的前端生活--html基础 模板 html文件都有一个固定的模板,通过vscode可以一键生成 <!DOCTYPE html> // 这是一个声明<html lang="en"><head> <meta charset="UTF-8"> // 为了防止乱码情况,声明为utf-8 <meta 阅读全文
posted @ 2020-05-28 23:25 从零开始的代码生活 阅读(142) 评论(0) 推荐(0) 编辑