Антигерой css-разметки

指南和示例

上面 部分提供了 取值的多个示例。下面的资料将详细介绍 的各个取值。


Adapting to the new two-value syntax of display

CSS Flow Layout (, )

  • Block and Inline Layout in Normal Flow
  • Flow Layout and Overflow
  • Flow Layout and Writing Modes
  • Formatting Contexts Explained
  • In Flow and Out of Flow
  • Basic concepts of flexbox
  • Aligning Items in a Flex Container
  • Controlling Ratios of Flex Items Along the Main Axis
  • Cross-browser Flexbox mixins
  • Mastering Wrapping of Flex Items
  • Ordering Flex Items
  • Relationship of flexbox to other layout methods
  • Backwards Compatibility of Flexbox
  • Typical use cases of Flexbox
  • Basic Concepts of Grid Layout
  • Relationship to other layout methods
  • Line-based placement
  • Grid template areas
  • Layout using named grid lines
  • Auto-placement in grid layout
  • Box alignment in grid layout
  • Grids, logical values and writing modes
  • CSS Grid Layout and Accessibility
  • CSS Grid Layout and Progressive Enhancement
  • Realizing common layouts using grids

除此之外,你可以在 MDN 上找到布局模型的详细解释:

  • CSS 网格布局
  • CSS Flexible 布局
  • CSS 布局 (初学者学习模块)

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения .

Для таблицы целиком , для строки – , для ячейки – и т.д.

Пример использования:

Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента,

Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

С точки зрения современного CSS, обычные , , и т.д. – это просто элементы с предопределёнными значениями :

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Внутри ячеек свойство выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

CSS не требует, чтобы вокруг была структура таблицы: и т.п. Может быть просто такой одинокий , это допустимо.

При этом он ведёт себя как ячейка , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи .

Property Values

Value Description Play it
inline Displays an element as an inline element (like <span>). Any height and width properties will have no effect Play it »
block Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width Play it »
contents Makes the container disappear, making the child elements children of the element the next level up in the DOM Play it »
flex Displays an element as a block-level flex container Play it »
grid Displays an element as a block-level grid container Play it »
inline-block Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values Play it »
inline-flex Displays an element as an inline-level flex container Play it »
inline-grid Displays an element as an inline-level grid container Play it »
inline-table The element is displayed as an inline-level table Play it »
list-item Let the element behave like a <li> element Play it »
run-in Displays an element as either block or inline, depending on context Play it »
table Let the element behave like a <table> element Play it »
table-caption Let the element behave like a <caption> element Play it »
table-column-group Let the element behave like a <colgroup> element Play it »
table-header-group Let the element behave like a <thead> element Play it »
table-footer-group Let the element behave like a <tfoot> element Play it »
table-row-group Let the element behave like a <tbody> element Play it »
table-cell Let the element behave like a <td> element Play it »
table-column Let the element behave like a <col> element Play it »
table-row Let the element behave like a <tr> element Play it »
none The element is completely removed Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Синтаксис

Свойство задается с помощью ключевых слов. Ключевые слова группируются по шести категориям:

Эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока.
Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).
Создает блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.
Некоторые модели разметки, такие как и имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те «внутренние» значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок.
Эти значения определяют, генерирует ли элемент отображение боксов вообще.
В CSS 2 используется синтаксис с одним ключевым словом для свойства , для которого требуются отдельные ключевые слова для блокового и строкового уровней одного способа разметки.
Устарело Gecko 62
Значения, используемые только в Firefox, в основном, для стилизации. XUL documents.

«Наследственные» значения отображения

Спецификация уровня 3 подразумевает два значения для свойства — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.


Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:

.container {
    display: inline flex;
}

В настоящее время это можно задать с помощью одного значения.

.container {
    display: inline-flex;
}

Development

Supported commands

  • : creates a new of specified type; arguments are:
    • : the registered type, e.g., for
    • : identifier of the window to be reused (pick a random one if you want a new window)
    • : title for the window title bar
    • : passed to the method

Built-in Pane types

creates a zoomable element

  • : URL for the element
  • : initial width in pixels
  • : array of 3-element arrays , where , are the coordinates is top-left, is bottom-right; is the label content
  • : list of strings, first element is the X label

places raw text in element

places raw audio content in an element

Technical overview

The server is a trivial message forwarder:

The Lua client sends JSON commands directly to the server. The browser script interprets these commands, e.g.

History

Originally forked from gfx.js.

