CSS很难学吗？这几个属性掌握了，秒变CSS大神！

CSS 是前端开发中不可或缺的一部分，用于控制网页的样式和布局。

虽然 CSS 看起来很简单，但实际上它有很多属性和特性，需要花费一定的时间和精力去学习和掌握。

本文将介绍一些常用的 CSS 属性，包括 `border`、`display`、`padding`、`margin`、`rem`、`em` 和 `box-sizing`。这些属性涵盖了 CSS 中的基本概念和常见用法，掌握它们可以让你在 CSS 中游刃有余，成为一名 CSS 大神。

Box-sizing

CSS  属性用于设置 HTML 元素的盒模型。
盒模型是指元素的宽度和高度是由内容、内边距、边框和外边距组成的。
CSS 中有两种盒模型：内容盒模型和边框盒模型。

 内容盒模型（）：元素的宽度和高度只包括内容，
不包括内边距、边框和外边距。这是默认的盒模型。

 边框盒模型（）：元素的宽度和高度包括内容、
内边距和边框，不包括外边距。

使用  盒模型可以更方便地设置元素的宽度和高度，
因为不需要考虑内边距和边框的影响。
例如，如果要创建一个宽度为 px、内边距为 px、边框为 px 的盒子，
使用  盒模型需要将宽度设置为 px（200px   × px   × px），
而使用  盒模型只需要将宽度设置为 px。

以下代码展示了  属性的用法：

div {
  width: px;
  height: px;
  padding: px;
  border: px solid ;
  margin: px;
  boxsizing: contentbox; 
}

div. {
  boxsizing: borderbox;
}

Fonts (rem, em)

 和  都是 CSS 中用于设置字体大小的单位，但它们的计算方式不同。

 单位是相对于根元素（即  元素）的字体大小来计算的。
例如，如果根元素的字体大小为 px，那么  就等于 px， 就等于 px，
以此类推。
使用  单位可以方便地实现响应式设计，
因为根元素的字体大小可以根据屏幕尺寸或设备类型进行调整。

 单位是相对于父元素的字体大小来计算的。例如，如果父元素的字体大小为 px，
那么  就等于 px， 就等于 px，以此类推。使用  单位
可以方便地实现相对大小的字体和布局，因为它们可以根据父元素的字体大小进行缩放。

以下代码展示了  和  单位的用法：

html {
  fontsize: px;
}

h1 {
  fontsize: rem; 
}

p {
  fontsize: rem; 
  lineheight: em; 
}

.container {
  fontsize: em; 
}

.box {
  fontsize: em; 
  padding: em; 
}

Padding & Margin

CSS  和  属性用于设置 HTML 元素的内边距和外边距：

 、、、: 
分别设置上、右、下、左四个方向的内边距。

 : 设置上、右、下、左四个方向的内边距，可以使用一个、两个或四个值来设置。

 、、、: 
分别设置上、右、下、左四个方向的外边距。

 : 设置上、右、下、左四个方向的外边距，可以使用一个、两个或四个值来设置。
 : 自动计算内边距，使元素居中。
 : 自动计算外边距，使元素居中。

 : 
设置盒模型为边框盒模型，即元素的宽度和高度包括内边距和边框，不包括外边距。

 : 
设置盒模型为内容盒模型，即元素的宽度和高度只包括内容，不包括内边距、边框和外边距。

以下展示了  和  属性的多种用法：

div {
  paddingtop: px;
  paddingright: px;
  paddingbottom: px;
  paddingleft: px;
}

span {
  padding: px px;
}

p {
  margintop: px;
  marginright: px;
  marginbottom: px;
  marginleft: px;
}

a {
  margin: px px;
}

.center {
  padding: auto;
  margin: auto;
  width: px;
  height: px;
  backgroundcolor: ;
}

.box {
  boxsizing: borderbox;
  width: px;
  height: px;
  padding: px;
  border: px solid ;
  margin: px;
}

.content {
  boxsizing: contentbox;
  width: px;
  height: px;
  padding: px;
  border: px solid ;
  margin: px;
}

Display

CSS 的 display 属性用于设置元素的显示方式：

 ：将元素显示为块级元素，即在页面中显示为一块矩形区域，可以设置宽度、高度、内边距和外边距等属性。

 ：将元素显示为行内元素，即在页面中显示为一行，不可以设置宽度、高度、内边距和外边距等属性。

 ：将元素显示为行内块级元素，即在页面中显示为一行，但可以设置宽度、高度、内边距和外边距等属性。

 ：将元素隐藏，不占用页面空间。

 ：将元素显示为弹性盒子，可以使用弹性盒子布局来排列子元素。

 ：将元素显示为网格容器，可以使用网格布局来排列子元素。

 ：将元素显示为表格，可以使用表格布局来排列子元素。

 ：将元素显示为列表项，通常用于 ul 和 ol 元素的子元素。

 ：继承父元素的 display 属性值。

