![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端css
文章平均质量分 89
傲娇味的草莓
高中就读广东省前5的省重点高中
本科23年计算机专业刚毕业,拿到英国qs前100的硕士CS计算机offer
是gap year堆砌实习的留学生,24fall已拿悉尼大学(qs19)的CS(AI)硕士offer
展开
-
css的经典布局:行布局、列布局、两栏布局6种方法、三栏布局6种方法
一、行布局经典的行布局,页面结构是头、主体内容、尾一行行排列。常应用于网站的首页。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .header, .main, .footer { /*居中*/原创 2022-04-09 00:16:52 · 4629 阅读 · 0 评论 -
圣杯布局VS双飞翼布局介绍以及margin负值用法的详解
一、圣杯布局、双飞翼布局简单介绍圣杯布局、双飞翼布局基本都是一致的,都是两边固定宽度,中间自适应的三栏布局。中间栏要放到文档流前面,保证先行渲染。圣杯布局、双飞翼布局都是三栏(左中右)全部float:left浮动,区别在于中间栏div是否被遮挡上圣杯布局:中间栏相对定位,配合left、right属性,三栏独立分开双飞翼布局:中间栏嵌套div,内容写在嵌套的div中,嵌套div设置margin-left/margin-right。左右栏在中间栏的上面区别:双飞翼布局中间栏不变,将内容部分为两边腾开原创 2022-04-09 00:10:56 · 610 阅读 · 0 评论 -
CSS盒子高度塌陷的解决方法
CSS盒子高度塌陷的解决方法一、盒子塌陷(1)什么是盒子塌陷高度塌陷,当所有的子元素浮动的时候,且父元素没有高度设置,这时候会产生父元素高度塌陷,本应该在父盒子内部的元素跑到外面。正常显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .box {原创 2022-04-01 14:21:46 · 2482 阅读 · 0 评论 -
容易忽视的CSS3粘性定位position sticky
CSS3粘性定位position sticky一、介绍css3中新的定位属性,本身也具有定位元素的属性理解为相对定位position:relative + 固定定位position:fixed的混合体position:sticky粘性定位,基于用户的滚动定位二、基本原理依赖用户的滚动定位,行为像position:relative,当页面滚动超出目标区域,行为表现为position:fixed什么是目标区域相对父元素,超出阈值,这个阈值通过top、left、right、bottom确定滚动元原创 2022-03-26 16:02:18 · 2339 阅读 · 0 评论 -
css中的z-index层级问题
css中z-index层级问题一、css盒子模型的布局提供三种不同的定位方案①正常文档流②浮动③定位第三种定位会将元素从正常文档流中完全移走,前端开发人员通过设置top、bottom、left、right在二维空间进行定位。Z-index允许开发人员在三维空间进行定位二、z-index基础x轴代码水平方向,y轴代表垂直方向,z轴代表目光平视的方向,看进去屏幕里面这个方向。开发的页面是二维空间,z轴是透视的。规定:两个元素共享同一个二维开发空间块,z-index值大的会覆盖小的。想象一下,原创 2022-03-25 19:16:22 · 2247 阅读 · 0 评论 -
css预处理全部知识点一文讲清楚
css预处理一、什么是css预处理css预处理器是一种新的编程语言,为css增加一些编程的特性,无需考虑兼容性问题。CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码,随后经过专门的编译工具将源码转化为CSS语法。前端工程化的里程碑。二、为什么需要css预处理一样东西的出现肯定是为了解决某种东西的缺陷。css预处理也不例外,它的出现是来解决css的一些缺点的。2.1css有什么样的缺点?(1)语法不够强大,无法嵌套书写,开发中需要重复写很多遍选择器,造成代码冗余(2)没有变量、样式原创 2022-03-23 21:25:44 · 4220 阅读 · 1 评论 -
16种CSS水平垂直居中方法
16种css水平垂直居中方法以及应用(文字、图片)一、垂直居中1、行内元素基本思想:单行文本子元素line-height 值为父元素 height 值.parent { height: 200px;}.son { line-height: 200px;}2、块级元素2.1行内块级元素基本思想:元素是行内块级,使用display: inline-block, vertical-align: middle+伪元素处于容器中央兼容性:支持IE7.parent::afte原创 2022-03-22 16:47:29 · 30630 阅读 · 0 评论 -
css的四种引入方式
css的四种引入方式一、行内样式别名:行间样式、内联样式写法:在网页元素上通过style=""属性<div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div>二、内部样式表写法:在网页创建嵌入的样式表,写在里面<head> <style> p{ color:pink; border原创 2022-03-21 21:48:40 · 14097 阅读 · 1 评论 -
css动画详细知识点梳理
css动画深入剖析整理—前端一 前言css动画是个很神奇的玩意儿,但是属性又很容易混淆,傻傻分不清楚。前端开发已经习惯用Javascript来写动画,但是作为一个想走前端方向的学生,我觉得还是有必要掌握css动画的。二 animation,transition,transform,translate 详细整理2.1 animation(动画)(1)animation定义和用法(animation属性是一个属性的简写,用于设置六个+两个动画属性。)animation-nameanimation原创 2021-10-28 09:24:20 · 533 阅读 · 0 评论 -
css浮动问题/css定位问题/css盒子模型/BFC原理详细剖析/css常用布局之flex布局grid布局table布局等—史上最全的css重难点整理笔记
前端css传统布局—浮动问题一 标准文档流 块级元素 行内元素首先我们先来了解一下,css三种布局方式。本篇博客介绍的css浮动问题是传统布局的范围。想要完全掌握css浮动问题,先得了解一下什么是标准文档流,什么是块级元素和行内元素?它们都有什么特点?css为什么需要浮动?Q1:什么是标准文档流?A1:意思是元素在排版布局过程中,元素会默认自动从左往右,从上而下的流式排列方式。窗体自上而下分成一行行排列,并且在每一行中自左向右排列元素。要特别记住行内元素可以被包含在块级元素中,反之则不可以。Q2原创 2021-04-06 15:20:46 · 1137 阅读 · 0 评论 -
前端CSS选择器知识点详细整理
前端CSS—选择器知识点整理一 前言博主大二计算机专业在读,此博客作为前端学习md记录,算是对自己的一个push作用吧。每天学一点点技术,再把学到的知识按照一定的逻辑顺序整理出来,整理知识点的同时也是在加深对知识点的理解,对自己也是一个学习的过程。学习技术是一个枯燥而且需要消耗时间精力的漫长过程,但是坚持下去特别有成就感。我觉得前端对我来说成就感是“可视化的”。从我个人的角度出发,我认为世界上的幸存者偏差是小概率事件,每个人都在自己的专业领域训练一万个小时。希望自己能坚持学习吧。二 一些需要理解的逻原创 2021-04-03 20:17:10 · 3205 阅读 · 8 评论