Режим, отображение CSS
1. Во всех HTML-тегов в HTML на две категории, а именно, контейнера и уровня текста на основе. В тегах CSS CSS все будут делятся на две категории, а именно блок элементы и встроенные элементы
2. Какие элементы уровня блока? Что такое встроенные элементы?
(1) элементы уровня блока будет отдельной строкой
(2) элементы не отдельная строка строки
3. Элементы уровня блока
р DIV ч уль ола дл Li дт дд
элемент строки
Натяжение трубки Стонгом эм Ins дель
4. Стратегия памяти: Все теги уровня контейнера плюс р являются блочные элементы; все этапы, кроме текстовой метки р, является элементом линии.
5. Примеры
< Div > Я являюсь DIV </ DIV > < Р- > Я абзац </ Р- > < h1 > Я заголовок </ h1 > < HR > < диапазон > Я пролет </ диапазон > < B > Я полужирный </ б > < сильный > подчеркиваю </ сильный >
6. Различие между печатными элементами и встроенными элементами
(1) элемент уровня блока
Если ширина не задана, то родительский элемент и так широко, как по умолчанию, если ширина установлена, то устанавливается в соответствии с дисплеем.
(2) ряд элементов
Если ширина не установлена, то содержимое и так широко, как по умолчанию, если ширина устанавливаются, ни не установлена длиной и ширина.
Примеры: общий код
< Div > Я DIV </ DIV > < HR > < диапазон > Я пролет </ диапазон >
Посмотрите на значения по умолчанию
ДИВ {
фон: красный;
}
Продолжительность {
фон: голубой;
}
Давайте посмотрим на набор
ДИВ {
фон: красный;
ширина: 100px;
высота: 100px;
}
Продолжительность {
фон: голубой;
ширина: 100px;
высота: 100px;
}
В приведенном выше примере слово соответствует нашим ожиданиям
Но теперь мы задаем вопросы: Если вы хотите, ни свою собственную линию, но также можно установить ширину и высоту?
Мы ведем «рядный блок элементов»
В пределах элемента уровня блока строка 7.
Особенности: Ни линия сама по себе может установить ширину и высоту
Это IMG тег
例子：
image{ width: 50px; height:50px; } .........省略代码...... <img src="image\play_tennis.jpg" alt=""> <img src="image\play_tennis.jpg" alt="">
二、CSS元素显示模式转换
给标签设置属性
display:值；
值的范围：inline代表转换为行内标签；block代表转换为块级标签；inline-block代表转换为行内块级标签
div{ display: inline;/*转换为行内的标签*/ background: red; height: 100px; width: 100px; } span{ display: block;/*转换为块级标签*/ background: blue; height: 100px; width: 100px; } .c{ display: inline-block;/*转换为块级行内标签*/ background: yellow; height: 100px; width: 100px; } .........省略代码........ <div>我是div</div> <div>我是div</div> <span>我是span</span> <span>我是span</span> <p class="c">我是段落</p> <b class="c">我是加粗</b>
2.快捷键
di+table键：display: inline;
db+table键：display: block;
dib+table键：display: inline-block;
三、源码：
d91_CSS_display_mode.htm
d92_CSS_display_mode_transform.html
地址:
https://github.com/ruigege66/HTML_learning/tree/master
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼
