记录学习CSS day12（1.26）

基线

设置或检索对象内容的垂直对其方式，vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，其基本格式如下：

vertical-align : baseline /top /middle /bottom 

注：我们可以通过vertical-align控制图片和文字的垂直关系了，默认的图片会和文字基线对齐。对于图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙

对于空白缝隙的解决方法：

1. 使用img vertical-align:middle/top等等。让图片不要和基线对齐。

2. 给img 添加 display:block; 转换为块级元素。

鼠标样式

设置鼠标光标在元素上显示的样式，属性名:cursor

其基本格式如下：cursor:default/pointer/text/move

属性值	效果
default	默认值
pointer	小手样式，提示用户可以点击
text	工字形，提示用户可以选择文本
move	十字光标，提示用户可以移动

圆角边框

通过使用border-radius属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。

基本格式如下：

 .box {
      border: 10px solid ;
      border-radius: 1em;
      border-top-right-radius: 12px 30%;
}

溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

其基本格式：overflow：visible/auto/hidden/scroll

属性名	描述
visible	不剪切内容也不添加滚动条
auto	超出自动显示滚动条，不超出不显示滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是显示滚动条

元素本身隐藏

让某元素本身在屏幕中不可见，如在鼠标hover之后元素隐藏

基本格式：

1. visibility：hidden（特点： 隐藏之后，继续保留原有位置）
2. display：none（特点： 隐藏之后，不再保留位置）

多列布局

一般来说，我们使用带有.container的<div>将成为我们 multicol 的容器。通过这两个属性开启 multicol column-count，column-count将创建指定数量的列，具体格式如下：

.container {
  column-count: 3;
}

列与内容折断

多列布局的内容被拆成碎块，多列布局的内容被拆成碎块，添加属性break-inside，并设值avoid

基本格式如下：

.card{
  break-inside: avoid;
  page-break-inside: avoid;
  background-color: red;
  border: 2px solid blue;
  padding: 10px;
  margin: 0 0 10px 0;
}

(CSS和HTML理论部分的最基础知识结束)