非零基础自学前端最后一遍一 HTML+CSS 10 CSS盒子模型 10.10 盒子模型-外轮廓outline

野性酷女 2024-03-26 21:52 53阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  10 CSS盒子模型
         *   *  10.10 盒子模型-外轮廓outline
             *   *  10.10.1 外轮廓 - outline

![在这里插入图片描述][0606ec87250a49cdb11b04a42381bbc0.png_pic_center]

#### 一 HTML+CSS ####

#### 10 CSS盒子模型 ####

##### 10.10 盒子模型-外轮廓outline #####

###### 10.10.1 外轮廓 - outline ######

*  outline表示元素的外轮廓
    
     *  不占用空间
     *  默认显示在border的外面
 *  outline相关属性有
    
     *  outline-width: 外轮廓的宽度
     *  outline-style：取值跟border的样式一样，比如solid、dotted等
     *  outline-color: 外轮廓的颜色
     *  outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似
 *  应用实例
    
     *  去除a元素、input元素的focus轮廓效果
        
        ![在这里插入图片描述][9598a7d4a7314bd493696e00759bc553.png_pic_center]
        
        ![在这里插入图片描述][b35cbf51dee64a1bac9798115daee057.png_pic_center]
        
        去除后
        
        ![在这里插入图片描述][1bcefeb63e784ebd9b8a87395d31c0bc.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .box {
          
          width: 100px;
          height: 100px;
          background-color: #f00;
    
          border: 50px solid orange;
          padding: 30px;
    
          outline: 30px solid #0f0;
        }
    
        /* 行内级元素设置margin-top无效 */
        a {
          
          margin-top: 100px;
          display: inline-block;
    
          outline: none;
        }
    
        input {
          
          outline: none;
        }
    
        a:focus {
          
          outline: none;
        }
      </style>
    </head>
    
    <body>
    
      <div class="box"></div>
    
      <a href="#">百度一下</a>
      <input type="text">
    
    </body>
    
    </html>

![在这里插入图片描述][91b247afb650459abf3808c753b5a4b8.png_pic_center]

因为不占据空间，所以左边的绿色 outline 看不完全。

[0606ec87250a49cdb11b04a42381bbc0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/f7e3a0f14c8f421daa63a1ac2ef5fc5f.png
[9598a7d4a7314bd493696e00759bc553.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/7d97319921e8440d8c9fe43e0d81e17f.png
[b35cbf51dee64a1bac9798115daee057.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/93a8edaabef04606b6c4e71d3156f5f7.png
[1bcefeb63e784ebd9b8a87395d31c0bc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/33a3e8bbbaa440ceba5b108393a5b447.png
[91b247afb650459abf3808c753b5a4b8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/9cf1184bbda94f0c8d1d9494b596ec54.png