Главная » Языки программирования

Container types in html

Содержание
  1. container-type
  2. Syntax
  3. Values
  4. Formal definition
  5. Formal syntax
  6. Example
  7. Specifications
  8. Browser compatibility
  9. See also
  10. Found a content problem with this page?
  11. MDN
  12. Support
  13. Our communities
  14. Developers
  15. Common container-types in CSS
  16. Changing type of a container
  17. Writing comments in CSS

container-type

The container-type CSS property is used to define the type of containment used in a container query.

Syntax

/* Keyword values */ container-type: normal; container-type: size; container-type: inline-size; /* Global Values */ container-type: inherit; container-type: initial; container-type: revert; container-type: revert-layer; container-type: unset;

Values

Establishes a query container for container size queries on both the inline and block axis in both the inline and block dimensions. Applies layout containment, style containment, and size containment to the container.

Establishes a query container for dimensional queries on the inline axis of the container. Applies layout, style, and inline-size containment to the element.

The element is not a query container for any container size queries, but remains a query container for container style queries.

Note: to understand what happens when you apply layout, style, and size containment to a box, see the contain property.

Formal definition

Formal syntax

Example

Given the following HTML example which is a card component with an image, a title, and some text:

div class="container"> div class="card"> img src="image.png" alt="Cat with two different color eyes" /> h2>Card titleh2> p>Card contentp> div> div>

To create a container context, add the container-type property to an element. The following uses the inline-size value to create a containment context for the inline axis of the container:

.container  container-type: inline-size; >

Writing a container query via the @container at-rule will apply styles to the elements of the container when it is wider than 400px:

@container (min-width: 400px)  .card  display: grid; grid-template-columns: 2fr 1fr; > >

For more information on container queries, see the CSS Container Queries page.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

  • CSS container queries
  • @container at-rule
  • CSS container shorthand property
  • CSS container-name property
  • CSS content-visibility property

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Common container-types in CSS

In the previous tutorial, we’ve set size of some div containers using width and height properties. But if you try to do the same thing with an element created by tags, you will see that it just doesn’t work. It’s because the default container type of the element does not allow us to set size of the container.

There are 3 common container types :

block containers take 100% width of their parent containers by default.
We can set size of these containers using width and height properties.
Ex: headings, paragraphs, div, nav, etc…

inline containers won’t take space. They keep their size as small as possible (just wrapping around the content inside). Web browsers treat these containers as text contents (words).
We can NOT set size of these containers.
Ex: links, span, etc…

inline-block containers are special. Web browsers treat them as text contents but also allow us set size of these containers using width and height properties.
Ex: buttons, images, etc…

Changing type of a container

Sometimes we want to provide better experience to mobile users by making size of anchor elements a little bit bigger than default to make sure that people don’t have to tap few times to hit a link.

There is a CSS property called display which can help us to change type of containers. Let’s create some look-like-button links. 😀

Besides 3 common values block , inline , and inline-block ; The display property can be used with various values which are useful in some ways. Some of them will require up-to-date web browsers. Here is the reference link in case you want to go further: The display Property.

Writing comments in CSS

Just like HTML, We can write comments in CSS code. Comments will be ignored when web browsers process CSS code.

A comment in CSS can be written by using a pair of /* and */ to enclose /* something */ .

We can also use comments to quickly cancel some CSS code blocks without deleting or moving them to another temporary place.

Our tutorial about container-types has finished. In the next tutorial, we’ll talk about background properties .

  • Html
    1. 1. Getting Started html — How to create a website? web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, html, create, website, webpage, learn, html tags
    2. 2. Images & Links html — How to add images into a webpage? web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, html, image, link
    3. 3. Embedded Content html — How to add videos into a webpage? web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, html, embedded, content, video, audio, music, image
    4. 4. Container Tags html — HTML container tags web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, html, container, basic, template
    5. 5. Lists & Tables html — Creating Lists and Tables web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, html, ordered, unordered, list, table
    6. 6. Text Formatters html — Semantic text formatters web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, html, text, formatters, bold, italic, del, code, pre
    7. 7. Inputs & Forms html — The most basic inputs web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, html, input, form, button
    8. 8. Other Inputs html — Other common Input types web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, html, input, form
  • Css
    1. 1. Getting Started css — What is CSS? Why do we need it? web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, intro
    2. 2. Selectors & Priorities css — How to select a specific element? web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, selectors, priorities
    3. 3. Colors & Lengths css — How to specify Colors in CSS? web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, colors, units
    4. 4. Container Types css — Common container-types in CSS web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, display, property
    5. 5. Background Properties css — Set an image as background web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, background
    6. 6. Border Properties css — The border properties web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, border, border-radius
    7. 7. Position Properties css — Position properties in CSS web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, position, properties, static, relative, absolute, fixed, top, right, bottom, left
    8. 8. Styling Text css — Changing how letters look web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, styling text, font-family, font-size, font-weight, font-style, text-align, line-height
    9. 9. Combining Selectors css — Combining CSS Selectors web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, combine selectors
    10. 10. Pseudo Classes css — CSS Pseudo Classes web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, pseudo classes
    11. 11. Width & Height css — The auto value web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, size, properties, width, height, min-width, max-width, min-height, max-height, auto
    12. 12. Margin & Padding css — The margin & padding properties web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, space, properties, padding, margin
    13. 13. Media Query css — Using media query syntax web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, @media, media query, responsive
    14. 14. Frameworks & Icons css — What is a framework? web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, framework, icons, font, awesome
    15. 15. Transition Effects css — The transition property web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, transition, animation, keyframe
    16. 16. CSS Animations css — The animation property web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, css, @keyframes, animation
  • Bootstrap
    1. 1. Getting Started bootstrap — How to Bootstrap a website? web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, bootstrap, getting started
    2. 2. Components & Utilities bootstrap — Bootstrap’s components web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, bootstrap, components, utilities
    3. 3. Content & Layout bootstrap — Bootstrap’s utilities for content web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, bootstrap, content, layout
    4. 4. Bootstrap It ! bootstrap — Creating a simple homepage web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, bootstrap, simple, homepage
  • JavaScript
    1. 1. Getting Started javascript — What is JavaScript? web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, javascript, getting started
    2. 2. Type & Variable javascript — What is Type? web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, javascript, type, number, string, variable
    3. 3. Function & Scope javascript — Why is function blissful? web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, javascript, function, scope, type
    4. 4. Object & Everything javascript — An object in JavaScript web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, javascript, type, class, prototype, object, everything
    5. 5. Document & Event javascript — The object — document web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, javascript, object, dom, document object model, document, event
  • jQuery
    1. 1. Coming soon jquery — Coming soon
  • Jekyll
    1. 1. Coming soon jekyll — Coming soon
  • Sample
    1. 1. Simple Navbar sample — Creating a simple navigation bar web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, simple, sample, navigation, bar, nav, navbar, html, css
    2. 2. Responsive Navbar sample — Creating a responsive navigation bar web development, beginner, non-coder, kei nart, free, tutorial, coding, programming, code nart, sample, simple, responsive, navigationm bar, html, css

Источник

Читайте также:  Css for image url
Оцените статью
© 2024 Программирование