Я помню вопрос, заданный интервьюером во время предыдущего собеседования: каковы элементы в отрасли и в чем разница между ними и элементами уровня блока? Это очень простой вопрос интервью, но многие начинающие обычно фокусируются только на семантике лейбла и игнорируют характеристики ярлыков внутри уровня и блока. Поэтому вполне вероятно, что на на вышеуказанные вопросы нельзя ответить или ответить не полностью.
Общие встроенные элементы в HTML:<pan>, <a>, <img>, <put>, <textarea>, <select>, <babel>
Это также включает в себя некоторые текстовые элементы, такие как: <br>, <b>, <strong>, <sup>, <sub>, <i>, <em>, <lel>, <u> и т. Д.
Если вы только ответите <pan> и <img>, это было бы неразумно.
Общие элементы уровня блока в HTML:<div>, <table>, <form>, <p>, <ul>,
<h1> ...... <h6>, <hr>, <pre>, <drade>, <Center>, <marquee>, <blockquote> и т. Д.
Если вы только ответите <div>, это было бы неразумно.
Так в чем же разница между ними?Элементы уровня блока
1. Всегда начинайте с новой линии, то есть каждый элемент уровня блока занимает одну строку и по умолчанию расположен вертикально вниз;
2. Высота, ширина, маржа и прокладка являются управляемыми, с эффективными настройками и эффектами поля;
3. Когда ширина не установлена, по умолчанию составляет 100%;
4. Элементы уровня блока могут содержать элементы на уровне блока и встроенные элементы.
· Встроенные элементы
1. Это в той же линии, что и другие элементы, то есть элементы в линии и другие элементы в линии будут расположены на горизонтальной линии;
2. Высота и ширина неконтролируемы, а настройки недействительны и определены контентом.
Установка маржи эффективна слева и справа, с эффектом маржи;
Установка маржи будет поддерживать пространство вверх и вниз, не будет вызывать эффекта маржи (то есть маржинальный/нижний, имеет значения на модели коробки, но на странице нет эффекта маржи).
Настройка накладки влево и вправо эффективна. Установка накладки вверх и вниз увеличит пространство, но не будет производить эффект маржи (то же самое, что и выше).
Эффект прокладки показан следующим образом:
<!DOCTYPE html><html> <head> <meta charset=UTF-8> </head><style>span{border:1px solid red;padding:10px;}div{border:1px solid blue;}</style> <body> <div>Block level element</div> <span> In-line element</span> <span> In-line element</span> <div>Block level Элемент </div> </body> </html>3. Согласно концепции семантики лейбла, лучше всего включать только встроенные элементы, а не элементы на уровне блоков.
КонвертироватьКонечно, характеристики между элементами уровня блока и встроенными элементами могут быть преобразованы друг в друга. HTML может разделить элементы на три типа: элементы в строке, блочные элементы и элементы блока в строке.
Используйте атрибут дисплея, чтобы преобразовать три в произвольное преобразование:
(1) дисплей: встроенный; преобразовать в встроенные элементы;
(2) отображение: блок; преобразовать, чтобы блокировать элементы;
(3) дисплей: встроенный блок; преобразовать в встроенные элементы блока.
Встроенные элементы блока сочетают в себе характеристики встроенных элементов и встроенных элементов:(1) Если линейная обертка не обернута автоматически, она будет расположена на горизонтальной линии с другими элементами линии;
(2) высота, ширина, маржа и прокладка являются управляемыми, с эффективными настройками и эффектами поля;
(3) Расположение по умолчанию слева направо.
Это конец этой статьи о деталях того, каковы различия между элементами HTML и элементами уровня блока. Для получения дополнительных связанных элементов HTML и элементов уровня блока, пожалуйста, найдите предыдущие статьи с wulin.com или продолжайте просматривать соответствующие статьи ниже. Я надеюсь, что все будут поддерживать wulin.com в будущем!