Многоколоночный макет (Многоколоночный)
Макет с несколькими столбцами предназначен для оформления текстового контента в виде макета с несколькими столбцами, такого как газета. Другими словами, каскадный поток, которого мы раньше могли достичь с помощью js или JQuery, теперь может быть достигнут напрямую через CSS в CSS3, хотя есть проблемы с совместимостью. .
совместимость
IE10+, FireFox16+, Chrome26+, Safari6.1+, Opera12.1
Свойства многоколоночного макета
CSS3 предоставляет ряд свойств для реализации многоколоночного макета, как показано в следующей таблице:
1.columns задает количество столбцов объекта и ширину каждого столбца.
Устанавливает или получает количество столбцов объекта и ширину каждого столбца.
грамматика:
columns:<'column-width'>||<'columns-count'>;
Описание параметра:
(1) Первый параметр относится к ширине каждого столбца.
(2) Второй параметр относится к количеству столбцов. Вы можете написать два или один.
Эти два параметра отдают приоритет количеству столбцов (в случае понижения). Если ширины недостаточно (количество столбцов * заданная ширина > ширина контейнера), он автоматически уменьшит один столбец и автоматически увеличит ширину абзаца до ширины контейнера. Соответствующий интервал автоматически создается посередине.
Пример:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Разметка с несколькими столбцами</title><style>*{margin:0;padding:0;}div.test1,div.test2{border :20pxsolidrgba(0,0,0.3);}div.test1{ширина:900px;-webkit-columns:300px4;-moz-columns:300px4;columns:300px4;}div.test1>div{margin-top:20px; border:2pxsolidred;}div.test2{-webkit-columns:400px;-moz-columns:400px;columns:400px;}div.test2>div{margin-top:20px;border:2pxsolidred;</style>< /head><body><div><div>Из первоначального позиционирования изобретения Денниса Ритчи, изобретателя языка C, мы знаем, что оно должно быть системой, а не графическим программным обеспечением, и должно включать в себя драйверы разработки. , выполнять ряд основных задач, таких как ядро системы, управление файлами, внутреннее управление, сетевое взаимодействие и т. д. Следовательно, только изучив синтаксис языка C, вы также должны изучить другие предметы, такие как принципы работы операционной системы, протоколы связи, принципы компиляции и структуры данных. Выполните предыдущие требования. </div><div>В настоящее время, когда вы увидите руководство по материнской плате на английском языке, вы будете знать, какой интерфейс следует читать, как оговорен протокол связи, сколько байт следует прочитать... и так далее, прежде чем Вы можете писать только драйверы и использовать ядра для связи. В этом смысле, даже если спрос на корпоративные таланты в обществе относительно невелик, нет проблемы отсутствия работы вообще. вы выбираете работу и даже платите за нее, потому что вы не только можете выполнять эти, но и многие сопутствующие задачи, такие как разработка драйверов, разрешение DNS, антивирус, безопасность связи, технология виртуализации, обрезка ядра, все они компетентны, и вы можете даже разработать новую операционную систему самостоятельно. </div><div>При этом в наших нынешних условиях ориентация преподавания языка C в большинстве университетов заключается в том, что в дополнение к курсам языка C только некоторые колледжи должны также предлагать структуру данных, компьютерную архитектуру, принципы компиляции, курсы такие как принципы операционной системы, и некоторые школы в этих курсах сохраняют только структуры данных или даже больше не предлагают структуры данных. Поэтому язык C позиционируется только как просвещение по программированию, и достаточно знать процессно-ориентированное мышление и C. синтаксис языка. </div><div>Школа надеется, что после изучения языка C они смогут изучить C++, Java или другие языки высокого уровня, чтобы они могли делать более практичные вещи и легко найти работу, если у них будет больше желания. для достижения успеха они могут просто использовать язык C. Больше не нужно учиться, просто изучайте Java, C++ или другие языки высокого уровня без каких-либо знаний. В этом собственно и заключается разница между профессиональным классом и учебным заведением. Если вы не усваиваете знания зря, вам следует больше задуматься о том, полезны они или нет. </div></div><br><div><div>Итак, судя по текущей общей ситуации, если вы специализируетесь на компьютерах/программном обеспечении в ключевом колледже, вам следует усердно работать над этими реальными материалами. не тратьте зря учебные ресурсы страны, потому что вы несете ответственность за будущее индустрии ИТ-программного обеспечения страны, если вы хотите заниматься исследованиями и разработками программного обеспечения, то вы должны, по крайней мере, хорошо изучить структуру данных, потому что вам нужно создавать; , а не копировать код портера. Если вы просто хотите зарабатывать на жизнь, просто изучите технику, которая может дать результаты. </div><div>Наконец, давайте посмотрим на общие цели, с которыми студенты изучают язык C, от младшего колледжа до степени бакалавра, вступительных экзаменов в аспирантуру и языка C второго уровня, ориентированные на спрос учебные пособия в основном основаны на них. теоретические вопросы, практические вопросы и экзамены, поэтому тип проекта. Сложных ресурсов языка C гораздо меньше, поэтому, естественно, вы редко увидите графические вещи. Конечно, как ярый сторонник языка C, Dotcpp также укрепит ресурсы программирования здесь в будущем, чтобы предоставить всем достаточную поддержку ресурсов. </div><div>Когда мы изучаем язык C, поскольку мы выбираем консольные программы, ваши программы запускаются в черном окне. Если вы пишете приложение для Windows, такого черного окна не будет, а будет синтаксис языка C. все еще использоваться, каждый может понять. </div><div>Если это графическая разработка на чистом языке C, в зависимости от вашей стадии вы можете рассмотреть возможность использования функции графического интерфейса, поддерживаемой компилятором TurBoC, или установки библиотеки easyX в VC6 для завершения графической разработки. некоторых игр, таких как нарды, тетрис, пинбол, змея и т. д., которые являются графическими и интерактивными. Для более продвинутых игр, требующих обновления изображения и профессионального улучшения, вы можете рассмотреть возможность использования MFC или QT. </div></div></body></html>Результаты запуска:
Установите столбцы div.test1: 300px 4; то есть ширина каждого столбца равна 300 пикселей, всего столбцов 4, но размер контейнера составляет 900 пикселей, что меньше 1200 пикселей, поэтому количество столбцов будет автоматически. уменьшено, а ширина столбца будет соответственно увеличена для отображения наиболее подходящим образом. Однако div.test2 не устанавливает ширину контейнера, ширина столбца установлена на 300 пикселей, а количество столбцов установлено на 4 столбца. Количество столбцов будет ограничено для оптимизации ширины столбца.
Примечание. Установите столбцы div.test1: 300px 4, то есть ширина каждого столбца равна 300 пикселей, всего столбцов 4, но размер контейнера составляет 900 пикселей, что меньше 1200 пикселей, поэтому количество столбцов будет автоматически уменьшаться, а ширина столбца будет увеличена соответствующим образом для достижения наиболее подходящего метода отображения. Однако div.test2 не устанавливает ширину контейнера, ширина столбца установлена на 300 пикселей, а количество столбцов установлено на 4 столбца. Количество столбцов будет ограничено для оптимизации ширины столбца.
2. Column-width устанавливает ширину столбца.
грамматика:
ширина столбцов:<длина>|авто по умолчанию;
: используйте значение длины для определения ширины столбца. Отрицательные значения не допускаются. Авто: настройте ширину в соответствии с количеством столбцов.
Хотя ширина столбца установлена, она будет автоматически распределяться в зависимости от количества столбцов и ширины контейнера.
PS: Пробел в каждом столбце 14 пикселей.
3. columns-count задает количество столбцов
Устанавливает или получает количество столбцов объекта.
грамматика:
количество столбцов: <целое число>|авто;
Описание параметра:: используйте целочисленные значения для определения количества столбцов, отрицательные значения не допускаются; авто: настройте ширину выделения в соответствии с шириной столбца.
4. columns-gap устанавливает зазор между столбцами
Устанавливает или извлекает промежутки между столбцами объекта.
грамматика:
разрыв столбца:<длина>|нормальный;
Описание параметра: Используйте значение длины для определения промежутка между столбцами (не расстояния между словами, а расстояния между абзацами), отрицательные значения не допускаются, обычно: такие же, как размер шрифта. Нормальный интервал зависит от размера шрифта. То же, что и размер шрифта.
Пример:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Разметка с несколькими столбцами</title><style>*{margin:0;padding:0;}div.test1,div.test2,div .test3{border:20pxsolidrgba(0,0,0.3);}div.test1>div,div.test2>div,div.test3>div{background-color:rgb(0,0,0,.3);margin -top:20px;}div.test1{ширина:900px;columns:300px4;font-size:14px;}div.test2{columns:400px;font-size:30px;}div.test3{column-count:4; columns-gap:14px;</style></head><body><h3>Шрифт: 14 пикселей, пробел не установлен: по умолчанию используется тот же шрифт, что и шрифт 14 пикселей;</h3><div><div>Много люди выучили язык C. У моих друзей обязательно возникнет этот вопрос, когда они снова вспомнят язык C. Почему язык C всегда работает в черном окне? Программа, которая либо вычисляет площадь треугольника, либо печатает количество нарциссов? Каким бы прекрасным ни было программирование, почему мы до сих пор не можем создавать эти классные программы? В конце концов, это просто ребячество! Почему. </div><div>Во-первых, позиционирование изобретения языка C: с самого начала его изобретения Деннисом Ритчи, изобретателем языка C, мы знаем, что это должна быть система, а не графическое программное обеспечение само по себе, это должно быть. Он включает в себя ряд основных задач, таких как разработка драйверов, создание ядра системы, управление файлами, внутреннее управление, сетевые коммуникации и т. д. </div><div>Во-вторых, общая позиция преподавания в Китае. Однако в наших нынешних условиях позиция большинства университетов по преподаванию языка C заключается в том, что только некоторые колледжи должны предлагать структуры данных в дополнение к курсам языка C. , архитектура компьютера, принципы компиляции, принципы работы операционных систем и другие курсы. </div><div>Кроме того, Комиссия округа Ваньань по проверке и надзору за дисциплиной изучила выполнение обязанностей соответствующими подразделениями и персоналом, такими как Управление образования и спорта округа, Управление по надзору за рынком и качеством округа, а также Правительство поселка Цзяньтянь и рассмотрело надзор. Ответственные лица уездного бюро образования и спорта, Управления по надзору за рынком и качеством округа, Бюро сельского хозяйства округа, Комиссии по здравоохранению и планированию семьи округа, правительства поселка Цзяньтянь и других соответствующих подразделений, которые не выполнившие свою работу, отдельно зарегистрировали и рассмотрели дела. В то же время окружная комиссия по проверке и надзору за дисциплиной проведет расследование процесса подачи заявок на питание для учащихся и объявит общественности результаты, как только они станут доступны. </div></div><br><h3>Шрифт: 30 пикселей, без пробелов: значение по умолчанию — 30 пикселей, такое же, как и шрифт;</h3><div><div>Многие друзья, изучавшие язык C оглядываемся назад на C Когда дело доходит до языков, обязательно возникают такие вопросы: Почему язык C работает под черным окном? Программа, которая либо вычисляет площадь треугольника, либо печатает количество нарциссов? Каким бы прекрасным ни было программирование, почему мы до сих пор не можем создавать эти классные программы? В конце концов, это просто ребячество! Почему. </div><div>Во-первых, позиционирование изобретения языка C: с самого начала его изобретения Деннисом Ритчи, изобретателем языка C, мы знаем, что это должна быть система, а не графическое программное обеспечение само по себе, это должно быть. Он включает в себя ряд основных задач, таких как разработка драйверов, создание ядра системы, управление файлами, внутреннее управление, сетевые коммуникации и т. д. </div><div>Во-вторых, общая позиция преподавания в Китае. Однако в наших нынешних условиях позиция большинства университетов по преподаванию языка C заключается в том, что только некоторые колледжи должны предлагать структуры данных в дополнение к курсам языка C. , архитектура компьютера, принципы компиляции, принципы работы операционных систем и другие курсы. </div><div>В-третьих, для этого можно использовать язык C, но это редко делается непосредственно на языке C. Когда мы изучаем язык C, мы выбираем консольные программы, поэтому ваши программы запускаются в черном окне. напишите приложение для Windows, такого черного окна не будет. Это все равно будет синтаксис языка C, понятный каждому. </div></div><br><h3>Шрифт: 30 пикселей, интервал настройки: 14 пикселей;</h3><div><div>Многие друзья, изучавшие язык C, обязательно узнают об этом, когда снова оглянутся на язык C. У меня вопрос: почему язык C работает под черным окном? Программа, которая либо вычисляет площадь треугольника, либо печатает количество нарциссов? Каким бы прекрасным ни было программирование, почему мы до сих пор не можем создавать эти классные программы? В конце концов, это просто ребячество! Почему. </div><div>Во-первых, позиционирование изобретения языка C: с самого начала его изобретения Деннисом Ритчи, изобретателем языка C, мы знаем, что это должна быть система, а не графическое программное обеспечение само по себе, это должно быть. Он включает в себя ряд основных задач, таких как разработка драйверов, создание ядра системы, управление файлами, внутреннее управление, сетевые коммуникации и т. д. </div><div>Во-вторых, общая позиция преподавания в Китае. Однако в наших нынешних условиях позиция большинства университетов по преподаванию языка C заключается в том, что только некоторые колледжи должны предлагать структуры данных в дополнение к курсам языка C. , архитектура компьютера, принципы компиляции, принципы работы операционных систем и другие курсы. </div><div>В-третьих, для этого можно использовать язык C, но это редко делается непосредственно на языке C. Когда мы изучаем язык C, мы выбираем консольные программы, поэтому ваши программы запускаются в черном окне. напишите приложение для Windows, такого черного окна не будет. Это все равно будет синтаксис языка C, понятный каждому. </div></div></body></html>Результаты запуска:
5. Правило столбца устанавливает границу между столбцами
грамматика:
правило-столбца:<ширина-правила-столбца>||<стиль-правила-столбца>||<цвет-правила-столбца>
Описание параметра
● columns-rule-width Толщина границы.
●стиль границы в стиле правила столбца
●цвет границы столбца-правила-цвета
PS: Обратите особое внимание на то, что если промежуток между столбцами < ширины границы, возникнет ситуация, когда столбцы перекроют границу.
(1) ширина правила столбца
Устанавливает или получает толщину границы между столбцами объекта.
грамматика:
ширина-правила-колонки:<длина>|тонкая|средняя|толстая;
Описание параметра
●длина: используйте значение длины для определения толщины границы, отрицательные значения не допускаются;
●средний: определяет толщину границы по умолчанию;
●тонкая: определяет границу, которая тоньше толщины по умолчанию;
●толщина: определяет толщину границы, превышающую толщину по умолчанию.
(2) столбец-правило-стиль устанавливает стиль границы
Устанавливает или получает стиль границы между столбцами объекта.
грамматика
стиль правила столбца: нет|скрытый|пунктирный|пунктирный|сплошной|двойной|паз|гребень|вставка|начало;
Описание параметра
●нет: нет контура;
●скрытый: скрыть границу;
●пунктир: пунктирный контур;
●пунктир: пунктирный контур;
●сплошной: сплошной контур;
●double: контур двойной линии;
●канавка: трехмерный профиль канавки;
●гребень: 3D выпуклый профиль канавки;
●вставка: 3D вогнутый контур края;
● Начало: 3D-выпуклый контур края.
Примечание. Если имеется контур с двумя линиями, ширина будет включать расстояние между двумя линиями.
(3) столбец-правило-цвет устанавливает цвет границы
Устанавливает или получает цвет границы между столбцами объекта.
грамматика:
столбец-правило-цвет:<цвет>;
Описание параметра: Укажите цвет. Без ширины и стиля цвет будет неудачным. По умолчанию черный.
6. columns-span устанавливает элемент для охвата всех столбцов.
Устанавливает или получает, охватывает ли элемент объекта все столбцы.
грамматика:
диапазон столбцов: нет | все;
Описание параметра: нет: не охватывает столбцы все: охватывает все столбцы;
Он используется не в контейнере, как другие атрибуты столбца, а в дочерних элементах контейнера.
7.column-fill устанавливает высоту столбцов, которые будут унифицированы (в настоящее время несовместимо с основными браузерами)
Устанавливает или получает информацию о том, является ли высота всех столбцов объекта одинаковой.
грамматика:
столбец-заполнение: autodefault | баланс;
Описание параметра: auto: адаптивное содержимое по высоте столбца; баланс: высота всех столбцов унифицирована с самым высоким столбцом.
Основные браузеры не поддерживают этот атрибут.
8. разрыв столбца устанавливает новую строку
●column-break-before определяет, следует ли разрывать строку перед указанным объектом.
●column-break-after определяет, следует ли разрывать строку после указанного объекта.
●column-break-inside определяет, следует ли разрывать строки внутри объекта.
(1) разрыв столбца перед
Разбивать ли строки перед установкой или получением объекта.
грамматика:
столбец-разрыв-перед: авто|всегда|избегать;
Описание параметра: auto: не принудительно и не запрещает разрыв строк перед элементами и создание новых столбцов всегда: всегда разрыв строк перед элементами и создание новых столбцов; избегайте: избегать разрыва строк перед элементами и создания новых столбцов;
(2) разрыв столбца после
Разбивать ли строки после установки или получения объекта.
грамматика:
столбец-разрыв-после: авто|всегда|избегать;
Описание параметра: auto: не принудительно и не запрещает разрыв строк после элементов и создание новых столбцов всегда: всегда разрыв строк после элементов и создание новых столбцов; избегайте: избегать разрыва строк после элементов и создания новых столбцов;
(3) атрибут разрыва столбца внутри
Устанавливает или получает информацию о том, разорваны ли линии внутри объекта.
грамматика:
столбец-брейк-внутри:autodefault|избегать