• 0

  • 212

CSS的阳光大道(持续更新)

云哥

关注云计算

1个月前

个人实习技术记录

几何

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;
}
复制代码

布局

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、垂直居中

复制代码

3、vertical-align

3.1、场景:指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式,不能用它垂直对齐块级元素
3.2、是否是继承属性:否
3.3、使元素相对其父元素垂直对齐
  • baseline-------使元素的基线与父元素的基线对齐
  • middle---------使元素的中部与父元素的基线加上父元素x-height的一半对齐
  • text-top-------使元素的顶部与父元素的字体顶部对齐
  • text-bottom----使元素的底部与父元素的字体底部对齐
  • sub------------使元素的基线与父元素的下标基线对齐
  • super----------使元素的基线与父元素的上标基线对齐
  • <length>-----使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
  • <percentage>-使元素的基线对齐到父元素的基线之上的给定百分比,该百分比是line-height属性的百分比(可以是负数)
3.4、使元素相对整行垂直对齐
  • top------------使元素及其后代元素的顶部与整行的顶部对齐。
  • bottom---------使元素及其后代元素的底部与整行的底部对齐。
免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

云计算

212

相关文章推荐

未登录头像

暂无评论