Position

CSS 的 position 属性用于设置元素的定位方式：

 ：默认值，元素按照正常文档流排列，不进行定位。
 ：相对定位，元素相对于其正常位置进行定位，可以使用 top、right、bottom、left 属性来设置偏移量。
 ：绝对定位，元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于 body 元素进行定位，可以使用 top、right、bottom、left 属性来设置偏移量。
 ：固定定位，元素相对于浏览器窗口进行定位，不随页面滚动而滚动，可以使用 top、right、bottom、left 属性来设置偏移量。
 ：粘性定位，元素在滚动到特定位置时变为固定定位，可以使用 top、right、bottom、left 属性来设置偏移量。

Width & Height

CSS 的 width 和 height 属性用于设置元素的宽度和高度：

 ：默认值，元素的宽度或高度根据内容自适应。
 ：使用具体的长度值来设置元素的宽度或高度，如 。
 ：使用相对于父元素的百分比来设置元素的宽度或高度，如 。
 ：继承父元素的宽度或高度属性值。

除了这些基本用法，还可以使用其他一些属性来进一步控制元素的宽度和高度，例如：

  和 ：设置元素的最大宽度和最大高度，超过这个值时会自动缩小。
  和 ：设置元素的最小宽度和最小高度，小于这个值时会自动扩展。
 ：设置元素的盒模型，可以选择 （默认值，宽度和高度只包括内容，不包括内边距和边框）或 （宽度和高度包括内容、内边距和边框）。
  和 ：设置元素的内边距和外边距，会影响元素的实际宽度和高度。

max- & min-

CSS 的 、、 和  
属性用于设置元素的最大宽度、最小宽度、最大高度和最小高度：

 ：设置元素的最大宽度，超过这个宽度时会自动缩小。
可以使用具体的长度值或百分比来设置，
例如：  或 。

 ：设置元素的最小宽度，小于这个宽度时会自动扩展。
可以使用具体的长度值或百分比来设置，
例如：  或 。

 ：设置元素的最大高度，超过这个高度时会自动缩小。
可以使用具体的长度值或百分比来设置，
例如：  或 。

 ：设置元素的最小高度，小于这个高度时会自动扩展。
可以使用具体的长度值或百分比来设置，
例如:  或 。

Border

CSS  属性用于设置 HTML 元素的边框样式、宽度和颜色：

 : 设置边框样式，如 、、、、、、、 或 。
 : 设置边框宽度，如 、、 或具体的像素值。
 : 设置边框颜色，如颜色名称、十六进制值或 RGB 值。
 、、、: 分别设置上、右、下、左四个方向的边框样式、宽度和颜色。
 : 设置边框圆角，如  或 。
 : 设置边框图片，如 。

Z-index

 属性用于控制元素的堆叠顺序，即控制元素在层叠上下文中的显示顺序。具体用法如下：

 设置元素的  值，值越大，元素越靠近顶部，即显示在其他元素的上方。

. {
  zindex: ;
}

 创建新的层叠上下文，通过设置  属性为 、 或  来创建新的层叠上下文。

. {
  position: relative;
  zindex: ;
}

 层叠上下文的嵌套，当一个元素的子元素设置了  值时，子元素会在父元素的上方显示。

. {
  position: relative;
  zindex: ;
}

.child {
  position: relative;
  zindex: ;
}

注意： 属性只对设置了  属性的元素有效。

Overflow

 属性用于控制元素内容溢出时的处理方式。具体用法如下：

 （默认值）：内容不会被修剪，会呈现在元素框之外。

 ：内容会被修剪，并且其余内容是不可见的。

 ：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

 ：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

注意： 属性只对设置了固定高度或宽度的元素有效。

CSS 伪类

CSS 伪类用于向某些选择器添加特殊的效果：

 ：鼠标悬停在元素上时的效果。

a:hover {
  color: red;
}

 ：元素被激活时的效果，通常是鼠标点击时。

button:active {
  backgroundcolor: blue;
}

 ：元素获得焦点时的效果，通常是通过 Tab 键或鼠标点击输入框等元素时。

input:focus {
  border: px solid blue;
}

 ：选择元素的第一个子元素。

li:firstchild {
  fontweight: bold;
}

 ：选择元素的最后一个子元素。

li:lastchild {
  marginbottom: ;
}

 ：选择元素的第 n 个子元素。

li:nthchild() {
  color: red;
}

 ：选择元素的第 n 个指定类型的子元素。

p:nthoftype() {
  fontsize: px;
}

 ：选择不匹配指定选择器的元素。

:not(.special) {
  color: blue;
}

CSS 伪元素

CSS 伪元素用于向某些选择器添加特殊的效果，
它们可以创建一些不在文档树中的元素，并为其添加样式：

 ：在元素的内容前面插入一个元素。

