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

时间:2020-9-4 作者:admin

个人实习技术记录
几何

1、三角形

  • 正常的盒子
  • 上下左右的 border 之間是傾斜相連的
  • border-color顏色的順序是:「上、右、下、左」

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

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

<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的颜色

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

.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后盒子会变大,而内容不受影响

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

  • box-sizing:border-box
  • 尺寸计算公式:
    • width = border + padding + 内容的宽度
    • height = border + padding + 内容的宽度
  • 如果设置一个元素的宽为100px,border和padding
  • 则盒子的总宽度不变,而内容的宽度被压缩到了60px(margin只是与外面的距离,不算里面的喔)
  • 意思就是加了padding、border后盒子总宽度不变,内容宽度会被压缩

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

2、垂直居中


3、vertical-align

3.1、场景:指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式,不能用它垂直对齐块级元素
3.2、是否是继承属性:否
3.3、使元素相对其父元素垂直对齐

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

  • baseline——-使元素的基线与父元素的基线对齐
  • middle———使元素的中部与父元素的基线加上父元素x-height的一半对齐
  • text-top——-使元素的顶部与父元素的字体顶部对齐
  • text-bottom—-使元素的底部与父元素的字体底部对齐
  • sub————使元素的基线与父元素的下标基线对齐
  • super———-使元素的基线与父元素的上标基线对齐
  • <length>—–使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
  • <percentage>-使元素的基线对齐到父元素的基线之上的给定百分比,该百分比是line-height属性的百分比(可以是负数)
3.4、使元素相对整行垂直对齐
  • top————使元素及其后代元素的顶部与整行的顶部对齐。

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

  • bottom———使元素及其后代元素的底部与整行的底部对齐。

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。