1.基本概念flex布局是一种布局模型，经常被称之为flexbox，使用flex布局之后，他会给子元素提供强大空间分配和对齐能力。 在没有使用flex布局之前，常用布局有：流式布局，浮动布局，定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置，还要注意父元素高度坍塌。 flex的优点就是避免不灵活的布局形式，创建更多种布局模式供你选择，解决了子元素的对齐和分布与响应式等问题。缺点是只能依靠自身的布局模式，稍有变化则无法改变。 2.flex的指定 （1）display属性 给任意元素声明display：flex或者声明display：inl
2.1CSS三角网页中常见的一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标。CSS三角做法代码:div{width:0;height:0;/*兼顾兼容性line-height:0;font-size:0;*/border:50pxsolidtransparent;border-left-color:pink;}2.2CSS三角强化语法：width:0;height:0;/*1.只保留右边的边框有颜色*/border-color:transparentskybluetransparenttransparent;/*2.样式都是solid*/border-style:solid;
前端学习路线小总结：基础入门：HTMLCSSJavaScript三大主流框架：VUEREACTAngular深入学习：小程序NodejQueryTypeScript前端工程化文章目录一.CSS布局-对齐1.水平对齐1.1元素居中对齐1.2文本居中对齐1.3图片居中对齐1.4使用定位方式实现左右对齐1.5使用浮动
1.1 尝试新颖的CSS3特性首先，我们来看一个具体的案例。 https://code.juejin.cn/pen/7277536985772720139 1.2 CSS3新特性简介和浏览器支持情况新特性简介：1）强大的CSS3选择器2）抛弃图片的视觉效果3）盒模型变化(多列布局和弹性盒模型)4）阴影效果5）Web字体和webFont图标6）CSS3过渡与动画交互效果7）媒体查询什么是渐进增强和优雅降级？1）渐进增强：指一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。相当于向上兼容，从非常基础的、能够起作用的版本开始，并不
css渐变效果使用CSS渐变可以在两种颜色间制造出平滑的渐变效果。用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布型类型含义线性渐变linear-gradient指在一条直线上进行渐变径向渐变radial-gradient是一种从起点到终点颜色从内到外进行圆形渐变（从中间向外拉，像圆一样）一、线性渐变创建一个线性渐变，至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。语法background:linear-gradient(di
该篇适用于从零基础学习前端的小白初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识一、导言HTML，CSS，JavaScript都是单独的语言；他们构成前端技术基础；（1）HTML：负责网页的架构；（2）CSS：负责网页的样式，美化；（3）JavaScript（JS）：负责网页的行为；我们将上述概念，拿出来，作为初学者可能还是不理解，还是一头雾水，很正常，那我们就以实践来帮助自己理解。接下来我们一起写一个简单的案例。二、用小案例帮我们理解HTMLCSSJavaScript各自的概念注意:初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识。我们的目
要实现的九宫格效果图如下：公共样式：div{width:300px;height:300px;}ul{padding:0;width:100%;height:100%;}li{list-style:none;text-align:center;line-height:100px;margin:3px;background-color:#243F49;color:white;border:1pxsolidwhite;font-weight:bolder;}div>ul>li>1/li>li>2/li>li>3/li>li>4/li>li>5/li>li>6/li>li>7/li>li>8/li>
一.案例效果展示 二.搭建一个基本的html结构，将需要用到的图片居中html的结构非常简单，只要一个盒子里面放二张照片即可html代码：css代码：*{margin:0;padding:0;}body{display:flex;justify-content:center;align-items:center;background-color:#01C4DA;}三.首先我们要对二张图片进行翻转处理就应该给她们开启定位，这样他们就会覆盖在一起了.img_box{width:400px;height:500px;padding-top:140px;position:relative;}img{w
css中通常会在style标签内添加 scoped 来避免父组件对子组件的影响，添加了之后只能修改当前组件的样式。这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值，从而避免父组件对子组件的样式的影响。添加后控制台显示的样式就会像这样： 设置了上述scoped的话，如果想要在父组件中修改子组件的样式时应该怎么样做呢？如果去掉scoped的话就会影响全局样式，但是加上scoped又不能在当前组件修改子组件的样式，这个时候就可以使用/deep/了。/deep/表示深度选择器用法： 注：除了/deep/以外，>>> 和 ::v-deep也可以实现同样的效果注意：/deep/只能
我正在寻找调整Swift.print函数的方法。覆盖它不是一个选项，因为如果你使用Swift.print(:)它可能会被绕过选择器无法识别标识符:@objcclassfuncprintSwizzle(){guardletinstance=class_getInstanceMethod(self,#selector(print(separator:terminator:))),letswizzleInstance=class_getInstanceMethod(self,#selector(swizzlePrint(separator:terminator:)))else{return}
