前端CSS
文章平均质量分 82
胡斐小鱼
这个作者很懒,什么都没留下…
展开
-
前端进阶之最长递增子序列算法和vue.js中的Diff算法
Vue3中的Diff算法与最大递增子序列算法原创 2024-04-04 22:27:23 · 1031 阅读 · 0 评论 -
JavaScript prototype 原型链
几个概念构造函数: 构造函数实际上是一个普通函数,通过new操作符,可以利用构造函数快速创建对象;prototype:每个构造函数自身上都会有一个prototype属性,该属性值为一个对象,这个对象具有一个constructor属性,constructor指向构造函数自身;实例: 通过构造函数创建的对象,可以看做是该构造函数的实例;__proto__:通过构造函数创建的每个对象上面,都会...原创 2019-07-01 20:36:02 · 126 阅读 · 0 评论 -
面试题 纯CSS实现一个自适应的正方形
要求:正方形;宽度或高度有一个是100%;自适应;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...原创 2019-06-19 20:58:09 · 584 阅读 · 0 评论 -
CSS揭秘之多重边框
多重边框的两种实现方案:border-shadowoutline<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...原创 2019-06-09 21:33:24 · 144 阅读 · 0 评论 -
元素总是居中且高度为宽度一半
有一个元素element, 实现如下需求:元素e水平垂直居中元素e水平方向与父元素保持10px间距元素e的高度是宽度的一半<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...原创 2019-04-26 09:09:11 · 680 阅读 · 0 评论 -
利用clear清除浮动的一些问题
下面这段代码是用来清除浮动带来的高度塌陷问题.clearfix:before { content: "."; display: block; height: 0; clear: both; visibility: hidden;}Question 1: 上面的代码的能够实现清除浮动的问题吗?Answer: Can’t. 因为clear属性只...原创 2019-01-17 22:42:00 · 466 阅读 · 0 评论 -
CSS2中盒模型与布局的一些概念关系
CSS的一些名词和概念用来帮你更明确地去描述HTML/CSS世界的事物。box在CSS中,一个元素就可以看作一个box。具体信息可以参考盒模型的解释,这里暂且不作展开。containing blocksBox的位置和大小时根据一个称为containing blocks的边界进行计算的。block-level elements 和 block boxesblock-level elem...原创 2019-01-06 17:24:06 · 361 阅读 · 0 评论 -
CSS三角形&&containing block
CSS浏览用CSS画一个三角形一个红色的三角形<style> .bottom-triangle { width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right:...原创 2018-11-11 22:36:40 · 166 阅读 · 0 评论 -
面试题:清除浮动的三种方式及其原理
清除浮动的三种方式及其原理浮动元素的特性浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。浮动元素带来的问题因为浮动元素脱离文档流,所以对于其处于正常文档流中父元素,无法获知其高度,导致父元素自身的高度塌陷(失去浮动元素占据的高度)。清除浮动的三种方式设置float<div style="float: left;"> <div ...原创 2018-11-05 17:55:33 · 12683 阅读 · 0 评论 -
前端面试题:CSS中的选择器权重
CSS中选择器优先级的权重计算先看一段代码,如下: &amp;lt;style&amp;gt; a{ color: red; } #box a{ color: green; } [class=&quot;box&quot;] a{ color: gold; } .box a{ color: brown; } ...原创 2018-11-04 17:19:32 · 2187 阅读 · 0 评论 -
CSS中的层叠上下文
CSS中的层叠上下文在页面上z轴方向(垂直于页面的方向),如果存在多个元素,那么这些元素间的覆盖关系是啥?遵循的规则是啥?这就是这篇文章要讲述的内容。前提声明: 不特别说明的话,文中在提到多个元素的位置关系时,均默认这些元素在Z轴上存在重叠关系。什么是层叠水平什么是层叠上下文层叠上下文(stacking context),可以理解为一个对象/环境。跟 BFC(块级格式化上下文)很接近,...原创 2018-11-07 06:33:49 · 518 阅读 · 0 评论 -
CSS Grid布局完全指南
原文:A Complete Guide to GridCSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统。 你可以通过将CSS规则应用于父元素(成为网格容器)和该元素的子元素(网格元素),来使用网格布局。引言CSS网格布局(又名“网格”)是一个二维的基于网格的布局系统,其...翻译 2018-09-13 19:19:50 · 1298 阅读 · 0 评论 -
FlexBox布局完全指南
FlexBox布局Flex即弹性盒模型, 该布局方案由W3C于2009年提出。该布局模型旨在提供一种更有效的方式来进行布局,对齐和分配容器中的项目之间的空间,即使这项对象的大小未知或者会动态变化(这也是之所以叫Flex的原因)。FlexBox的思想:赋予容器更多的能力,可以修改子项的宽高来最完美的填充可用空间。Flex容器可以是子项变大填充剩余可用空间或者缩小子项防止溢出可用范围。容...转载 2018-09-13 16:54:43 · 171 阅读 · 0 评论 -
CSS 盒模型 布局 BFC
CSS 水平居中行内元素对父元素设置text-align:center;即可。.parent{ text-align: center;}单个块元素块元素本身就占据整行,如果对其进行水平居中设置,说明它的宽度小于父级容器的宽度。这时只要设置块元素水平方向上的margin属性为auto即可。div{ margin: auto; /* */}...原创 2018-06-15 11:02:28 · 309 阅读 · 0 评论