GVKun编程网logo

是否有将元素推到一边的 CSS 属性边距除外？

1

关于是否有将元素推到一边的CSS属性边距除外？的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于)预期css(css-rparentexpected)"用于@media查询中的第4级css语

关于是否有将元素推到一边的 CSS 属性边距除外？的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于) 预期 css(css-rparentexpected)" 用于@media 查询中的第 4 级 css 语法、、 不起作用、Angular:

    添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css等相关知识的信息别忘了在本站进行查找喔。

    本文目录一览：

    是否有将元素推到一边的 CSS 属性边距除外？

    是否有将元素推到一边的 CSS 属性边距除外？

    如何解决是否有将元素推到一边的 CSS 属性边距除外？

    对于我的 200x200px 容器，我添加了 10% 的右边距，我相信在我的 html 中它下面的内容会被推到右边距区域之外，但是在我的代码中，内容没有被推开（下面) 来自我的容器，即使我在容器的四周放置了边距。

    即使我有容器边距，为什么元素仍然与我的容器重叠？我只能通过在我的 html 中执行多个 br 来解决这个问题吗？或者是否有实际的 CSS 方法来解决这个问题？

    我真的很感激这方面的帮助，非常感谢！ 

    1. body {
    2.   color: black;
    3.   background-color: rgb(240,240,240);
    4.   margin: 1%;
    5. }
    7. .container {
    8.   width: 200px;
    9.   height: 200px;
    10.   outline: red solid 5px;
    11.   Box-sizing: border-Box;
    12.   position: absolute;
    13.   top: 165%;
    14.   margin: 10%;
    15.   background-image: url(ezio.jpg);
    16. }
    18. .textBox1 {
    19.   width: 40%;
    20.   left: 2%;
    21.   Box-sizing: border-Box;
    22.   outline: red solid 5px;
    23.   background-color: cyan;
    24.   padding: 20px;
    25.   border: 10px;
    26.   border-style: dotted;
    27.   position: relative;
    28. }
    30. .textBox2 {
    31.   width: 40%;
    32.   Box-sizing: border-Box;
    33.   outline: red solid 5px;
    34.   position: absolute;
    35.   left: 45%;
    36.   top: 18%;
    37.   background-color: darkkhaki;
    38. }
    40. .textBox3 {
    41.   width: 40%;
    42.   Box-sizing: border-Box;
    43.   outline: red solid 5px;
    44.   Box-sizing: border-Box;
    45.   position: relative;
    46.   left: 10%;
    47. }
    49. .textBox4 {
    50.   width: 40%;
    51.   Box-sizing: border-Box;
    52.   outline: red solid 5px;
    53.   Box-sizing: border-Box;
    54.   position: absolute;
    55.   left: 55%;
    56.   top: 70%;
    57. }
    1. <div class="container"></div>
    2. <div class="textBox1">
    3.   <p> ding Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae aliquid ea,numquam quod SAEpe excepturi eaque debitis repellat,quibusdam ratione atque,mollitia ipsum repellendus. Nostrum at possimus fugiat dolores excepturi!</p>
    4. </div>
    5. <br>
    6. <div class="textBox2">
    7.   kingen simp Lorem ipsum dolor sit amet consectetur,adipisicing elit. Aliquid eum excepturi veritatis officia iusto cum reprehenderit corrupti accusamus,accusantium sequi nobis ab nesciunt quibusdam natus tenetur at enim ipsum magni?</div>
    8. <br>
    9. <div class="textBox3">
    10.   <h4>amazin</h4>
    11.   <p>pie Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae aliquid ea,mollitia ipsum repellendus. Nostrum at possimus fugiat dolores excepturi!</p>
    12. </div>
    13. <br>
    14. <div class="textBox4">
    15.   <h6>water</h6>
    16.   <p> indigo sill Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae aliquid ea,mollitia ipsum repellendus. Nostrum at possimus fugiat dolores excepturi!</p>
    17. </div>
    18. <div class="categories">
    19.   <h5>
    20.     categories
    21.     </h2>
    22.     <ul>
    23.       <li><a href="#">juice</a></li>
    24.       <li><a href="#">grapes</a></li>
    25.       <li><a href="#">mango</a></li>
    26.       <li><a href="test.html">fish</a></li>
    27.     </ul>
    28. </div>
    29. <table>
    30.   <thead>
    31.     <tr>
    32.       <th>name</th>
    33.       <th>age</th>
    34.       <th>email</th>
    35.     </tr>
    36.   </thead>
    37.   <tbody>
    38.     <tr>
    39.       <td>kano minto</td>
    40.       <td>56</td>
    41.       <td>minto@gmail.com</td>
    42.     </tr>
    43.     <tr>
    44.       <td>heni smio</td>
    45.       <td>24</td>
    46.       <td>dkeo@gmail.com</td>
    47.     </tr>
    48.     <tr>
    49.       <td>elise trum</td>
    50.       <td>35</td>
    51.       <td>trm@gmail.com</td>
    52.     </tr>
    53.   </tbody>
    54. </table>
    55. <br>

