目录
CSS盒模型
一个盒子中主要的属性有5个：width、height、padding、border、margin。如下：
- width：内容的宽度
- height：内容的高度
- padding：内边距
- border：边框
- margin：外边距
盒子模型有两种：1、标准盒子模型 2、IE盒子模型
两者的区别是：
- 标准盒子模型的实际宽度是：width+padding+border
- 标准盒子模型的实际高度是：height+padding+border
- IE盒子模型的实际宽度是：width
- IE盒子模型的实际高度是：height
box-sizing：
- content-box 标准盒子模型
- border-box IE盒子模型
- 不设置默认为标准盒子模型
水平垂直居中的几种方式
1.使用flex布局
.father {
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
2.使用grid布局
.father {
display: grid;
place-items: center; /*水平垂直居中*/
}
3.使用绝对定位和transform属性(父元素需要写高度)
.father {
position: relative;
height: 200px;
background: skyblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*将元素自身的宽高的一半作为偏移量*/
}
4.使用position和margin属性(父子元素需要写宽高)
.father {
position: relative;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 50%;
height: 50%;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
}
5.使用text-align和line-height（父元素要写高度）
.father {
line-height: 200px;/*垂直居中关键*/
text-align:center;
height: 200px;
font-size: 36px;
background-color: #ccc;
}
flex布局
1、父元素属性
- flex-direction 主轴排列方向 row | row-reverse | column | column-reverse;
- flex-wrap 换行 nowrap | wrap | wrap-reverse;
- justify-content 主轴对齐方式 flex-start | flex-end | center | space-between | space-around | space-evenly;
- align-items 副轴对齐方式 flex-start | flex-end | center | stretch | baseline;
- align-content 多条副轴对齐方式 flex-start | flex-end | center | stretch | space-between | space-around ;
2、子元素属性
- order 排序，数值越小，排列越靠前，默认为 0 属性值 0 | 1 | 2 | ...
- flex-grow 放大比例，默认为0，默认不放大，属性值 0 | 1
- flex-shrink 缩小比例，默认为1，默认缩小， 属性值 1 | 0
- flex-basis 子元素的大小，优先级高于width ，属性值 auto|xxPX
- flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto) 。属性值 auto | none | 1
- align-self 子元素在副轴的对齐方式，优先级高于align-item，属性值 auto | flex-start | flex-end | center | baseline | stretch;
样式穿透
css中通常会在 style 标签内添加 scoped 来避免父组件对子组件的影响，添加了之后只能修改当前组件的样式。
这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值，从而避免父组件对子组件的样式的影响。
如果去掉scoped的话就会影响全局样式，但是加上scoped又不能在当前组件修改子组件的样式，这个时候就可以使用 深度选择器了。
用法：
/deep/ .con{
color:red;
}
>>> .con{
color:red;
}
::v-deep .con{
color:red;
}
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。
vue3正确的写法
::v-deep(.con){
color:red;
}
注意：/deep/ ::v-deep 只能在像 less , sass 等css预处理器中使用，在原生css中使用无效，所以原生css当中应使用 >>>
vue2使用/deep/ vue3中把/deep/ 改为 :deep
————————————————
版权声明：本文为优快云博主「小刘前端」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/m0_58348743/article/details/128492046
Vue 深度选择器:deep()与::v-deep详解
在Vue中，::v-deep 和 :deep() 都用于修改CSS选择器的作用域。
区别在于：
:deep() 是一个伪类选择器，可以用于将CSS规则应用于当前组件及其所有子组件中匹配选择器的元素。例如，.foo :deep(.bar)会选择包含class为"bar"的元素的所有嵌套层次结构。
::v-deep 是一个特殊的深度作用选择器，它只在scoped样式中起作用，并且可以将CSS规则应用于当前组件及其所有子组件中匹配选择器的元素。例如，.foo::v-deep .bar 会选择包含class为"bar"的元素的所有嵌套层次结构，但仅对 .foo组件的样式生效。
因此，::v-deep 更具有局部性，而且只能在scoped样式中使用。而 :deep() 则更加通用，适用于全局样式和嵌套组件中的样式。
针对于不同电脑上deep无法生效的原因，大致分为以下几种：
版本问题: 有时候代码库的版本和计算机上安装的库版本不匹配，导致代码无法正常运行。建议检查代码所需的库是否已正确安装并更新至最新版本。
环境差异:不同电脑的操作系统、硬件、软件配置等环境因素可能会影响代码的运行。例如，某些代码需要使用特定版本的 GPU、驱动程序或依赖于特定的操作系统功能。在这种情况下，需要检查代码所需的环境是否在你的电脑上可用。
输入数据问题:有时候代码的行为取决于输入数据。如果输入数据与预期不符合，代码可能无法正常运行。建议检查输入数据是否符合代码的要求，并尝试使用其他数据重新运行代码。
代码问题: 最后，代码本身可能存在错误或 bug，导致它无法在某些电脑上正常工作。这种情况下，可以尝试从代码库中找到解决方案或联系代码作者以获取帮助。
————————————————
版权声明：本文为优快云博主「CCT丶Blue」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/CCC_chtt/article/details/130387675
vue2和vue3的区别（超详细）
vue2和vue3的区别（超详细）_vue2和vue3区别-优快云博客
TypeScript在vue2项目中的写法
TS在vue2项目中的写法_vue2使用ts_AllenZouJ的博客-优快云博客
TypeScript 全面介绍
前端学习网站推荐
MDN网站 :overflow - CSS：层叠样式表 | MDN
flex布局 阮一峰
grid 布局 阮一峰
CSS文本效果
1、word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句，不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。
overflow-wrap - CSS：层叠样式表 | MDN
2、text-align属性设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。start | end | left | right | center | justify
前端框架和UI组件库 - 汇总
你不知道的前端框架和UI组件库 - 大合集【收藏必备】_前端组件库-优快云博客
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
