css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方法，另一种方法是实现最佳实践并尽可能多地重用代码。接下介绍一些 …
最新内容
伪类（pseudo-class）用于定义元素的特殊状态，伪元素（pseudo-element）用于设置元素指定部分的样式，语法如下：伪类selector:pseudo-class {property: value;}伪元素selector::pseudo-element {property: value;}伪类以“:”单个冒号开头，伪元素以“::”两个冒号开 …
作者：YJ转发链接：https:mp.weixin.qq.coms_JFheujWvvB6ffsVQgLMOA前言周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在（有 …
我们是否想过没有CSS对HTML标签元素的影响，那么我们的标签在浏览器是什么样形式存在的？CSS对HTML标签元素到底产生了什么影响？又做了什么规则限定？来聊聊吧！！！CSS 作为一门标记性语言，但是它的简单易学，很多开发者都不知道它是一门语言，语言的东西必定具备诸多概念，但是我们会往往忽略这些概念，确实，就算你不知道这些概念，你仅仅知道这些样式是干什么的， …
1. 说下行内元素和块级元素的区别？行内块元素的兼容性使用（IE8 以下）Q1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。Q2)兼容性：display:inline-bloc …
前言css水平垂直居中一直是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（特想找个地洞钻进去）。现在都2022年了，这些技巧现在已经不是技巧了吧，只是好记性不如烂笔头，还是乖乖记下来吧，得把它玩透才行！注：文中例子没写明html代码时，使用的是 …
CSS盒子模型1. 盒模型分为标准盒模型和怪异盒模型(IE模型)2. box-sizing：content-box 标准盒模型3. box-sizing：border-box 怪异盒模型4. 标准盒模型：元素的宽度等于style里的width+margin+border+padding宽度如下代码，整个宽高还是120pxdiv{ box-sizing: co …
简介布局在我们前端日常开发来说是非常重要的，一个好的布局能简化代码的同时还能提高网页的性能。常见的布局方法有浮动(float)布局、绝对定位(position)布局、表格布局(table)、弹性(flex)布局、网格(grid)布局。关于布局方法本文不做详细讲解，笔者推荐看阮一峰老师 flex布局教程 和阮一峰老师 grid布局教程。本文主要讲解水平垂直居中 …
因为是面试题, 所以就不去敲代码去一一实现了, 因为面试官不会让你现场去敲代码; 如果有遇到现场让你敲代码的面试, 那就直接 Pass 好了; 懂得都懂 。1. display: flex;1. 给父容器添加了 display: flex 属性, 就可以让容器内部打破原有文档流模式, 展现为弹性布局 。2. flex 是什么属性的缩写:1. flex 是 f …
响应式布局：只需要开发一套代码，只需要一套代码使页面适应不同的屏幕。响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；响应式布局的 5 种实现方案百分比布局媒体查询布局rem 响应式布局vw 响应式布局flex 弹性布局一、百分比布局比如，当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着 …