【前端】CSS

水深无声 2024-03-31 11:19 4阅读 0赞

### 一.总体设置 ###

#### 1.内联样式 ####

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>CSS外联样式一</title>
        <style>
          /* 对body中的所有p元素起作用 */
          p {
          
            color: blue;
            font: bolder;
          }
        </style>
      </head>
      <body>
        <p>这是一个段落。</p>
        <p>另一个段落。</p>
      </body>
    </html>

#### 2.外联样式 ####

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>CSS外联样式二</title>
        
        <link rel="stylesheet" href="04.css" />
      </head>
      <body>
        <p>这是一个段落。</p>
      </body>
    </html>

#### 3.注释 ####

CSS 只有一种注释，不管是多行注释还是单行注释

在 css 中注释的方法是使用符号如下,在 css 中所有被放在分隔符之间的文本信息都被称为注释。

/**/

#### 4.快速生成 html ####

!+table键

#### 5.footer 底部显示 ####

.root {
        
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .footer {
        
      margin-top: auto;
    }

#### 6.网页变灰 ####

##### 6.1.腾讯 #####

##### 6.2.小米 #####

##### 6.3.京东 #####

### 二.div 设置 ###

#### 1.标签样式 ####

p {
        
      color: brown;
      font: bolder;
    }

#### 2.加圆角 ####

使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值： 四个圆角值相同

border-radius: 10px 10px 10px 10px;
    
    border-top-left-radius     定义了左上角的弧度
    
    border-top-right-radius     定义了右上角的弧度
    
    border-bottom-right-radius     定义了右下角的弧度
    
    border-bottom-left-radius     定义了左下角的弧度

#### 3.设置宽度 ####

width属性设置元素的宽度。（注意： width属性不包括填充，边框和页边距！）
    min-width属性设置元素的最小宽度。
    max-width属性设置元素的最大宽度

#### 4.设置高度 ####

max-height
    min-height
    height

#### 5.在页面底部 ####

position:fixed;
    bottom:0px;

#### 6.在 div 的底部 ####

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta
          name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
          div {
          
            height: 300px;
            width: 300px;
            border: 1px solid #333333;
            text-align: center;
            position: relative;
          }
    
          div p {
          
            position: absolute;
            bottom: 0px;
            padding: 0px;
            margin: 0px;
          }
        </style>
      </head>
      <body>
        <div>
          <p>你好呀</p>
        </div>
      </body>
    </html>

#### 7.设置字体大小 ####

font-size: 10px;

#### 8.div 在 div 的底部 ####

<html>
      <head>
        <title>Test</title>
        <style>
          .div1 {
          
            border: 1px solid red;
            width: 500px;
            position: relative;
            height: 500px;
          }
    
          .div2 {
          
            border: 1px solid green;
            width: 300px;
            height: 200px;
            position: absolute;
            bottom: 0;
          }
        </style>
      </head>
      <body>
        <div class="div1">
          1111111
          <div class="div2">2222222222</div>
        </div>
      </body>
    </html>

#### 9.div 在 div 底部 ####

并且文字在 内部 div 底部

<html>
      <head>
        <title>Test</title>
        <style>
          .div1 {
          
            border: 1px solid red;
            width: 500px;
            position: relative;
            height: 500px;
          }
    
          .div2 {
          
            border: 1px solid green;
            width: 300px;
            height: 200px;
            position: absolute;
            bottom: 0;
          }
    
          .div2 p {
          
            position: absolute;
            bottom: 0px;
            padding: 0px;
            margin: 0px;
          }
        </style>
      </head>
      <body>
        <div class="div1">
          1111111
          <div class="div2">
            <p>2222222222</p>
          </div>
        </div>
      </body>
    </html>

#### 10.如何设置 div 背景图像 ####

body {
        
      background-image: url("paper.gif");
      background-color: #cccccc;
    }

#### 11.三角形 ####

#triangle {
        
      width: 0;
      height: 0;
      border-left: 18px solid transparent;
      border-right: 18px solid transparent;
      border-bottom: 30px solid blue;
    }

#### 12.display 几种常用的属性值 ####

##### 第一个：display:none; #####

设置元素隐藏，具体可见：display:none

##### 第二个：display:block; #####

设置元素为块级元素，块级元素可以独占一行，可设宽高。

##### 第三个：display:inline; #####

设置元素为行内元素，一行可有多个行内块元素，可设宽高。

##### 第四个：display:inline-block #####

设置元素为行内块元素，既有行内元素的（一行可有多个）特性，又有块元素的（可设宽高）特性

##### 第五个：display:inline-table #####

inline-table 得到的是，外面是“内联盒子”，里面是“table 盒子”。

##### 第六个：display:table #####

元素会作为块级表格来显示，类似 table，表格前后带有换行符;配合 table-cell 使用可实现水平垂直居中，具体可见：水平垂直居中

##### 第七个：table-row #####

元素会作为一个表格行显示，类似 tr;

##### 第八个：table-cell #####

元素会作为一个表格单元格显示，类似 td 和 th。

##### 第九个：display:list-item #####

为元素内容生成一个块型盒，随后再生成一个列表型的行内盒。 会把元素作为列表显示，要完全模仿列表的话还需要加上 list-style-position，list-style-type

#### 13.省略文字 ####

如果只显示一行，则可以使用以下方法：

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

如果需要显示多行，在需要设置的元素 style 中添加以下代码：

word-break: break-all;
    text-overflow: ellipsis;
    display: -[webkit](https://so.csdn.net/so/search?q=webkit&spm=1001.2101.3001.7020)-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

只显示两行：

overflow: hidden; //超出隐藏
    text-overflow: ellipsis; //超出使用省略号
    display: -webkit-box;
    -webkit-line-clamp: 2; //第几行
    -webkit-box-orient: vertical;
    width: 192px; //根据需要自定义设置
    height: 60px; //根据文字高度自定义设置为两行行高

（注意：有时添加在嵌入样式中不生效，需要添加在行内样式中）

### 三.问题 ###

#### 1.link 和@import 的区别？ ####

1、从属关系区别：  
link 属于 html 标签，而@import 是 css 提供的。  
2、加载顺序区别：  
页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面被加载完再加载。  
3、兼容性区别：  
import 只在 IE5 以上才能识别，而 link 是 html 标签，无兼容问题。  
4、dom 可操作性区别：  
可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import 的方式插入样式  
5、权重区别：  
如果已经存在相同样式，@import 引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出 link 方式的样式权重高于@import 的权重这样的直观效果。

#### 2.src 与 href 的区别？ ####

1、href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。  
2、src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部

#### 3.CSS 基础选择器总结 ####

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>作用</th> 
   <th>缺点</th> 
   <th>用法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>标签选择器</td> 
   <td>可以选出所有相同的标签</td> 
   <td>不能差异化选择</td> 
   <td>p { color：red;}</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td>可以选出 1 个或者多个标签</td> 
   <td>可以根据需求选择</td> 
   <td>.nav { color: red; }</td> 
  </tr> 
  <tr> 
   <td>id 选择器</td> 
   <td>一次只能选择器 1 个标签</td> 
   <td>只能使用一次(不推荐使用)</td> 
   <td>#nav {color: red;}</td> 
  </tr> 
  <tr> 
   <td>通配符选择器</td> 
   <td>选择所有的标签</td> 
   <td>会匹配页面所有的元素，降低页面响应速度(不推荐使用)</td> 
   <td>*** {color: red;}</td> 
  </tr> 
 </tbody> 
</table>

. .  
. .  
. .