css 样式搭配记录

• • 
    
• ​​一、常见颜色搭配​​
• ​​二、内联样式布局方案解决​​

• ​​2.1 输入框紧凑问题​​

• ​​三、内容显示​​

• • 
    
• ​​3.1 超出的部分内容使用省略表示​​
• ​​3.2 超出部分的内容无法正常的显示​​
  • 
    

• ​​四、文字布局整理​​

• ​​4.1 字体缩进 （em）​​

一、常见颜色搭配

1. 1. 
      
2. 输入框的默认字体颜色
   值一般设置为 ​​#ccc​​，颜色是灰色，如下搜索框的颜色
   
3. 黑色字体
   #333
   
   1. 
      

二、内联样式布局方案解决

2.1 输入框紧凑问题

为了解决布局冲突问题，可以使用内边距 ​​padding-left: .2rem;​​

三、内容显示

3.1 超出的部分内容使用省略表示

当文字内容过的时候，我们不想它换行，可以使用 三个 css 样式改变他

文字内容对应的 css 样式

overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

3.2 超出部分的内容无法正常的显示

我们需要在父容器加个如下的 css 属性: ​​min-width: 0;​​

四、文字布局整理

4.1 字体缩进 （em）

在文章中我们要实现首行缩进的两个字符可以使用 ​​2em​​ 实现，表示相对字体大小实现两个缩进