前端——CSS--后端、前端、移动开发、大数据、Java、Python、Vue开发经验分享

前端——CSS

11·灵魂前端工程师养成-CSS最强大的布局Grid
Grid介绍利用grid模仿淘宝生活家布局Grid小游戏-曾老湿, 江湖人称曾老大。 -多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3
日期 2023-06-12 10:48:40
09·灵魂前端工程师养成-CSS入门
CSS的历史体系化学习文档流两种盒模型利用css制作一个彩虹-曾老湿, 江湖人称曾老大。 -多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。
日期 2023-06-12 10:48:40
前端面试01-HTML+CSS
1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？要点一 : 该标签告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面要点二 : 声明对大小写不敏感2.常用浏览器有哪些，内核都是什么？常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等浏览器内核备注IETridentIE、猎豹安全、360极速
日期 2023-06-12 10:48:40
「趣学前端」@layer，你好，CSS的新特性
前言之前开发者大会上，大佬分享@layer这个新特性的时候，就想着要研究一下它的具体用法。在开始freestyle之前，先来看一下规范：这是一个实验中的功能。此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。CSS规则MDN中对CSS规则的定义如下At-rules是
日期 2023-06-12 10:48:40
我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss】
前言聊一下自己使用这些技术的一些体会与心得，不做具体的搭建过程了，说一下工程的设计思想与遇到了哪些问题。项目背景最近一直在忙一个EPR系统的开发，新项目之前团队的技术栈基本停留于Vue2 + Js + Webpack + Vuex 上，但是Vue生态其实已经可以说进入了次时代，虽然我个人其实不是很倡议盲目的去追赶新的框架，因为我觉得先把自己手头的技术掌握扎实才是重中之重，团队的同学绝大多数是一些基
日期 2023-06-12 10:48:40
从头学前端-CSS基础03
1.盒子模型盒子模型组成： > 盒子模型组成的主要有边框border，外边距margin ，内边距padding，内容content；- 边框border: > border可以设置元素的边距，边距有三部分，宽度，验收，颜色复制 > border: border-width || border-style || border-color > 边框四个边可以分开来写，如
日期 2023-06-12 10:48:40
从头学前端-CSS基础05
CSS高级技巧精灵图 css sprites>为了有效减少服务器接收和发送的频率，减轻服务器的压力；将许多的小图片放到一张大图片上去；就是精灵技术，CSS sprites;复制> 精灵技术主要针对背景图片, 精灵图就是一张大的背景图片 > 使用时主要移动背景图片位置，使用backgroud-position属性 > 一般情况下都是往上走，往左走，所以backgroud-po
日期 2023-06-12 10:48:40
前端(二)-CSS
1、样式1.1 行内样式<h1 style="color:red;">行内样式</h1>复制1.2 内部样式CSS代码写在 <head> 的 <style> 标签中 <style> h1{color: green; } </style>复制1.3 外部样式<link rel="styles
日期 2023-06-12 10:48:40
前端css单位小结：vh、vw、百分比、rem、px、计算属性calc
前端css单位小结：vh、vw、百分比、rem、px、计算属性calc1 vh视口的高度，也就是眼睛可以看到屏幕的高度，如果你的屏幕分辩率为1920*1080，那么视口的高度就是1080px，vh可用于写自适应。一般给css div 的 height赋值用。2 vw与vh相对的，视口的宽度，同理，如果你的屏幕分辩率为1920*1080，那么视口的宽度就是1080px，vw可用于写自适应。一般给cs
日期 2023-06-12 10:48:40
千姿百态,瞬息万变,Win11系统NeoVim打造全能/全栈编辑器(前端/Css/Js/Vue/Golang/Ruby/ChatGpt)
我曾经多次向人推荐Vim，其热情程度有些类似现在卖保险的，有的时候，人们会因为一些弥足珍贵的美好暗暗渴望一个巨大的负面，比如因为想重温手动挡的快乐而渴望买下一辆二十万公里的老爷车，比如因为所谓完美的音质而舍不得一个老旧的有线耳机，比如因为一个铜炉火锅而期待北京那漫长而寒冷的冬天。也许有的人会因为Vim而放弃169刀的JetBrains全家桶，没错，Vim的快乐，就是手动挡的快乐，
日期 2023-06-12 10:48:40
前端面试之HTML && CSS
HTML && CSSHTML5 新特性、语义化概念： HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】语义化标签： header nav main article section aside footer 语义化的优点: 在没CSS样式的情况下，页面整体也会呈现很好的结构效果代码结构清晰，易于阅读，利于开发和维护方便其
日期 2023-06-12 10:48:40
前端CSS Flex布局8大重难点知识，收藏起来吧
2009 年，W3C 提出了一种新的方案 —-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。这也是学习前端必须掌握的主流布局方案！今天给大家分享一下 Flex 布局的 8 大重难点知识。Flex 实现两栏布局 (左固定，右自适应)；Flex 实现三栏布局 (左右固定，中间
日期 2023-06-12 10:48:40
Web前端开发CSS笔记
CSS 层叠样式CSS引用:直接引用直接在HTML标签的后面加上style类型声明即可,多个类型请用分号隔开.<body> <p style="color: red"> hello lyshark </p> <div style="color: yellow ; background: red"> hel
日期 2023-06-12 10:48:40
前端之CSS介绍–选择器详解编程语言
css我们称呼层叠样式表(英文全称：Cascading Style Sheets)。它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。如果html是一个人，那么CSS就相当于衣服，有了它我们可以让HTML样式丰富多彩。 css语法主要由两部分组成：选
日期 2023-06-12 10:48:40
[web 前端] css3 transform方法常用属性
cp from : https://www.cnblogs.com/chrxc/p/5126569.html 　css3中transform方法是一个功能强大的属性，可以对元素进行移动、缩放、转动、拉长或拉伸等功能。　transform中最为常用的4个属性分别是：rotate();、scale();、skew();、translate() 　1.旋转rotate()在我
日期 2023-06-12 10:48:40
[Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法
讲一讲CSS的position/float/display都有哪些取值，它们相互叠加时的行为都是什么？列出display的值，说明他们的作用。position的值， relative和absolute分别是相对于谁进行定位的？ CSS中position和display理解 CSS定位布局display/float/position属性之间的关系/区别和如何使
日期 2023-06-12 10:48:40
前端开发者应该知道的 CSS 小技巧
一些小技巧让你的CSS技术更专业 1,使用:not()去除导航上不需要的边框 2,为body添加行高 3,垂直居中任何元素 4,逗号分离的列表 5,使用负nth-child选择元素 6,使用SVG图标 7,文本显示优化 8,在纯CSS幻灯片上使用max-height 9,继承box-sizing 10,表格单元格等宽 11,使用Flexbox摆脱边界H
日期 2023-06-12 10:48:40
前端学习 -- Css -- 浮动
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流。使用float来使元素浮动，从而脱离文档流可选值： none，默认值，元素默认在文档流中排列。 left，元素会立即脱离文档流，向页面的左侧浮动。 right，元素会立即脱离文档流，向页面的右侧浮动。当为一个元素设置浮动以后（float属性是
日期 2023-06-12 10:48:40
前端学习 -- Css -- overflow
子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小。如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容。父元素默认是将溢出内容，在父元素外边显示，通过overflow可以设置父元素如何处理溢出内容：可选值：visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示。hidden, 溢出的内
日期 2023-06-12 10:48:40
前端学习 -- Css -- display和Visibility
display 将一个内联元素变成块元素，通过display样式可以修改元素的类型。可选值： 1 inline：可以将一个元素作为内联元素显示。 2 block: 可以将一个元素设置块元素显示。 3 inline-block：将一个元素转换为行内块元素。 - 可以使一个元素既有行内元素的特点又有块元素的特点,既可以设置宽高，又不会独占一行。&
日期 2023-06-12 10:48:40
前端学习 -- Css -- 内联元素的盒模型
内联元素不能设置width和height；设置水平内边距,内联元素可以设置水平方向的内边距：padding-left，padding-right；垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局；为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局；水平外边距内联元素支持水平方向的外边距；内联元素不支持垂直外边距；为右边的元素设置一个左外边
日期 2023-06-12 10:48:40
前端学习 -- Css -- 字体分类
在网页中将字体分成5大类： serif（衬线字体） sans-serif（非衬线字体） monospace （等宽字体） cursive （草书字体） fantasy （虚幻字体）可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式。一般会将字体的大分类，指定为font-family中的最后一个字体。 <!DOCTYPE html>
日期 2023-06-12 10:48:40
前端学习 -- Css -- 字体
设置字体颜色,使用color来设置文字的颜色设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度，并不是字体的大小一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不能。通过font-family可以指定文字的字体当采用某种
日期 2023-06-12 10:48:40
前端学习 -- Css -- 兄弟元素选择器
为一个元素后边的元素设置css样式：语法：前一个 + 后一个。作用：可以选中一个元素后紧挨着的指定的兄弟元素。为一个元素后边的所有相同元素设置css样式：语法：前一个 ~ 后边所有。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t
日期 2023-06-12 10:48:40
前端学习 -- Css -- 属性选择器
属性选择器：根据元素的属性选择指定元素语法：[属性名] 选取含有指定属性的元素 [属性名="属性值"]：选取属性值等于指定值的元素 [属性名^="属性值"]：选取属性值以指定内容开头的元素 [属性名$="属性值"]：选取属性值以指定内容结尾的元素 [属性名*="属性值"]：选取属性值中包含指定内容的元素 demo:(注：这么尴尬的诗句肯定不是我写的) <!DOCTYPE
日期 2023-06-12 10:48:40
前端学习 -- Css -- 伪元素
:first-letter 表示第一个字符 :first-line 表示文字的第一行 :before 选中元素的最前边，一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容。 :after 选中元素的最后边，一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容。 first-letter demo:
日期 2023-06-12 10:48:40
前端-css-长期维护
############### CSS简介 ################ # CSS # HTML是骨架 # CSS是样式 # JS是动作 # css和html是分成两个文件编写的，这也是体现了文档内容和样式的解耦， # CSS：层叠样式表(英文全称：Cascading Style Sheets) ###########
日期 2023-06-12 10:48:40
前端学习 -- Html&Css -- 条件Hack 和属性Hack
条件Hack 语法：  <keywords> if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本是否：指定是否IE或IE某个版本。关键字：空大于：选择大于指定版本的IE版本。关键
日期 2023-06-12 10:48:40
前端学习 -- Html&Css -- 相对定位绝对定位固定定位
相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素。 - 通过position属性来设置元素的定位。 -可选值： static：默认值，元素没有开启定位； relative：开启元素的相对定位； absolute：开启元素的绝对定位； fixed：开启元素的固
日期 2023-06-12 10:48:40
前端学习 -- Css -- 高度坍塌问题的产生以及解决
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题,我们可以将父元素的高度写死，
日期 2023-06-12 10:48:40
前端学习 -- Css -- overflow
子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小。如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容。父元素默认是将溢出内容，在父元素外边显示，通过overflow可以设置父元素如何处理溢出内容：可选值：visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示。hidden, 溢出的内
日期 2023-06-12 10:48:40