Что произойдет, если я оставлю «поле» пустым, даже не ставя точку с запятой? - PullRequest
Новая
       12

Что произойдет, если я оставлю «поле» пустым, даже не ставя точку с запятой?

0 голосов
/ 09 июня 2018 
 #header {
        margin:                      *<--This one*
        position: fixed;
        width:100%;
        background-color: black;
        font-family: Arial, Helvetica, sans-serif;
        overflow: auto;
        margin:0 auto;
        display: block;
    }

Я создаю веб-сайт , в котором я обнаружил, что элемент <h1> идет за фиксированной панелью навигации.Я попытался найти оптимальное решение для этого.

Я выяснил, что многие люди сделали дополнительный контейнер <div1>, который имел ту же высоту, что и панель навигации, а затем использовали другой элемент <div2>, чтобы написать что угодноони должны показываться пользователю.

У меня была проблема с этим решением, на самом деле моя панель навигации является отзывчивой.Поэтому я должен сделать элемент <div1> отзывчивым, используя @media.

Затем, экспериментируя с полем, я обнаружил, что оставляя поле пустым, я получаю оптимальный.Мне не нужно добавлять контейнер <div1>.

Я нашел это полезным.Так как я новичок в программировании, я не знаю, не годятся ли такие сочетания клавиш.

PS Я использовал редактор «Скобки», и в Google Chrome был показан предварительный просмотр в реальном времени.

edit: #header является контейнером для панели навигации и исправлен.position:fixed.

Ответы [ 3 ]

0 голосов
/ 09 июня 2018

CSS был разработан, чтобы очень прощать ошибки.Для этого есть несколько причин.

Представьте, что вы используете фоновый градиент, который старые браузеры могут не понимать.Весь ваш код CSS сломается.Вот почему CSS просто продолжает следующее утверждение, которое он может найти.Например: 

.foo {
  color: white;
  background: black;
  background: linear-gradient(red, yellow);
}

CSS читает файл сверху вниз, поэтому сначала должен быть применен черный фон, а затем будет применен градиентный фон.Что приведет к красному / желтоватому фону в современных браузерах.

Без обработки ошибок CSS весь наш CSS умрет в старых браузерах.

В вашем случае, однако, CSS читает следующее утверждение: 

 #header {
        margin: position: fixed;
}

Это синтаксическая ошибка, и ни одна из них не будет применена.CSS просто продолжит ваше заявление width: 100%.

0 голосов
/ 09 июня 2018

Когда вы используете фиксированный заголовок, вы должны присвоить margin-top следующему элементу, который равен высоте фиксированного заголовка, чтобы он начинался после фиксированного элемента.Но это будет работать, только если ваш заголовок имеет фиксированную высоту.Если ваш заголовок не имеет фиксированной высоты и изменяется в окне просмотра, добавьте функцию изменения размера для тела, которая вычисляет высоту заголовка при каждом изменении размера и присваивает то же значение, что и marginTop, следующему элементу после фиксированного элемента. 

 
body{
  margin: 0;
}
#header {
top : 0;
position: fixed;
width:100%;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
overflow: auto;
height: 65px;
}
#nav-bar a{
display: block;
padding: 9px 16px;
text-align: center;
float: left;
color:azure;
text-decoration:none;
}
#nav-bar a:hover{
background-color: rgba(49, 248, 23, 0.94);
}
.nav-right{
float:right;
font-size: 17px;
text-align: center;
}
@media(max-width:600px){
#nav-bar{
    position: relative;
    display: flex;
    flex-direction: column; 
    
    
}
.nav-right{
    display: flex;
    flex-direction: column;
}
}
.logo {
font-family: 'Great Vibes', cursive;
font-size: 30px;
}

#header-img {
height:35px;
width:30px; 
}

h2 {
text-align: center;
background: linear-gradient(0deg,red,yellow);
padding: 14px;
}

#form {
display:flex;
justify-content: center;
margin-bottom: 21px;
}

#email {
height: 21px;
width: 250px;
border-radius: 3px;
border-color: #938e8e;
}

section {
position: relative;
top: 5px;
}
<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
<title>The Bookworms Site</title>
<link href="style-sheet.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Limelight" rel="stylesheet"> 
  </head>
  <body onresize="myFunction()">
  
 
<main>
  <header id="header">
<div id="nav-bar">
    <a href="#Works" class="logo"><img src="book.jpg" id="header-img"> The Bookworms Site</a>
    <div class="nav-right">
        <a href="#About">About</a>
        <a href="#Features">Features</a>
        <a href="#Pricing">Pricing</a>
    </div>
</div>
  </header>
<div id="abc" style="margin-top: 65px;"> 
    <h2> Hurry!! Offers until Next 20 Hours!!</h2>
    <form id="form">
        <section>Email:</section>
        <input id="email" type="email" placeholder="Enter Your Email">
        <button type="submit" url="">Submit</button>
    </form>
    </div>
    </main>
    <script>
    function myFunction() {
       document.getElementById( "abc").style.marginTop = document.getElementById( "header").clientHeight + "px"
       
    }
    </script>
    </body>
    </html>
0 голосов
/ 09 июня 2018

Это вызывает все, пока следующая ; не будет считаться недействительной и удалена.

Это не ярлык, это более длинный способ достижения того же эффекта, что и вообще не вводить margin: position: fixed;.

...