分类: CSS | polariis

文章分类
CSS 15 Git 4 Axios 4 hexo 1 JavaScript 11 Vue3 3 Web 1 Vue 1 插件&工具使用 1 TypeScript 4 HTML 2 vuex4 1 Vite 1
                            
                            关于移动端CSS
                        
                                总结： 兼容移动端主流浏览器，处理Webkit内核浏览器即可。
查看设备网站：https://material.io/devices/
1. 移动端调试方法
chrome浏览器的模拟手机；
搭建本地服务器，手机和服务器在一个局域网内，通过手
                            
                                2021-12-11
                            
                                    CSS
                                
                            CSS
                        
                            CSS三角的制作
                        
                                1. 等腰三角形使用场景：悬停到导航栏的某个li
原理：
// 宽高必须是0 ！！！
.box1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
                            
                                2021-11-27
                            
                                    CSS
                                
                            CSS
                        
                            Less
                        
                                CSS的弊端：

Less1. Less介绍
Leaner Style Sheets，是一门CSS扩展语言，也称为CSS预处理器。
作为CSS的一种形式的扩展，在现有的CSS语法上为CSS加入程序式的特性。
它在CSS的语法上，引入了变
                            
                                2021-11-25
                            
                                    CSS
                                
                            CSS
                        
                            Less
                        
                            border、padding与margin
                        
                                场景：鼠标悬停出现内边框，位置不是写死的，所以导致li上下动。
解决：添加padding。且padding值 = -border里的数字。
border: #00FFFF 5px inset;
margin: -5px;

PS：如果是外边
                            
                                2021-11-10
                            
                                    CSS
                                
                            CSS
                        
                            CSS需要留意的可置换元素
                        
                                block，inline 和 inlinke-block 细节对比：inline-block 看上去值名 inline-block 是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比
                            
                                2021-11-07
                            
                                    CSS
                                
                            CSS
                        
                            外边距合并现象
                        
                                使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
1. 相邻块元素垂直外边距的合并：
当上下两个相邻的两个块元素（兄弟元素）相遇时，如果上面的元素有下边距margin-bottom，下面的元素有上边距margin-top。
                            
                                2021-11-07
                            
                                    CSS
                                
                            CSS
                        
                            精灵图与字体图标
                        
                                1. 精灵图盒子位置是固定的，移动的是图片，所以一般x,y的值都是负的（向左，向下）。
background: url() no-repeat -x坐标 -y坐标;

坐标数值在切片工具上看。
缺点：

图片文件还是比较大；
图片本身放大和
                            
                                2021-11-07
                            
                                    CSS
                                
                            CSS
                        
                            CSS样式的继承
                        
                                1.行高的继承font:12px/24px 'Microsoft YaHei';              

指的是行高24px。
font:12px/1.5 'Microsoft YaHei';

指的
                            
                                2021-11-07
                            
                                    CSS
                                
                            CSS
                        
                            CSS外边距合并现象 & BFC & IFC
                        
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

1. 外边距合并（塌陷）的两种情况1.2 相邻块元素垂直外边距的合并：
当上下两个相邻的两个块元素（兄弟元素）相遇时，如果上面的元素有下边距 margin-bottom
                            
                                2021-11-07
                            
                                    CSS
                                
                            CSS
                        
                            BFC
                        
                            各类居中&定位
                        
                                图片的各类居中
想让图片水平居中：
让其父元素margin: 0 auto;    有宽度的情况下。
让其父元素text-align: center;

如果是小图标，可以用背景图的方法：
然后加background-position属性
                            
                                2021-09-27
                            
                                    CSS
                                
                            CSS
                        
                            边框图片的使用
                        
场景：盒子大小不一，但是边框样式相同时。不以背景图的形式。
实现：使用css或js切图。把四个角切出去，中间部分可以铺排，拉伸或环绕。（九宫格）
切的顺序：顺时针，上右下左。
边框图片的语法：

PS：

具体四个角的宽度可以使用切图
                            
                                2021-09-26
                            
                                    CSS
                                
                            CSS
                        
                            媒体查询+rem实现元素动态变化
                        
                                1. rem
em相对于父元素的字体大小来说的。
rem相对于HTML元素字体大小来说的。1rem等于html元素上字体设置的大小。
rem的优点就是可以通过修改HTML里的文字大小来改变页面中元素的大小 可以整体控制。

2. 媒体查询

                                2021-09-25
                            
                                    CSS
                                
                            CSS