目录
1、三角形画法
给一个盒子，宽高设为0，border设为一个值，例如100px,颜色为透明，这样再给其中一条边设颜色，也就显示出了正方形的四分之一，形状为三角形,以下为顶角朝右的三角形代码：
.triangle{
width: 0;
height: 0;
border: 100px solid transparent;
border-left-color: orange;
}
2、消除图片间留白
2.1 图片大小独占一行时
① 给元素设display : block
img标签属于行内块元素，与行标签一样，在排版时由于对齐方式会出现空白，当设置为 display: block 时，改变了元素的布局模式，块级元素不再遵循行内元素的基线对齐规则，也就没有了因基线对齐而产生的底部空白间隙
② 给元素设浮动：float : left
会让元素浮动起来脱离文档流，并尽可能向左排列，不过其空白部分依然是占位置的，只不过被浮动起来的图片给“遮挡”住了
2.2 一行有多张图片时
①给父级设 font - size:0
在HTML中，元素之间的空白间隙（如多个 img 标签之间或者内联元素之间）实际上是空白字符（空格、换行、制表符等）导致的。浏览器会把这些空白字符当作一个空格来处理，从而产生间隙。
当设置父元素的 font - size:0 时，它会影响空白字符的显示。因为空白字符的大小是由 font - size 控制的，将 font - size 设为0，空白字符就没有了尺寸，也就不会占据空间，从而消除了子元素之间的间隙。
② 给父级设 display : flex
在弹性布局中，子元素（如图片）会按照弹性盒子的规则排列，它会忽略掉HTML中元素之间的空白字符（空格、换行等）对布局的影响。
例如，有多个 img 元素作为子元素放在一个设置为 display: flex 的父元素中，这些图片会紧密地排列在一起，就好像空白字符不存在一样。因为弹性布局关注的是如何根据容器（父元素）的大小和子元素的属性（如 flex - grow 、 flex - shrink 、 flex - basis 等）来分配空间，而不是像普通文档流那样受到空白字符的干扰。
③ 给元素设浮动：float : left
3、蒙层
蒙层即常规或hover状态下给图片蒙上一层透明颜色效果，给子盒子设颜色、透明度、和绝对定位脱离文档流，在常态或hover状态下显示
4、超出文本显示“...”
超出所需部分或盒子宽度的文字显示为省略号：
单行文本：
.box{
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示“...” */
white-space: nowrap; /* 强制不换行 */
}
多行文本：
.box{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /* 基于webkit的一种布局模式 */
-webkit-linr-clamp: 3; /* 最多显示三行，剩余显示省略号 */
-webkit-box-orient: vertical;/* 确保是垂直方法三行 */
}5、margin上下重叠问题
盒子上下设margin，上盒子的margin-bottom与下盒子的margin-top会重叠，如一大一小，则取大的margin值
6、盒子绝对居中方法
6.1 已知子盒子自身宽高（假设宽高都为100px)
.son{
position: absolute;
top:calc(50% - 50px);
left: calc(50% - 50px);
}6.2 未知子盒子自身宽高
① 平移
.son{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);/* 向上向左移动自身的50% */
}
② 设margin : auto
绝对定位，设四个方位（left、top、right、bottom)都为0px,这时相当于让子盒子的定位范围为整个父盒子内部，这时候再设margin:auto，浏览器就会将四个方向的剩余空间均匀的分给左右与上下，实现绝对居中；当然，（left、top、right、bottom)也可以设为相同的其他值，这样活动范围会小一些，同样可以实现功能，但需要注意不要让活动范围小于子盒子的本身大小，不然可能会出现问题
.son{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}③ 父元素设flex
给父元素设：
.parent{
display: flex;
justify-content: center;
align-items: center;
}主轴、辅轴都只有一条，直接实现水平垂直居中
7、满屏显示的“品”形字
给三个盒子，第一个设margin : 0 auto;
后两个设fixed固定定位，一个设“left:0;bottom:0;”，一个设“right:0;bottom:0;”
8、href与src的区别
1、请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系，在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片
2、作用结果不同：href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容
3、浏览器解析方式不同：当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因
标签：flex,盒子,元素,学习,空白,内容,12.18,margin,left From： https://blog.csdn.net/clp20031101/article/details/144567027