HTML学习日志（二）：CSS构建

1. 选择器
   类型 类 ID选择器 标签属性选择器 伪类与伪元素

h1 { }

.box { }

#unique { }

a[title] { }

a:hover { }

p::first-line { }

2.盒子模型
（标准盒模型）

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。
在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。 这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。

.box {
  box-sizing: border-box;
} 

• 外边距折叠(外边距塌陷）
  如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。
• 设置边框的宽度、颜色和样式

分别设置每边(同理可换成margin和padding)
border-top
border-right
border-bottom
border-left

设置所有边的颜色、样式或宽度
border-width
border-style
border-color

3.背景与边框

背景

• 背景颜色
  background-color属性定义了CSS中任何元素的背景颜色。

.box {
  background-color: #567895;
}

• 背景图片
  background-image属性允许在元素的背景中显示图像。默认情况下，大图不会缩小以适应方框，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。

• 控制背景平铺
  background-repeat属性用于控制图像的平铺行为。

no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
}

• 调整背景图像的大小
  使用 background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。
  -cover：使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外
  
  -contain：使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。

• 渐变背景
  使用像图像一样的background-image属性设置。
  颜色参数值可以在 https://cssgradient.io/ 中自行调试

.a {
  background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
}

边框

• 为四个边设置边框

.box {
  border: 1px solid black;
} 

或者我们可以只设置盒子的一个边

.box {
  border-top: 1px solid black;
} 

• 圆角
  通过使用border-radius属性和与方框的每个角相关的长边来实现方框的圆角。可以使用两个长度或百分比作为值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，您将只传递一个值，这两个值都将使用。

.box {
  border-radius: 10px;/*盒子的四个角都有10px的圆角半径*/
} 
.box {
  border-top-right-radius: 1em 10%;/*右上角的水平半径为1em，垂直半径为10％*/
} 

17th Ｍarch 2021

稲毛海岸, a learing front-end programer, CHN