p::before {
  content: ;
  fontweight: bold;
}

 ：在元素的内容后面插入一个元素。

p::after {
  content: ;
  fontstyle: italic;
}

 ：选择元素的第一个字母。

p::firstletter {
  fontsize: px;
  fontweight: bold;
}

 ：选择元素的第一行。

p::firstline {
  fontsize: px;
  fontweight: bold;
}

 ：选择元素中被用户选中的部分。

::selection {
  backgroundcolor: yellow;
  color: black;
}

Flexbox

Flexbox 是一种用于布局的 CSS3 属性，它可以使元素在容器中按照一定的规则排列：

 ：将容器设置为 Flexbox 布局。

. {
  display: flex;
}

 ：设置主轴的方向，即元素的排列方向。

. {
  flexdirection: row; 
}

.container {
  flexdirection: column;
}

 ：设置主轴上的对齐方式。

. {
  justifycontent: flexstart; 
}

.container {
  justifycontent: center;
}

.container {
  justifycontent: flexend;
}

.container {
  justifycontent: spacebetween;
}

.container {
  justifycontent: spacearound;
}

 ：设置交叉轴上的对齐方式。

. {
  alignitems: stretch; 
}

.container {
  alignitems: flexstart;
}

.container {
  alignitems: center;
}

.container {
  alignitems: flexend;
}

.container {
  alignitems: baseline;
}

 ：设置元素是否换行。

. {
  flexwrap: nowrap; 
}

.container {
  flexwrap: wrap;
}

.container {
  flexwrap: wrapreverse;
}

 ：设置元素的放大比例。

. {
  flexgrow: ;
}

 ：设置元素的缩小比例。

. {
  flexshrink: ;
}

 ：设置元素在主轴上的初始大小。

. {
  flexbasis: px;
}

Grid

CSS Grid 是一种用于布局的 CSS3 属性，它可以将元素划分为行和列，从而创建复杂的布局：

 ：将容器设置为 Grid 布局。

. {
  display: grid;
}

 ：设置列的大小和数量。

. {
  gridtemplatecolumns: px px px; 
}

 ：设置行的大小和数量。

. {
  gridtemplaterows: px px px; 
}

 ：设置区域的名称。

. {
  gridtemplateareas:
    
    
    ;
}

 ：设置元素的列起始和结束位置。

. {
  gridcolumnstart: ;
  gridcolumnend: ; 
}

 ：设置元素的行起始和结束位置。

. {
  gridrowstart: ;
  gridrowend: ; 
}

 ：设置元素的区域名称。

. {
  gridarea: content;
}

 ：设置行和列之间的间距。

. {
  gridgap: px; 
}

Transitions

CSS Transitions 属性用于在元素从一种样式逐渐变为另一种样式时添加动画效果：

 ：设置要过渡的 CSS 属性。

. {
  transitionproperty: backgroundcolor;
}

 ：设置过渡的持续时间。

. {
  transitionduration: s;
}

 ：设置过渡的时间函数。

. {
  transitiontiming: easeout;
}

 ：设置过渡的延迟时间。

. {
  transitiondelay: s;
}

Animation

CSS Animation 属性用于创建动画效果，它可以让元素从一种样式逐渐变为另一种样式：

 ：设置动画的名称。

. {
  animationname: example;
}

 ：设置动画的持续时间。

. {
  animationduration: s;
}

 ：设置动画的时间函数。

. {
  animationtiming: easeout;
}

 ：设置动画的延迟时间。

. {
  animationdelay: s;
}

 ：设置动画的播放次数。

. {
  animationiterationcount: infinite; 
}

 ：设置动画的播放方向。

. {
  animationdirection: alternate; 
}

 ：设置动画结束后元素的样式。

. {
  animationfillmode: forwards; 
}

 ：定义动画的关键帧。

keyframes example {
   {
    : scale();
  }
   {
    : scale();
  }
   {
    : scale();
  }
}

Media Queries

CSS Media Queries 属性用于根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式：

 ：设置屏幕宽度小于某个值时应用的样式。

media screen and (maxwidth: px) {
  body {
    fontsize: px;
  }
}

 ：设置屏幕宽度大于某个值时应用的样式。

media screen and (minwidth: px) {
  body {
    fontsize: px;
  }
}

 ：设置屏幕方向为横向或纵向时应用的样式。

media screen and (orientation: landscape) {
  body {
    backgroundcolor: ;
  }
}

 ：设置屏幕分辨率大于某个值时应用的样式。

media screen and (resolution: dpi) {
  body {
    fontsize: px;
  }
}

掌握这些 CSS 属性只是成为一名 CSS 大神的第一步。在实际开发中，你还需要不断学习和探索新的 CSS 特性和技巧，以应对不同的需求和挑战。希望本文能够为你提供一些帮助和启示，让你在 CSS 的世界中越走越远！