解决方法

在 position relative 中，元素相对于自身定位。但是，绝对定位的元素是相对于其父元素的。具有 position: absolute 的元素从正常文档流中删除。它会自动定位到其父元素的起点（左上角）。

除了 texbox1 之外，所有元素都处于绝对位置，因此摆脱了文档通常会如何流动它们。一个接一个。

假设我们从 textbox1 中取出相对位置。 textbox1 应该位于绿色框的顶部，但由于流程中断，它被认为是通常的事物方案中的第一个元素。
下面的例子。

  1. body {
  2.   color: black;
  3.   background-color: rgb(240,240,240);
  4.   margin: 10%;
  5. }
  7. .container{ 
  8.     width: 200px;
  9.     height: 200px;
  10.     outline: green solid 5px;
  11.     box-sizing: border-box;
  12.     position: absolute;
  13.     top: 16%;
  14.     margin: 10%;
  15.     background-image: url(ezio.jpg);
  16. }
  18. .textbox1 {
  19.   width: 40%;
  20.   box-sizing: border-box; 
  21.   outline: red solid 5px; 
  22.   background-color: cyan;
  23.   padding: 20px;
  24.   border: 10px; 
  25.   border-style: dotted;
  26.   
  27. }
  29. .textbox2 {
  30.   width: 40%;
  31.   box-sizing: border-box;
  32.   outline: red solid 5px;
  33.   position: absolute; 
  34.   left: 45%; 
  35.   top: 18%;
  37.   background-color: darkkhaki;
  38. }
  40. .textbox3 {
  41.   width: 40%;
  42.   box-sizing: border-box;
  43.   outline: red solid 5px;
  44.   box-sizing: border-box;
  45.   position: relative;
  46.   left: 10%;
  47. }
  49. .textbox4 {
  50.   width: 40%;
  51.   box-sizing: border-box;
  52.   outline: red solid 5px;
  53.   box-sizing: border-box;
  54.   position: absolute;
  55.   left: 55%;
  56.   top: 70%;
  57. }
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
  8.     <title>GamerHub</title>
  10. <link rel="stylesheet" href="C:/Users/zeren/CSS/newcssgamerhub.css" type="text/css">
  11. </head>
  13. <body>
  14.   
  15. <div class="container"></div>
  17. <div class="textbox1"> 
  18. <p> ding Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae aliquid ea,numquam quod saepe excepturi eaque debitis repellat,quibusdam ratione atque,mollitia ipsum repellendus. Nostrum at possimus fugiat dolores excepturi!</p>
  19. </div>
  21. <br>
  23. <div class="textbox2">
  24.         
  25.     kingen simp Lorem ipsum dolor sit amet consectetur,adipisicing elit. Aliquid eum excepturi veritatis officia iusto cum reprehenderit corrupti accusamus,accusantium sequi nobis ab nesciunt quibusdam natus tenetur at enim ipsum magni?</div>
  27.     <br>
  28.     
  29.     <div class="textbox3"> 
  30.         <h4>amazin</h4>
  31.         <p>pie Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae aliquid ea,mollitia ipsum repellendus. Nostrum at possimus fugiat dolores excepturi!</p>
  32.         </div>
  33.         
  34.         <br>
  36.         <div class="textbox4"> 
  37.             <h6>water</h6>
  38.             <p> indigo sill Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae aliquid ea,mollitia ipsum repellendus. Nostrum at possimus fugiat dolores excepturi!</p>
  39.             </div>
  41.         <div class="categories">
  42.             <h5>
  43.                 categories
  44.             </h2>
  45.             <ul>
  46.             <li><a href="#">juice</a></li>
  47.             <li><a href="#">grapes</a></li>
  48.             <li><a href="#">mango</a></li>
  49.             <li><a href="test.html">fish</a></li>
  50.             </ul>
  51.         </div>
  52.  
  53.         <table>
  54.             <thead>
  55.                 <tr>
  56. <th>name</th>
  57. <th>age</th>
  58. <th>email</th>
  60. </tr>
  62.             </thead>
  63.                       
  64.             <tbody>
  65.                 <tr>
  66. <td>kano minto</td>
  67. <td>56</td>
  68. <td>minto@gmail.com</td>
  70.                 </tr>
  72.                 <tr>
  73.                     <td>heni smio</td>
  74.                     <td>24</td>
  75.                     <td>dkeo@gmail.com</td>
  76.                                         
  77.                                     </tr>
  79.                                     <tr>
  80.                                         <td>elise trum</td>
  81.                                         <td>35</td>
  82.                                         <td>trm@gmail.com</td>
  83.                                                                                 
  84.                                                         </tr>
  86.             </tbody>
  87.         </table>
  88.         
  89.         <br>
  90. </body>

