HTML——CSS知识点合集

ゝ一纸荒年。 2023-01-03 04:18 165阅读 0赞

> 最近参与了PC端网页开发的项目，都是纯手写html和css代码。发现了很多小细节是之前都没有注意到的，所以写了这篇笔记来记录一下，方便日后复习和参考。顺序很乱 轻喷。

## Flex布局 ##

> 一般我们都会遇到九宫格布局，或者是一行有5列或者4列的布局。遇到这种布局我一般都会用flex（弹性）布局。我比较推荐【阮一峰】写的，把flex布局写的非常详细，想必应该没人不知吧。

> **在使用flex布局需要注意的是**：  
> 子元素的**float**、**clear**和**vertical-align**属性将失效。

**✨记录几个用的比较多的属性✨**

**（1）flex-direction** : 决定主轴的方向（即项目的排列方向）

*  flex-direction:row(默认值)
 *  flex-direction:column(主轴为垂直方向，起点在上沿)

**（2）flex-wrap**：默认情况下 项目都在同一线上面 如果一条轴线排不下 如何换行。

*  flex-wrap:nowrap(默认，不换行)
 *  flex-wrap:warp(换行，第一排在上方)

**（3）justify-content**：定义了项目在主轴上的对齐方式

*  justify-content:center（居中）

**（4）align-items** ：定义项目在交叉轴上的对齐方式

*  align-items：center（交叉轴的中点对齐）

**（5）flex-grow**：定义项目的放大比例，默认为0。

*  flex-grow：1 （将等分剩余空间）
 *  flex-grow：2（其他项目为1，则前者占据的剩余空间比其他项目多1倍）

## css3渐变色 ##

> 渐变也分两种类型 1、线性渐变 2、径向渐变  
> 因为一般线性渐变遇到的比较多 比如 颜色 **从上到下** **从左到右**  
> 径向渐变一般都是以中心来定义 所以不做过多的记录

> 线性（linear-gradients）渐变语法：  
> background-image:linear-gradient(direction,color-stop1,color-stop2)  
> **默认是从上到下**

（1）从上到下：linear-gradient(to bottom,red,blue)  
（2）从左到右：linear-gradient(to right,red,blue)

> 这里的 **to right** 可替换 to left、 to right、to top

> 在渐变的值当中会遇到百分比。百分比指的是颜色标准中心的位置，百分比之间是过渡色。  
> linear-gradient(114deg, \#FFD700 1%, \#FFAD01 100%)

## min-width最小宽度 ##

> 在面对不同电脑显示器屏幕大小 不想浏览器布局变性 我们可以在最外面的div设置一个最小宽度 或者对body直接设置最小宽度

## textarea设置字体大小、颜色 ##

textarea::-webkit-input-placeholder {
          /* WebKit browsers */
          /* placeholder颜色  */
          color: #ff0000;
          /* placeholder字号  */
          font-size: 0.14rem;
        }
        textarea:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #ff0000;
          font-size: 0.14rem;
        }
        textarea::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #ff0000;
          font-size: 0.14rem;
        }
        
        textarea::-ms-input-placeholder {
          /* Internet Explorer 10+ */
          color: #ff0000;
          font-size: 0.14rem;
        }

\-END-