作者：YJ转发链接：https:mp.weixin.qq.coms_JFheujWvvB6ffsVQgLMOA前言周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在（有 …
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 弹性布局一、百分比布局比如，当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着 …
在移动互联网时代，网页的响应式布局已经成为一个必备的技能。响应式布局可以让网页在不同大小的屏幕上都能完美展示，提供更好的用户体验。本文将教你如何使用CSS实现网站的响应式布局，让你的网页在各种设备上都能完美展示。步骤一：使用媒体查询媒体查询是CSS3的一个重要特性，可以根据不同的设备条件来应用不同的样式。在网站中使用媒体查询，可以根据屏幕的宽度、高度、设备类 …
学海无涯，不要沉浸在知识的海洋里，迷失自己。要知道自己想要什么，抓住重点，不忘初心。这个世界上百分之20的人，掌握着百分之80的财富。接下来一系列教程，就带领大家抓住重点，一起做那百分之20的人。往期知识点回顾：重点属性-display重点属性-position重点属性-float重点属性-background重点属性-media重点属性-overflow一 …