当我们重新应用相对于 textbox1 的位置时，它会根据代码中的堆叠位置流动。容器后。 下面的例子； 

  1. body {
  2.   color: black;
  3.   background-color: rgb(240,240);
  4.   margin: 10%;
  5. }
  7. .container{ 
  8.     width: 200px;
  9.     height: 200px;
  10.     outline: green solid 5px;
  11.     box-sizing: border-box;
  12.     position: absolute;
  13.     top: 16%;
  14.     margin: 10%;
  15.     background-image: url(ezio.jpg);
  16. }
  18. .textbox1 {
  19.   width: 40%;
  20.     position: relative;
  21.  
  22.   box-sizing: border-box; 
  23.   outline: red solid 5px; 
  24.   background-color: cyan;
  25.   padding: 20px;
  26.   border: 10px; 
  27.   border-style: dotted;
  28.   
  29. }
  31. .textbox2 {
  32.   width: 40%;
  33.   box-sizing: border-box;
  34.   outline: red solid 5px;
  35.   position: absolute; 
  36.   left: 45%; 
  37.   top: 18%;
  39.   background-color: darkkhaki;
  40. }
  42. .textbox3 {
  43.   width: 40%;
  44.   box-sizing: border-box;
  45.   outline: red solid 5px;
  46.   box-sizing: border-box;
  47.   position: relative;
  48.   left: 10%;
  49. }
  51. .textbox4 {
  52.   width: 40%;
  53.   box-sizing: border-box;
  54.   outline: red solid 5px;
  55.   box-sizing: border-box;
  56.   position: absolute;
  57.   left: 55%;
  58.   top: 70%;
  59. }
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width,mollitia ipsum repellendus. Nostrum at possimus fugiat dolores excepturi!</p>
  7.             </div>
  9.         <div class="categories">
  10.             <h5>
  11.                 categories
  12.             </h2>
  13.             <ul>
  14.             <li><a href="#">juice</a></li>
  15.             <li><a href="#">grapes</a></li>
  16.             <li><a href="#">mango</a></li>
  17.             <li><a href="test.html">fish</a></li>
  18.             </ul>
  19.         </div>
  20.  
  21.         <table>
  22.             <thead>
  23.                 <tr>
  24. <th>name</th>
  25. <th>age</th>
  26. <th>email</th>
  28. </tr>
  30.             </thead>
  31.                       
  32.             <tbody>
  33.                 <tr>
  34. <td>kano minto</td>
  35. <td>56</td>
  36. <td>minto@gmail.com</td>
  38.                 </tr>
  40.                 <tr>
  41.                     <td>heni smio</td>
  42.                     <td>24</td>
  43.                     <td>dkeo@gmail.com</td>
  44.                                         
  45.                                     </tr>
  47.                                     <tr>
  48.                                         <td>elise trum</td>
  49.                                         <td>35</td>
  50.                                         <td>trm@gmail.com</td>
  51.                                                                                 
  52.                                                         </tr>
  54.             </tbody>
  55.         </table>
  56.         
  57.         <br>
  58. </body>

