Solution 1： 给absolute元素的left设为50%, margin-left设为absolute元素宽度一半的负数 .con{ width:200px; height:200px; background:#ccc; position:relative; } .abs{ width:40px; height:20px; background:steelblue; position:absolute; bottom:0; le
基本语法格式 box-shadow: 水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； 前两个属性是必须写的。其余的可以省略。外阴影 (outset) 是默认的，但是不能写，想要内阴影可以写 inset div { width: 200px; height: 200px; border: 10px solid red;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 200px; height: 200px; background-colo
区别： v-show适用于需要频繁的切换，v-if适用于运行条件很少改变。 v-show比v-if性能更高，v-show严格意义上说是“条件隐藏”，只能动态的改变样式，符合条件就显示，不符合条件就display:none，但元素还在，不需要增删DOM元素，若项目较大，推荐v-show，减少浏览器后期操作性能。v-if适用于多种条件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati
有一次写项目，发现了一个我个人未理解的一个问题，就是z-index在定位中失效了，后来才发现假如给予层级、定位的盒子与另一个给予层级、定位的盒子为父子关系，那么z-index是不生效的。 尤其是在早期使用JS写页面下拉菜单效果的时候，时常(个人)会把下拉菜单内容写
1、绘制三角形 用 css 画三角形主要是利用边框 border 来设置的，是不是有点迷惑？我们先试试把 div 四条边框设置成不同的颜色看看会出现什么效果： <head> <style> .triangle { width: 50px; height: 50px; border-bottom
念一场雪，念一段过往，四季轮回，沉淀安然，愿有衣暖身，有人暖心。 主要知识点： 1、transform-style: preserve-3d;立体效果开启 2、transition: all 1s;动画过渡 3、transform: rotateY(180deg);3d旋转 4、子绝父相 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
目录一、定位属性简介二、各属性值的具体功能1. relative2. absolute3. fixed三、三种定位属性的效果总结 参考资料：https://www.bilibili.com/video/BV18J411S7tZ?p=4 一、定位属性简介 position属性是用于指定一个元素的定位方法类型的属性，它的取值有：static（默认类型）、relative、a
为什么要使用Postcss 众所周知转换 px 单位的插件有很多，知名的有 postcss-px-to-viewport 和 postcss-pxtorem，前者是将 px 转成 vw，后者是将 px 转成 rem，精简了不常用的配置。 将成为vw优先单位使用，以rem作为回退模式。考前端培训虑到vw在移动设备的支持度不如rem，这款插件很好的解
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法 混合其实就是设置功能属性，把可复用的提取出来 第一种混合的使用方法 index.html <div class="box"></div> <div class="box2"></div> index.less .bordered { border: 1px solid #ccc; } .box{ widt
变量 基本使用 index.html <div id="box"></div> index.less @width:100px; @height: @width+10px; .box{ width: @width; height: @height; background-color: orange; } 编译后的代码index.css less使用@当做关键字来定义一个变量，这个变量就可以在css的属性中使用
高度塌陷 父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷（造成父元素高度为 0） 高度塌陷的解决方法 一、给父元素添加声明overflow：hidden 优点：代码少、简单 缺点：1、只适用于高版本游览器，IE6不支持。 2、不能和position定位配合使用，超出的尺寸会被隐藏 <
文章目录 前言一、弹性盒子的基本概念二、弹性盒子的容器属性1、flex-direction：布局方向2、flex-wrap：环绕效果3、flex-flow4、justify-content：对齐方式5、align-items6、 align-content 三、弹性盒子的项目属性1、order属性2、flex-grow属性3、flex-shrink属性4、align-sel
文章目录 一、盒子塌陷问题1.出现问题2.解决办法3.具体实现 二、其他盒子塌陷问题 一、盒子塌陷问题 1.出现问题 有两个嵌套的DIV盒子，父盒子里面有一个子盒子，想让子盒子和父盒子上边距之间有一段间距，但是给子级元素添加的外边距没有效果，效果显示在了父级元素身上。 例如：
思考题 我们在之前浮动元素有一个标准的父元素，他们都有一个共同的特点，都是有高度的。 但是，所有的父盒子都必须有高度吗？ 理想中状态，让子盒子撑开父亲，有多少孩子，父盒子就有多高 但是 点击查看代码 .box{ width: 800px; border: 1px solid brown;
1、圣杯布局 什么是圣杯布局以及双飞翼布局 - 知乎 上面这个链接讲的非常清晰，下面是我实现的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
啊css模型自动内减 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
预览：(水平方向设置最小宽度) <body> <div id="app"> <div id="header">头部</div> <div id="main"> <div id="side">侧边栏</div> <div id="c
<template> <div class="box"> <h3>我的购物车</h3> <p>获取图书信息</p> <!-- <button>点击获取信息</button> --> <ul v-for="(item, index) in list" :key="index"> &l
设置视距800px 在需要旋转的元素内，要做出3d效果，需要设置 transform-style: preserve-3d; 使用 vertical-align: top;去除图片之间的基线缝隙 <title>旋转六面正方体</title> <style> html{ perspective: 800px; } .cube{
就像photoshop中的图层功能会把一整张图片分层一个个图层一样，网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的，然后通过定位属性position对元素进行定位摆放，最终实现网页的布局。 定位属性position有4个值，分别是静
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。 当上下相邻的两个块元素（兄弟关系） 相遇时，如果上面的块元素定义了 margin-bottom 下面的块元素定义了 margin-top 时，就会出现垂直外边距合并。 注意：这里的合并，并不是两个值相加。而是取这两个值的最大值。 例子：
