- 2024-07-01让一个元素水平垂直居中的方式
1.定位+margin<style>*{margin:0;padding:0;}.father{width:400px;height:400px;border:1pxsolid;position:relative;}.son{position:absolute;width:200px;height:200px;background-color:red;top:0;right:0;
- 2024-06-2114-vertical-aligin
01行盒的理解作用:将当前行里的所有内容包裹起来<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Docu
- 2024-06-19css面试题
文章目录CSS部分1.IE盒模型和标准盒模型2.px、em、rem区别3.实现左、中、右三列布局CSS部分1.IE盒模型和标准盒模型可使用CSS属性来切换IE盒模型和标准盒模型：box-sizing:border-box||content-box||inherit当使用content-box时：页面将采用标准模式来解析
- 2024-06-14HTML的学习总结#4
这篇是对今天的学习进行总结，今天的学习内容不是很多，但是含金量很大，所以我会认真的总结介绍，也希望大家跟我一起学习认识。文字阴影 主要是给文字添加阴影效果，使得文字更加着重和增强显示效果。<style>/*水平位置垂直位
- 2024-06-1242.CSS之盒子模型和浮动
CSS之盒子模型和浮动【一】盒子模型1.概念是指网页设计中，用于描述和布局元素的一种模型2.组成部分内容区域盒子的实际内容，如文本、图像内边距内容区域与边框之间的空间，用于控制内容与边框之间的距离边框围绕内容区域与内边距的线条，用于给元素添加外观和样式
- 2024-05-27自定义CSS属性（@property）解决自定义CSS变量无法实现过渡效果的问题
且看下面的代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>demot</t
- 2024-05-22css布局:三栏布局
1.左侧盒子200px,中间盒子大于等于500px，右侧盒子300px：<divclass="main"> <divclass="left"></div> <divclass="con"></div> <divclass="right"></div></div><style>.main{ m
- 2024-04-28网页布局------几种布局方式
1、认识布局（1）确认页面的版心宽度版心是指页面的有效使用面积，主要元素以及内容所在的区域，一般在浏览器窗口中水平居中显示。在设计网页时，页面尺寸宽度一般为1200-1920排序。但是为例适配不同分辨率的显示器，一般版心宽度为1000-1200px。例如，屏幕分辨率为1021*768的浏览器，在浏览器
- 2024-04-03你真的会写侧边栏收起动画吗?
业务背景侧边栏的展开与收起,是非常常见的前端交互.下面这段代码是个基础版的demo,使用html+tailwind编写的<buttonid="toggle-btn"type="button">toggle</button><divclass="w-[500px]h-[300px]flex"><sectionclass="flex-1h-fullbg-gray-5
- 2024-03-13Css基础——vertical-align属性
1、vertical-align的定义CSS的vertical-align属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。2、vertical-align的语法vertical-align:baseline|top|midd
- 2024-02-29常用css两列布局汇总
浮动+margin<divclass="container"><divclass="left">定宽</div><divclass="right">自适应</div></div>/*不给高度不行，不给宽度可以自适应*/.container{height:300px;}.left{float:left;/*
- 2024-02-29页面元素水平垂直居中
在页面布局中，元素水平垂直居中的方法有很多，这里就列举3个简单，用的比较多的方法吧。情况一、已知元素的宽高1<style>2.center{3width:200px;4height:200px;5CourierNew",serif;font-size:inherit;line-
- 2024-02-26外边距折叠
1.问题外边距折叠的概念？具体的两种情况（父子，同级兄弟）2.介绍参考链接：margin重叠--外边距折叠的出现场合及解决方法margin重叠--外边距折叠的出现场合及解决方法最新推荐文章于 2024-02-2417:19:38 发布熬夜点外卖的猪精最新推荐文章于 2024-02-2417:19:38 发布版权
- 2024-02-04基础02-css篇
二、CSS部分1 css sprite是什么,有什么优缺点 概念：将多个小图片拼接到⼀个图片中。通过background-position 和元素尺寸调节需要显示的背景图案。 优点： 减少HTTP请求数，极大地提高页面加载速度 增加图片信息重复度，提高压缩比，减少图片大小 更换⻛格⽅便，只
- 2024-01-27头像和消息组件css实现思路
修改后：实现代码（可以用于组装头像和消息）：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>D
- 2024-01-21玛珍，玛珍，margin！
最近在整理巩固面试相关的资料，又看到了熟悉的老朋友：margin，当时觉得其读起来很亲切，现在又发现很多遗忘的知识点。了解marginmargin，译为“外边缘”，在CSS作为属性定义元素周围的空间，从以下盒模型中能更好的理解margin。属性描述margin简写属性。在一个声明中设置所有外
- 2023-12-26CSS之动画
一.动画动画类型CSS3可以创建动画，它可以取代许多网页动画图像、Flash动画和JavaScript实现的效果。transform属性可以定义一些主要的动画属性，translate：平移，translat（100px），向右平移100pxscale：缩放，scale（120%），放大20%skew：阴影，skew（30deg），顺时针阴影30度rotate：旋转，rotate（30de
- 2023-12-21dispaly: flex—左右两栏式
父级：display:flexleft:flex:00200px(固定200px，不放大也不缩小)right:flex:1(会随父级变化)（固定+自适应）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><!--参考阮一峰里
- 2023-11-26实现环形进度条效果【一】
好基友扔过来一张效果图，简单分析下，一起看看如何实现它吧。一个半环形用于表示0-100%。半环形开头有一个圆点作为修饰。半环形两端需要呈现为圆角。通过div实现先画一个长方形。<divclass="graph"></div>.graph{width:200px;height:100px;border:20p
- 2023-11-25实现环形进度条效果
好基友扔过来一张效果图，简单分析下，一起看看如何实现它吧。一个半环形用于表示0-100%。半环形开头有一个圆点作为修饰。半环形两端需要呈现为圆角。通过div实现先画一个长方形。<divclass="graph"></div>.graph{width:200px;height:100px;border:20pxsolidrgb
- 2023-11-14CSS 也能实现 if 判断？实现动态高度下的不同样式展现
最近在群里，有个小伙伴问了这么一道很有趣的问题：CSS能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容为了简化实际效果，我们看这么一张示意效果图：可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。这个效果在很多场景都会出
- 2023-11-1011月10日css盒子模型的margin和padding属性
目录css盒子模型margin属性如何用margin来控制其上下左右的距离margin的缩写padding属性首先它如何进行上右下左的移动现在我有一个需求就是将内容在边框的正中央显示然后就是简写的方式css盒子模型有四个属性属性描述margin用于控制元素与元素之间的距离；margin的最
- 2023-10-13定位控制元素水平垂直居中
浏览器中盒子的位置1.使用绝对元素，相对于浏览器第一窗口进行50%的距离设置，盒子会移动到第四象限； 再使用外边距设置让盒子移动到中间位置（注意正负值的设置）*{margin:0;padding:0;}div{width:200px;height:200px;
- 2023-10-11Flex布局的三个属性要深刻理解！
在我们日常开发中，flex布局可以说是家常便饭，对于很多的我们来说（你懂得^_^），可能我们用的比较多的应该就是垂直居中里，也就是下面这段代码：.flex-box{display:flex;justify-content:center;align-items:center;}写的非常好（^_^）！然后我们都知道这个是定义在父元素的，布局效果是
- 2023-10-09浮动属性 清浮动
浮动效果：1.见缝插针，第一行位置不够时，并不会另起一行，哪有位置补在哪2.文字不会因为盒子进行浮动被覆盖3.谁先进行浮动，谁在最旁边浮动的作用：1.定义网页中其他文本如何围绕该元素显示2.让竖着拍的东西横着来<style>.red{