Tester-LH

摘要： 认识flexbox ◼ Flexbox翻译为弹性盒子: 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ; 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间; 通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout); ◼ flex布局是目前web开发中使用最多 阅读全文

摘要： 认识浮动 ◼ float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。 float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果; 但是早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具; ◼ 绝对定位、浮动都会 阅读全文

摘要： 标准流布局 标准流（Normal Flow） ◼ 默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布 从左到右、从上到下按顺序摆放好 默认情况下，互相之间不存在层叠现象 margin-padding位置调整 ◼ 在标准流中，可以使用 阅读全文

摘要： border图形 边框的形状 border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状: 假如我们将border宽度设置成50会是什么效果呢? 如果我们进一步, 将另外三边的颜色去除呢（只设置一边的颜色）? Web网络字体 认识Web字体 在之前我们有设置过页面使 阅读全文

摘要： Emmet讲解 认识emmet语法 Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码, 如果手动来编写效果会非常低. VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按T 阅读全文

摘要： 列表元素 认识列表元素 在开发一个网页的过程中, 很多数据都是以列表的形式存在的 列表的实现方式 事实上现在很多的列表功能采用了不同的方案来实现: 方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)方案二: 使用列表元素, 使用元素语义化的方式实现; 事实上现在很多的网站对于列表元素 阅读全文

摘要： background-image ◼ background-image用于设置元素的背景图片  会盖在(不是覆盖)background-color的上面 ◼ 如果设置了多张图片  设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面 ◼ 注意：如果设置了背景图片后，元素没有具体的宽高，背景图 阅读全文

摘要： 知识点补充1--box-shadow里模糊半径+扩散半径的区别 只有模糊半径 只有扩散半径 知识点补充2--文字超出使用省略号代替 .d1{ width: 50px; background-color:rgb(169, 131, 75); overflow:hidden; text-overflow 阅读全文

摘要： 认识盒子模型 生活中, 我们经常会看到各种各样的盒子 HTML每个元素都是盒子 盒子模型 HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性 内容（content） 元素的内容width/height 内边距（padding） 元素和内容之间的间距 边框（border） 元 阅读全文

摘要： css的继承 css的代码截图 css的继承性效果图 css的继承性分析 如果一个 属性具备继承性 , 那么 在该元素上设置后 , 它的 后代元素都可以继承这个属性 当然 , 如果 后代元素自己有设置该属性 , 那么 优先使用后代元素自己的属性 不管继承过来的属性权重多高 那么怎么知道一个属性有没有 阅读全文