Разрешены ли процентные ширины в CSS (и в частности в CSS3)?

Question

Насколько я понимаю, процентная ширина не поддерживается в HTML5 . Ширина и тому подобное должны быть указаны в пикселях. (Пожалуйста, поправьте меня, если я ошибаюсь.)

Однако разрешено ли мне создавать элемент в CSS, указывать его ширину в процентах, а затем использовать этот элемент на странице HTML5? (Я попробовал, и он делает то, что я хочу, но лучше ли это практиковать?)

---

Несмотря на то, что это задумывалось как вопрос общего характера, я пытался реализовать конкретный элемент <table>:

<table class="wideTable">

И тогда CSS будет выглядеть так:

table.wideTable {
  border-collapse: collapse;
  width: 100%;
}

---

Большое спасибо Дэниелу Беку за его чудесный исчерпывающий ответ. Кажется, что Процентная ширина в CSS полностью поддерживается .

Answer 1

ширина в процентах не поддерживается в HTML5

Я подозреваю, что вы имеете в виду атрибуты HTML width и height:

<img src="foo.jpg" width="100" height="100">

Вы правы, что эти значения в пикселях ; спецификация говорит, что эти атрибуты «должны иметь значения, которые являются действительными неотрицательными целыми числами», поэтому было бы неправильно использовать такие значения, как «100px» или использовать другие единицы (например, процент) в этих атрибутах.

(Браузеры различаются по тому, как они обрабатывают неправильные единицы в этих атрибутах, в зависимости от единицы, и часто по-разному для ширины и высоты. Это своего рода беспорядок, не вникай в это.)

Атрибуты ширины и высоты действительны только для определенных элементов: изображения, видео, фреймы и т. Д.

Могу ли я создать элемент в CSS, указать его ширину в процентах, а затем использовать этот элемент на странице HTML5?

Абсолютно, да! Это можно сделать во внешнем CSS или встроенном в HTML, используя атрибут style, а не атрибуты width или height; и может применяться к любому элементу, который имеет любые размеры экрана (например, не <br>).

При использовании в одном и том же элементе атрибуты стиля переопределяют CSS, что, в свою очередь, переопределяет атрибуты "width" и "height":

.override {
  width: 50%;
  height: 1em;
}

<img src="https://placehold.it/100x100" width="100" height="100" class="override">

Answer 2

«Пожалуйста, исправьте меня, если я ошибаюсь» -> Вы ошибаетесь.

Обычно используются значения в процентах для ширины.