同样，如果要去掉容器的相对绝对位置，然后保持所有内容完好无损，那么 textbox1 将从容器休息的最后一个边界开始，将打破流程并根据它们自己放置它们。 

  1. body {
  2.   color: black;
  3.   background-color: rgb(240,240);
  4.   margin: 10%;
  5. }
  7. .container{ 
  8.     width: 200px;
  9.     height: 200px;
  10.     outline: green solid 5px;
  11.     box-sizing: border-box;
  12.   
  13.     top: 16%;
  14.     margin: 10%;
  15.     background-image: url(ezio.jpg);
  16. }
  18. .textbox1 {
  19.   width: 40%;
  20.     position: relative;
  21.  
  22.   box-sizing: border-box; 
  23.   outline: red solid 5px; 
  24.   background-color: cyan;
  25.   padding: 20px;
  26.   border: 10px; 
  27.   border-style: dotted;
  28.   
  29. }
  31. .textbox2 {
  32.   width: 40%;
  33.   box-sizing: border-box;
  34.   outline: red solid 5px;
  35.   position: absolute; 
  36.   left: 45%; 
  37.   top: 18%;
  39.   background-color: darkkhaki;
  40. }
  42. .textbox3 {
  43.   width: 40%;
  44.   box-sizing: border-box;
  45.   outline: red solid 5px;
  46.   box-sizing: border-box;
  47.   position: relative;
  48.   left: 10%;
  49. }
  51. .textbox4 {
  52.   width: 40%;
  53.   box-sizing: border-box;
  54.   outline: red solid 5px;
  55.   box-sizing: border-box;
  56.   position: absolute;
  57.   left: 55%;
  58.   top: 70%;
  59. }
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width,mollitia ipsum repellendus. Nostrum at possimus fugiat dolores excepturi!</p>
  7.             </div>
  9.         <div class="categories">
  10.             <h5>
  11.                 categories
  12.             </h2>
  13.             <ul>
  14.             <li><a href="#">juice</a></li>
  15.             <li><a href="#">grapes</a></li>
  16.             <li><a href="#">mango</a></li>
  17.             <li><a href="test.html">fish</a></li>
  18.             </ul>
  19.         </div>
  20.  
  21.         <table>
  22.             <thead>
  23.                 <tr>
  24. <th>name</th>
  25. <th>age</th>
  26. <th>email</th>
  28. </tr>
  30.             </thead>
  31.                       
  32.             <tbody>
  33.                 <tr>
  34. <td>kano minto</td>
  35. <td>56</td>
  36. <td>minto@gmail.com</td>
  38.                 </tr>
  40.                 <tr>
  41.                     <td>heni smio</td>
  42.                     <td>24</td>
  43.                     <td>dkeo@gmail.com</td>
  44.                                         
  45.                                     </tr>
  47.                                     <tr>
  48.                                         <td>elise trum</td>
  49.                                         <td>35</td>
  50.                                         <td>trm@gmail.com</td>
  51.                                                                                 
  52.                                                         </tr>
  54.             </tbody>
  55.         </table>
  56.         
  57.         <br>
  58. </body>

所以我猜所有的盒子都按照编程指南的行为方式运行，但需要微调，直到达到预期的结果。

访问此站点，它使用 CSS 定位来实现视觉效果。enter link description here

) 预期 css(css-rparentexpected)

) 预期 css(css-rparentexpected)" 用于@media 查询中的第 4 级 css 语法

Visual Studio Code does not support 4 级范围语法呢。此外，MDN 表示目前只有 Firefox 支持该语法。如果您需要跨浏览器支持，您现在需要坚持使用原始的 max-width 语法：

@media (max-width: 768px) {
    h1 {
        font-size: 3em;
        color: mediumvioletred;
    }
    nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: mediumaquamarine;
    }
}

否则，你所拥有的是正确的。

" alt="">

OSC 请你来轰趴啦！1028 苏州源创会，一起寻宝 AI 时代

css 样式   引入  href="css/layout.css?id=7" 是什么意思？

不起作用" alt=" 不起作用">

如何解决<link rel="stylesheet" type="text/css" href="{% static ''css/style.css'' %}"> 不起作用

我在 vs-code 上将 css 链接到 html。 center-aliend 在这里不起作用。有没有人知道哪个部分有问题？ 我想设置文本“Hello Static!!”到浏览器的中心。

  1. {% load static %}
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <Meta charset="UTF-8">
  7.     
  8.     <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  9.     <link rel="stylesheet" type="text/css" href="{% static ''css/style.css'' %}">
  10.     <title>Static Practice</title>
  11. </head>
  12. <body>
  13.     <div>Hello Static!!</div>
  14. </body>
  15. </html>

  1. body {
  2.     text-align: center;
  3. }

  3. # Static files (CSS,JavaScript,Images)
  4. # https://docs.djangoproject.com/en/3.1/howto/static-files/
  6. STATIC_URL = ''/static/''
  8. STATICFILES_Dirs = [
  9.     BASE_DIR / ''static''
  10. ]

Angular: <ol> 添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css

Angular:
    添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css

如何解决Angular: <ol> 添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css

我正在 angular 中创建富文本编辑器，当我执行 document.execCommand(''insertOrderedList'') 时，我得到 <ol> 项，它不受我组件的 css 的影响，只有 styles.css 中的 css（主 css 文件在项目的根目录）影响我使用 document.execCommand 添加的项目。 是否有可能改变这种行为？

解决方法

当然。它的名字是view encapsulation。将其更改为 ViewEncapsulation.none 会产生所需的行为。

  1. @Component({
  2.   ...
  3.   encapsulation: ViewEncapsulation.none
  4. })

关于是否有将元素推到一边的 CSS 属性边距除外？的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于) 预期 css(css-rparentexpected)" 用于@media 查询中的第 4 级 css 语法、、 不起作用、Angular:

    添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css等相关知识的信息别忘了在本站进行查找喔。

    本文标签：

    上一篇如何使用 html 和 less/css 制作完美弯曲的按钮？（css弯曲边框）

    下一篇div 项，弄乱了 CSS 布局（css的div布局）

    相关文章