The initial goal was to remain compatible with the torch/python API of , but remove the term.js/tty.js/pty.js stuff which is served just fine by ssh.

Compared to :

  • no terminal windows (no term.js)
  • plots resize when windows are resized
  • images support zoom and pan
  • image lists are rendered as one image to speed up loading
  • windows remember their positions
  • implementation not relying on the filesystem, supports remote clients (sources)

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Definition and Usage

The display property sets or returns the element’s display type.

Elements in HTML are mostly «inline» or «block» elements: An inline element has floating content on its left and right side. A block element fills the entire line, and nothing can be displayed on its left or right side.

The display property also allows the author to show or hide an element. It is similar to the visibility property. However, if you set , it hides the entire element, while means that the contents of the element will be invisible, but the element stays in its original position and size.

Tip: If an element is a block element, its display type can also be changed with the float property.

More Examples

Example

A demonstration of how to use the contents property value. In the following example the .a container will disappear, and making the child elements (.b) children of the element the next level up in the DOM:

.a {  display: contents;  border: 2px solid red;  background-color: #ccc;  padding: 10px;  width: 200px;}.b {  border: 2px solid blue;   background-color: lightblue;  padding: 10px;}

Example

A demonstration of how to use the inherit property value:

body {  display: inline;}p {  display: inherit;}

Example

Set the direction of some flexible items inside a <div> element in reverse order:

div {  display: flex;  flex-direction: row-reverse;}

Значения list-item, run-in и flex


У свойства есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

Если после идёт , то становится его первым инлайн-элементом, то есть отображается в начале .

Если ваш браузер поддерживает это значение, то в примере ниже , благодаря , окажется визуально внутри :

Если же вы видите две строки, то ваш браузер НЕ поддерживает .

Вот, для примера, правильный вариант отображения , оформленный другим кодом:

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает . На момент написания этой статьи только IE поддерживал .

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module

Почему бы не использовать строчные элементы, такие как ?

Потому что вы выбираете элемент HTML по его смыслу, а не отображению. Если мы решили, что абзац подходит нашему содержимому лучше всего, мы не должны менять тег ради стилизации. Это CSS заботится о стилизации.

Короче говоря, display позволяет сменить тип элемента без изменения его смысла.

Для каждого варианта display есть определённое поведение:

  • block будет занимать всю доступную ширину;
  • inline будет действовать как обычный текст;
  • inline-block является, как предполагает его название, соединением блочного и строчного поведения, вариант «лучшее из обоих миров»;
  • list-item похож на block, так как он занимает всю доступную ширину, но показывает дополнительный маркер пункта списка;
  • у table, table-row и table-cell очень специфическое, хотя и неожиданное поведение, которое позволяет строить более интересные макеты.

Usage

Each command creates a new window (pane) on the desktop that can be independently positioned, resized, maximized. It also returns the id of the window which can be passed as the option to reuse the window for a subsequent command. This can be used to show current progress of your script:

for i = 1, num_iterations do
   -- do some work
   ...
   -- update results
   local state_win = display.image(current_state, {win=state_win, title='state at iteration ' .. i})
end

Another common option is . The title bar can be double-clicked to maximize the window. The button closes the window. The button «disconnects» the window so that it will not be overwritten when the script reuses the window id. This is useful if you want to make a quick «copy» of the window to compare progress between iterations.

Images

display.image(tensor, options)

Displays the tensor as an image. The tensor is normalized (by a scalar offset and scaling factor) to be displayable. The image can be panned around and zoomed (with the scroll wheel or equivalent). Double-click the image to restore original size or fill the window.

If the tensor has 4 dimensions, it is considered to be a list of images — sliced by first dimension. Same thing if it has 3 dimensions but the first dimension has size more than 3 (so they cannot be considered the RGB channels). This is equivalent to passing a list (Lua table) of tensors or the explicit command. This is convenient when visualizing the trained filters of convolutional layer. Each image is normalized independently. When displaying a list of images, the option can be used to put a small label on each sub-image:

display.images({a, b, c, d}, {labels={'a', 'b', 'c', 'd'}})

Finally, the option can be used to specify the initial size of the window in pixels.

Plotting

local config = {
  title = "Global accuracy/recall over time",
  labels = {"epoch", "accuracy", "recall"},
  ylabel = "ratio",
}

for t = 1, noEpoch do
  -- update model, compute data
  local accuracy, recall = train()
  -- update plot data
  table.insert(data, {t, accuracy, recall})
  -- display
  config.win = display.plot(data, config)
end

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function

backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside

caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor

direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight

grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows

hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing

line-height list-style list-style-image list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode

object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y

padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes

resize right

scroll-behavior

tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top

transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function

unicode-bidi user-select

vertical-align visibility

white-space width word-break word-spacing word-wrap writing-mode

z-index

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

More Examples


Difference between the display property and the visibility property:

function demoDisplay() {  document.getElementById(«myP1»).style.display = «none»; }function demoVisibility() {  document.getElementById(«myP2»).style.visibility = «hidden»; }

Toggle between hiding and showing an element:

function myFunction() {  var x = document.getElementById(‘myDIV’);  if (x.style.display === ‘none’) {     x.style.display = ‘block’;  } else {    x.style.display = ‘none’;   }}

Difference between «inline», «block» and «none»:

function myFunction(x)  {  var whichSelected = x.selectedIndex;  var sel = x.options.text;   var elem = document.getElementById(«mySpan»);   elem.style.display = sel;}

CSS Учебник

CSS СТАРТCSS ВведениеCSS СинтаксисCSS СелекторыCSS Как подключитьCSS ЦветаCSS background-colorCSS borderCSS marginCSS paddingCSS height/widthCSS Блочная модельCSS КонтурCSS ТекстCSS ШрифтыCSS ИконкиCSS СсылкиCSS СпискиCSS ТаблицыCSS displayCSS max-widthCSS positionCSS overflowCSS float/clearCSS inline-blockCSS ВыравниваниеCSS КомбинаторыCSS Псевдо-классыCSS Псевдо-элементыCSS opacity/transparencyCSS Панель навигацииCSS Выпадающие спискиCSS Галерея изображенийCSS Спрайты изображенийCSS Селекторы атрибутовCSS ФормыCSS СчётчикиCSS Макет веб-сайтаCSS ЕдиницыCSS Специфичности

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке (), но при этом может иметь важные свойства блока.

Как и инлайн-элемент:

  • Располагается в строке.
  • Размер устанавливается по содержимому.

Во всём остальном – это блок, то есть:

  • Элемент всегда прямоугольный.
  • Работают свойства .

Это значение используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Например:

Свойство позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Sözdizimi kuralları

display: none; 
display: inline;
display: block;
display: inline-block;
display: contents;
display: list-item;
display: inline-list-item;
display: table;
display: inline-table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: table-caption;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
display: run-in;

/* Global values */
display: inherit;
display: initial;
display: unset;

Değerler

display-value bir elementin görüntülenme biçimini tanımlamak için kullanılan bir değerdir.

Değer kümesi Değer Tanım
Basic values (CSS 1)

Elementi görüntülemeye kapatır.(Tasarım değişikliğe uğramaz.);bütün alt elementler de görüntülenmez. Belge, bu element yokmuş gibi davranır.

bir veya daha fazla satıriçi kutusu oluşturur.
blok element kutusu oluşturur.
Element içerik için bir blok kutusu oluşturur, ve içeriği listeye ayırır.
Gelişletilmiş değerler (CSS 2.1) inline-block değeri, kendisini çevreleyen bir block element alanı oluşturur.
Table model değerler (CSS 2.1)
CSS3 liste değerleri (CSS3) The inline-list-item display value makes the element a list item, with the effects described above. Additionally, the outside value of list-style-position computes to inside on this element. Otherwise, this display value is treated identically to inline.
Flexbox model değerleri (CSS3) Element, block elementi gibi davranır ve flexbox modeline uygun olarak görünür.
Element inline element gibi davranır ve flexbox modeline uygun olarak görünür.
Grid box model değerleri (CSS3)

Element, block elementi gibi davranır ve grid modeline uygun olarak görünür.

Deneyimlenebileceği üzere, . Özellikle ‘in display:grid’e ait bir prefix olmadığını belirtmeliyiz. -moz-grid ‘de belirtilen ve kullanmamanız gereken bir prefix’tir.

Element inline element gibi davranır ve grid modeline bağlı olarak içeriği kapsar.
Ruby formatting model values (CSS3)
Experimental values
  • If the run-in box contains a block box, same as block.
  • If a block box follows the run-in box, the run-in box becomes the first inline box of the block box.
  • If an inline box follows, the run-in box becomes a block box.
These elements don’t produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes.

С этим читают