个人实习技术记录
#几何
1、三角形
- 正常的盒子
- 上下左右的 border 之間是傾斜相連的
- border-color顏色的順序是：「上、右、下、左」
<div class="triangle">
</div>
<style>
.triangle {
width: 30px;
height: 30px;
border-width: 30px;
border-color: pink #2db7f5 #19be6b #ed4014;
border-style: solid;
}
</style>
- 先把整个boder的颜色设为透明，其他属性跟三角形一致（如果是正三角形的话），
如果三角形向下就设上方的border的颜色
.triangle {
width: 0px;
height: 0px;
border: 30px solid transparent;
border-top: 30px solid pink;
}
- 利用三角形做tooltip对话框
<div class="container">
</div>
<style>
.container {
height: 100px;
width: 400px;
background-color: lightpink;
position: relative;
}
.container::before {
position: absolute;
transform: translate(-50%, -98%);
content: "";/*往伪元素里填写空字符串，没有内容的伪元素不会出现在画面上,*/
top: 0;
left: 50%;
width: 0px;
height: 0px;
border: 11px solid transparent;
border-bottom: 11px solid lightpink;
}
</style>
2、箭头（这里我利用了箭头做了个select选择框）
- 箭头实现跟三角形差不多，右箭头就设置上边框和右边框，然后利用transform的2D旋转45deg就行了
<div id="app">
<div class="select" :class={select_active:flag} @click="flag=!flag">
<span class="arrow_icon" :class={arrow_icon_active:flag}></span>
<div class="select_dropdown" v-show="flag"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
<style>
.select {
height: 30px;
width: 200px;
position: relative;
border: 1px solid #DCDEE2;
border-radius: 4px;
cursor: pointer;
margin: 50px;
}
.select_active {
border: 1px solid #2d8cf0;
box-shadow: 0 0 0 2px rgba(45, 140, 240, .2)
}
.arrow_icon {
position: absolute;
top: 50%;
right: 12px;
display: inline-block;
height: 6px;
width: 6px;
border-bottom: 2px solid #808EB0;
border-right: 2px solid #808EB0;
transform: rotate(45deg);
transition: all .2s ease-in-out;
margin-top: -6px;
}
.arrow_icon_active {
margin-top: -3px;
transform: rotate(225deg);
}
.select_dropdown {
position: absolute;
top: 35px;
height: 200px;
width: 200px;
border-radius: 4px;
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
transform-origin: center top;
animation: select_dropdown 5s ease-in;
}
@keyframes select_dropdown {
0% {
transform: scale(1, 0);
}
25% {
transform: scale(1, 1.2);
}
50% {
transform: scale(1, 0.85);
}
75% {
transform: scale(1, 1.05);
}
100% {
transform: scale(1, 1);
}
}
</style>
#布局
1、盒模型
- box-sizing：content-box （默认值）
- 尺寸计算公式：
- width = 内容的宽度
- height = 内容的高度
- 如果设置一个元素的宽为100px，border和padding
- 则盒子的宽度为元素宽度+border x 2+padding x 2 = 140（margin只是与外面的距离，不算里面的喔）
- 意思就是加了padding、border后盒子会变大，而内容不受影响
- box-sizing：border-box
- 尺寸计算公式：
- width = border + padding + 内容的宽度
- height = border + padding + 内容的宽度
- 如果设置一个元素的宽为100px，border和padding
- 则盒子的总宽度不变，而内容的宽度被压缩到了60px（margin只是与外面的距离，不算里面的喔）
- 意思就是加了padding、border后盒子总宽度不变，内容宽度会被压缩
2、Flex弹性布局（不容易理解的只有flex属性和flex-basic属性了）
2.1 基础入门：阮一峰：Flex 布局教程
2.2 flex属性是flex-grow，flex-shrink和flex-basis的缩写(实在记不住还是老老实实写完整的吧)
flex-basis：指定了 flex 元素在主轴方向上的初始大小-
auto: 默认值，根据item的内容决定
-
<width/height>: 指定特定的宽/高，可以是数值也可以是比例，比例是相对于其父弹性盒容器主轴尺寸的百分数
-
**参考链接：**www.zhangxinxu.com/wordpress/2…
-
---->flex-basis VS width<----
-
flex-basis：不仅决定了初始大小，并且如果content内容最小宽度超过了flex-basis设定的值，则以content的宽度为准
-
<div class="container">
<div class="center">1111111111111111111111111111111111111111111111111111</div>
</div>
<style>
.container {
display: flex;
height: 100px;
width: 400px;
border: 1px solid deepskyblue;
padding: 10px;
}
.center {
height: 100px;
flex-basis: 100px;/*内容的宽度已经超过了100px*/
background-color: deepskyblue;
}
</style>
- width：写死了，字符会直接溢出容器之外（与flex-basis相比之下就有点逊色了）
注:
1、当flex-direction: row 时，flex-basis 決定了 width．
2、当flex-direction: column 時，flex-basis 決定了 height．
3、width只是flex-basis为auto时候间接生效，其余时候使用优先级更高的flex-basis属性值；
flex-grow: 決定 flex布局的 item（项目） 如何分配剩余的空間，也就是每个item的放大比例，默认为0，也即不放大
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<style>
.container {
display: flex;
height: 100px;
width: 400px;
border: 1px solid deepskyblue;
padding: 10px;
}
/*注：item的放大比例 =（item 的 flex-grow / 全部 item 的 flex-grow 总和) x 剩余空间*/
/*这里容器container的width为400px，每个item的width为100px，剩余 400-100*3= 100px */
.left {
height: 100px;
width: 100px;
background-color: deepskyblue;
flex-grow: 1;/*放大比例：（1/1+1+2）x100=25,因此放大后left盒子的实际宽度为125px */
}
.center {
height: 100px;
width: 100px;
background-color: lightpink;
flex-grow: 2;/*放大比例：（2/1+1+2）x100=50,因此放大后center盒子的实际宽度为150px */
}
.right {
height: 100px;
width: 100px;
background-color: deepskyblue;
flex-grow: 1;/*放大比例：（1/1+1+2）x100=25,因此放大后right盒子的实际宽度为125px */
}
</style>
flex-shrink: 当使用flex布局的容器空间有限时，这个属性能决定每个item的缩小比例，默认为1
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<style>
.container {
display: flex;
height: 100px;
width: 400px;
border: 1px solid deepskyblue;
padding: 10px;
}
/*注：item的缩小比例 =（item 的 flex-shrink / 全部 item 的 flex-shrink 总和) x （宽或者高）*/
/*当flex-direction为row时，就乘于宽，为column时，乘于高*/
.left {
height: 100px;
width: 200px;
background-color: deepskyblue;
flex-shrink: 1;/*缩小比例：（1/1+1+2）x200=50,因此缩小后left盒子的实际宽度为150px */
}
.center {
height: 100px;
width: 200px;
background-color: lightpink;
flex-shrink: 2;/*缩小比例：（2/1+1+2）x200=100,因此缩小后center盒子的实际宽度为100px */
}
.right {
height: 100px;
width: 200px;
background-color: deepskyblue;
flex-shrink: 1;/*缩小比例：（1/1+1+2）x200=50,因此缩小后right盒子的实际宽度为150px */
}
</style>
- flex属性（默认值：0 1 auto，即有剩余空间不放大，并在空间不足时缩小，根据item的内容决定宽/高）
- 以下属性参考链接：blog.csdn.net/aliven1/art…
flex:none等同于设置flex: 0 0 autoflex:auto等同于设置flex: 1 1 auto- 当flex取值为一个非负数字时，该数字代表flex-grow，而flex-shrink取1，flex-basis取0%
- 如
flex:1等同于设置flex-grow:1;flex-shrink:1;flex-basis:0%
- 如
- ** 以下的我觉得就没有必要记了， 能看懂就行**
- 当flex取值为一个长度或百分比时，该数字代表flex-basis，而flex-shrink取1，flex-grow取1
- 如
flex:100px等同于设置flex-grow:1;flex-shrink:1;flex-basis:100px
- 如
- 当flex取值为两个非负数字时，分别代表flex-grow和flex-shrink，flex-basis取0%
- 如
flex:2 2等同于设置flex-grow:2;flex-shrink:2;flex-basis:0%
- 如
- 当flex取值为一个非负数字和（一个长度或者百分比）时，分别代表flex-grow和flex-basis，flex-shrink取1
- 如
flex:2 100px等同于设置flex-grow:2;flex-shrink:1;flex-basis:100px
- 如
3、水平垂直居中（对于我来说只分为flex布局与其他方法，flex太强了）
3.1、flex布局
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
height: 100px;width: 100px;border: 1px solid pink;
display: flex;
justify-content: center;
align-items: center;
}
.son {
height: 50px;width: 50px;background-color: pink;
}
</style>
3.2、position + (transform/负外边距/margin:auto)
- 无论是哪一种都需要父元素相对定位，子元素绝对定位
- 这里面最好用的是transform，不好用的是负外边距，因为需要知道子元素的宽高
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
height: 100px;width: 100px;border: 1px solid pink;
position: relative;/*父元素相对定位*/
}
.son {
height: 50px;
width: 50px;
background-color: pink;
/*以下三种任选其一都可以实现效果*/
/*绝对定位后移动子元素的原因：*/
/*1、设置top: 50%，只是子元素的上边框距离父元素的上边框50%而已；所以要往上挪自身高度的50%*/
/*2、设置left：50%，只是子元素的左边框距离父元素的左边框50%而已；所以要往左挪自身宽度的50%*/
/*第一种：position + transform*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*第二种：position + 负外边距（需要知道子元素的宽高）*/
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
/*第三种：position + margin:auto*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
4、vertical-align
4.1、场景：指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式，不能用它垂直对齐块级元素
4.2、是否是继承属性:否
4.3、使元素相对其父元素垂直对齐
- baseline-------使元素的基线与父元素的基线对齐
- middle---------使元素的中部与父元素的基线加上父元素x-height的一半对齐
- text-top-------使元素的顶部与父元素的字体顶部对齐
- text-bottom----使元素的底部与父元素的字体底部对齐
- sub------------使元素的基线与父元素的下标基线对齐
- super----------使元素的基线与父元素的上标基线对齐
<length>-----使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。<percentage>-使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比（可以是负数）
4.4、使元素相对整行垂直对齐
- top------------使元素及其后代元素的顶部与整行的顶部对齐。
- bottom---------使元素及其后代元素的底部与整行的底部对齐。
5、字体样式
5.1、文字两端对齐
<style>
/*1、多行文本两端对齐*/
/*1.1、使用CSS的text-align属性实现*/
.container {
width: 203px;
height: 100px;
border: 1px solid pink;
text-align: justify;
text-align-last: justify;
text-justify: inter-ideograph; /*兼容ie*/
}
.container p {
width: 200px;
height: 20px;
text-align: justify;/*给文字元素添加text-align: justify;*/
}
/*2、实现单行文本两端对齐*/
.container {
width: 203px;
height: 100px;
border: 1px solid pink;
}
/*2.1、利用伪类 :after*/
.container:after {
content: "";
display: inline-block;
width: 100%;
}
/*2。2、用一个空的行内标签包住文字，比如span，i，并设置padding-left或者width为100%*/
p i {
display: inline-block;
/*padding-left: 100%;*/
width: 100%;
height: 20px;
}
</style>
<div class="container">
<p>你好</p>
<!-- <p>百度工程师</p> -->
</div>
