在线css兼容性处理地址:autoprefixer.github.io            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2017-09-19 22:16:00
                            
                                1448阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            扩展容器层高度: 父标记没有设置高度,子标记设置了浮动时,父标记的高会比内容高度小,造成页面不美观,必须想办法扩展其高度 1.用clear样式扩展高度 方法:在父标记中添加一个空的div标记,并设置样式 clear:both; margin:0px; padding:0px; 2.用overflow            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2016-11-05 21:59:00
                            
                                100阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            .overlay{
    display: block;
	    position: absolute;
	    top: 0%;
	    left: 0%;
	    width: 100%;
	    height: 100%;
	    background-color: black;                          
	    z-index:9998;                 
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-06-29 17:37:09
                            
                                272阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            CSS 弹层效果当前页面div半透明遮罩效果:.div-hide{
filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;
}弹出层div居中对齐:.pop-div{
display: none;
margin: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-04-28 15:41:32
                            
                                71阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            什么是响应式设计?是什么?一句通俗易解得话就可以概括,所谓响应式设计就是可以让你设计的网页不仅仅在PC端显示,还可以在智能机以及iPad平板等移动设备上显示,应用了响应式设计的网页可以随着分辨率的大小进行样式变化,但是响应式设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式现在响应式设计已经应用的越来越广,学前端的我们不能不去掌握响应式设计,像美国白宫就对其            
                
         
            
            
            
            来源 | https://www.fly63.commask简介CSS的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。mask和background用法是相仿的,mask的值有这些:mask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-rep            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-01-17 10:19:16
                            
                                158阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            我是内容内容部分需要屏幕居中显示px; height: px;">            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2015-06-16 17:18:00
                            
                                256阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            CSS 遮罩层,背景渐变 html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="basic.css"> </head> <body> <div cl            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2024-06-18 11:00:13
                            
                                93阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            为了让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位(positioning)属性来支持层布局模型。层模型有三种形式:1、绝对定位(position: absolute)如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-04-06 08:21:31
                            
                                164阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            1.必须引入标签: 设置 meta 标签 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 在设置视口时需要注意,视口就是网页可见区域的尺寸, ...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-10-10 10:12:00
                            
                                235阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            CSS 响应式设计(Responsive Design)是一种使网页在不同设备和屏幕尺寸上都能良好显示的方法。以下是实现响应式设计的基本技术和最佳实践。1. 媒体查询媒体查询是实现响应式设计的核心工具。它允许你根据不同的设备特性(如宽度、高度、分辨率等)应用不同的样式。基本语法@media only screen and (max-width: 600px) {
  body {
    back            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                            精选
                                                        
                            2024-06-17 09:55:29
                            
                                496阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            响应式布局就是在任何情况下,页面布局效果都不会发生变化,他会根据用户的电脑屏幕,尺寸大小来改变自身的布局。 浏览器窗口,VH和VW,VH 的计算方法就是,将窗口的大小分为100份,vh 的计算方法和 vh 是一样的,一个是计算高,一个是计算宽。 弹性盒子,弹性盒子是CSS3的一种新布局模式,代替浮动            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-06-24 00:22:40
                            
                                479阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            方案:
REM、VW、REM + VWlib-flexiblepostcss-plugin-px2rem -Dmain.js
import 'lib-flexible/flexible.js'vue.config.js:css: {
  loaderOptions: {
    postcss: {
      plugins: [
        requrie('postcss-plugin-            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-10-06 10:09:02
                            
                                118阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            3  《关山月》一、案例描述考核知识点导入式CSS样式练习目标熟练运用标记选择器控制元素。	掌握CSS导入式            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-08-03 17:02:40
                            
                                749阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            CSS3简介: CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言。 CSS3是CSS的最新版本,增加了大量的样式、动画、3D特效和移动端特性等。 前端三层: 语言 功能 结构层 HTML 搭建结构、放置部件、描述语义 样式层 CSS 美化页面、实现布局 行为层 Javascript 实现交互效果、数据收发、表单验证 CSS使样式和结构分离: CS            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-03-04 10:45:05
                            
                                62阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
             消息提示框在实际应用场景当中比较常见,最常用的就是element ui的消息提示框,我们通常都是直接使用它们,但是我们有没有尝试过去探究其实现原理,并自己动手实现呢?为了提升我们的个人能力和竞争力,我们可以尝试来实现这样一个消息提示框。 我们来查看一下最终实现效果,如下图所示: 我们创建一个message文件夹,然后创建一个index.html文件,以及message.js和            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-01-15 11:52:47
                            
                                61阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            在日常开发中经常会用到遮挡层,一直没有机会研究,今天实现了,感觉原理原来如此简单。不过你可以理解为垂直于屏幕的高度            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-06-28 14:21:44
                            
                                69阅读
                            
                                                                             
                 
                
                                
                    