Практические советы, упомянутые в CSS World

Пожалуйста, поддержите г-на Чжана для конкретных принципов и объяснений следующих методов."Мир CSS", который здесь не раскрывается.

Причина того, что некоторые навыки не введены, заключается в том, что некоторые атрибуты будут отброшены стандартом, например: клип. Другая часть связана с тем, что я лично считаю, что совместимость плохая, и некоторые функции CSS3 могут компенсировать это, например, text-align:justify;, который может быть полностью реализован с помощью гибкого макета..

По просьбам пользователей сети добавлены некоторые картинки.Принцип картинок в том,чтобы не убирать бесполезные атрибуты(такие как цвет фона) из-за большого количества кода.На первый взгляд малоэффективные навыки будут добавьте несколько изображений.Если вы тестируете процесс Если нет эффекта, рекомендуется проверить геометрические свойства следующих элементов путем осмотра элементов. Также есть некоторые эффекты, которые можно получить копированием и вставкой, поэтому я не буду делать скрины (думая, что читатели могут быть ленивы, основная цель написания формата следующим образом - скопировать его прямо в тело и использовать его) , потому что длина слишком длинная. .

Эта статья была впервые опубликована сличный блог

очистить поплавок

В основном используется после того, как дочерний элемент плавает (плавает), родительский элемент не может поддерживать высоту и ширину.
```

<div class="clear">
    <img src="demo.gif">
</div>


<style>
    img {
        float: left;
    }
    /* 清除浮动 */
    .clear::after {
      content: "";
      display: block;
      clear: both;
    }
</style>
```
Текст располагается по центру, когда текста меньше, и слева, когда его часто

Поскольку div вложен в p, размер p не превышает div. Однако следует отметить, что когда содержимое p состоит из английских слов, если слово слишком длинное, например "pppppppppppppppppppppppppppp" или даже длиннее, оно будет рассматриваться как единое целое и превысит размер div.

Используйте «word-break:break-all» в p, если вы хотите, чтобы английские символы также содержали китайские символы.
```

<div class="box">
    <p class="content"></p>
</div>


<style>
    .box {
        text-align: center;
    }
    .content {
        display: inline-block;
        text-align: left;
    }
</style>
```
удар человек

Цель состоит в том, чтобы создать вогнутую или выпуклую форму, используя особенность, заключающуюся в том, что «2» китайских и английских слов не переносятся.
```

<div class='ao'></div>


<style>
    .ao {
        display: inline-block;
        width: 0;
    }
    .ao::before {
        content: "love 你 love";
        outline: 2px solid #000;
        color: #fff;
    }
</style>
```
Пусть отступы и границы не влияют на размер блочной модели

Я полагаю, что большинство людей знают об этом, но есть несколько странных вариантов поведения, например, что происходит с widthwidth, размер рендеринга элемента (под Chrome) равен padding+border, а когда padding+border
```

<div></div>


<style>
    div {
        box-sizing: border-box;
    }
</style>
```

высота: 100% экранный эффект

<!-- html -->
<div></div>

<!-- CSS方法一 -->
<style>
    html,body {
        height: 100%;
    } 
    div {
        height: 100%
    }
</style>
<!-- CSS方法二 -->
<style>
    div {
        position: absolute;
        height: 100%;
    }
</style>

Расширение элемента произвольной высоты

Недостатком является то, что если высота слишком велика, это вызовет слишком быструю задержку расширения и втягивания, поэтому это достаточно большое значение является наиболее подходящим.
```

<div></div>


<style>
    div {
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s; 
    }
    div.active {
        max-height: 666px;  /* 需要足够大的值 */
    }
</style>
```

Элегантное изображение не загружается или загружается неудачный эффект

Следует отметить, что после отображения изображения img станет «элементом замены», и элемент замены не может быть установлен как псевдоэлемент, поскольку содержимое контента заменяется изображением; также следует отметить, что элемент переменные в attr не могут заключаться в двойные кавычки.

<!-- html -->
<div>
    <img src="demo.gif" alt="lululu">
</div>

<!-- CSS -->
<style>
    div {
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
    img {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: relative;
    }
    img::after {
        /* 生成 alt 信息 */
        content: attr(alt);
        /* 尺寸和定位 */
        position: absolute; left: 0;bottom: 0;right: 0;
        /* 颜色 */
        background-color: rgba(0,0,0,.5);
        /* alt 信息隐藏 */
        transform: translateY(100%);
        /* 过渡动画效果 */
        transition: transform .2s;
        }
        img:hover::after {
        /* alt 信息显示 */
        transform: translateY(0);
    } 
</style>

CSS эффект замены плавающего изображения

Следует отметить, что если щелкнуть правой кнопкой мыши, чтобы сохранить картинку, сохраняется картинка в src, а не замененная.
```

<img src="demo.gif">


<style>
    img:hover {
        content: url(amazing.gif);
    }
</style>
```
Оптимизированный для SEO логотип заголовка «заменить элемент»

Причина использования h1 в основном связана с SEO и семантическими проблемами.
```

<h1>Weismann's blog</h1>


<style>
    h1 {
        content: url(logo.gif);
    }
</style>
```

Совместимые по высоте гистограммы с автоматической равной шириной и выравниванием по нижнему краю

Следует отметить, что первое i не может выполнять перенос, и это приведет к смещению назад после переноса.

<!-- html -->
<div class="box"><i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
</div>

<!-- CSS -->
<style>
    .box {
        width: 256px;
        height: 256px;
        text-align: justify;
    }
    .box:before { 
        content: "";
        display: inline-block;
        height: 100%;
    }
    .box:after {
        content: "";
        display: inline-block;
        width: 100%;
    }
    .bar {
        display: inline-block;
        width: 20px;
        /* height自定 */
    } 
</style>

Хорошо совместимые эффекты загрузки

Под IE6-IE9 это..., все остальное динамическое, цель использования точки - семантика и совместимость с браузерами младших версий.

<!-- html -->
正在加载中<dot>...</dot>

<!-- CSS -->
    <style>
    dot {
        display: inline-block;
        height: 1em;
        line-height: 1;
        text-align: left;
        vertical-align: -.25em;
        overflow: hidden;
    }
    dot::before {
        display: block;
        content: '...\A..\A.'; 
        white-space: pre-wrap;
        animation: dot 3s infinite step-start both;
    }
    @keyframes dot {
        33% { transform: translateY(-2em); }
        66% { transform: translateY(-1em); }
    }
</style>

Увеличить область клика

Первый в основном использует отступы встроенных элементов, которые влияют только на внешний вид и не влияют на макет; второй — это способ изменить положение фонового изображения для других свойств.
```

<a href="">demo</a>


<style>
    a {
        padding: 20px 0; 
    }
</style>

<style>
    a {
        border: 11px solid transparent;
    }
</style>
```

Эффекты «три полосы» и «точки» без псевдоэлементов

<!-- html -->
<i class="icon"></i>

<!-- CSS三道杠 -->
<style>
    .icon {
        display: inline-block;
        width: 140px; height: 10px;
        padding: 35px 0;
        border-top: 10px solid;
        border-bottom: 10px solid;
        background-color: currentColor;
        background-clip: content-box;
    }
</style>
<!-- CSS三道杠2 -->
<style>
    .icon {
        width: 120px;
        height: 20px;
        border-top: 60px double;
        border-bottom: 20px solid;
    }
</style>
<!-- CSS圆点 -->
<style>
    .icon {
        display: inline-block;
        width: 100px; height: 100px;
        padding: 10px;
        border: 10px solid;
        border-radius: 50%;
        background-color: currentColor;
        background-clip: content-box;
    }
</style>

Панель навигации удаляет лишний размер справа

Используя отступ для изменения размера, следует отметить, что горизонтальный размер элемента, который изменяет размер, не может быть определен.
```

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>


<style>
    div {
        width: 380px;
    }
    ul {
        margin-right: -20px;
    }
    ul > li {
        float: left;
        width: 100px;
        margin-right: 20px;
    } 
</style>
```

Правильный способ прокрутки нижнего бланка

Если используется отступ, он не будет отображаться в Firefox и IE.

<!-- html -->
<div class="box">
	<img src="demo.gif">
</div>

<!-- CSS -->
    <style>
    .box {
        height:200px;
        overflow:auto;
    }
    .box>img {
        margin: 50px 0;
    }
</style>

Многоколоночный контур с высокой совместимостью

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

<!-- html -->
<div class="container">
    <div id="colLeft" class="column-left">
        <h4>正方观点</h4>
        <p>观点1</p>
        <p>观点1</p>
    </div>
    <div id="colRight" class="column-right">
        <h4>反方观点</h4>
        <p>观点1</p>
    </div>
</div>

<!-- CSS -->
<style>
    .container {
        overflow: hidden;
    }
    .column-left,
    .column-right {
        margin-bottom: -9999px;
        padding-bottom: 9999px;
        width: 50%;
        float: left;
    }
    .column-left {
        background-color: #34538b;
    }
    .column-right {
        background-color: #cd0000;
    }
</style>

Правильные элементы блочного уровня выровнены по правому краю

Значение auto занимает оставшееся место для поля.
```

<div>demo</div>


<style>
    div {
        width: 100px;
        margin-left: auto;
    }
</style>
```

Поле загрузки изображения

Этот трюк в основном показывает, что цвет границы наследуется от цвета по умолчанию.

<!-- html -->
<div class="add"></div>

<!-- CSS -->
<style>
    .add {
        display: inline-block;
        width: 76px; height: 76px;
        color: #ccc;
        border: 2px dashed;
        text-indent: -12em;
        transition: color .25s;
        position: relative;
        overflow: hidden;
    }
    .add:hover {
        color: #34538b;
    }
    .add::before, .add::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
    }
    .add::before {
        width: 20px;
        border-top: 4px solid;
        margin: -2px 0 0 -10px;
    }
    .add::after {
        height: 20px;
        border-left: 4px solid;
        margin: -10px 0 0 -2px;
    }
</style>

Не влияет на поля настройки положения фонового изображения.

Аналогично второму способу увеличения области клика

<!-- html -->
<div class="box"></div>

<!-- CSS -->
<style>
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        border-right: 50px solid transparent;
        background-position: 100% 50%;
    }
</style>

Граница образует трапеции и различные треугольники

<!-- html -->
<div></div>

<!-- CSS梯形 -->
<style>
    div {
        width: 10px; height: 10px;
        border: 10px solid;
        border-color: #f30 transparent transparent;
    }
</style>
<!-- CSS三角 -->
<style>
    div {
        width: 0;
        border-width: 10px 20px;
        border-style: solid;
        border-color: #f30 transparent transparent;
    } 
</style>
<!-- CSS直角三角 -->
<style>
    div {
        width: 0;
        border-width: 10px 20px;
        border-style: solid;
        border-color: #f30 #f30 transparent transparent;
    } 
</style>

Высота совместима с двойными столбцами, одна сторона имеет одинаковую ширину, а другая — адаптивный макет с одинаковой высотой.

Недостаток в том, что граница не поддерживает проценты, вплоть до 2-3 столбцов.

<!-- html -->
<div class="box">
    <nav>
        <div>123</div>
        <div>123</div>
        <div>123</div>
    </nav>
    <section>
        <div>1234</div>
    </section>
</div>

<!-- CSS -->
<style>
    .box {
        border-left: 150px solid #333;
        background-color: #f0f3f9;
    }
    .box::after {
        content: "";
        display: block;
        clear: both;
    }
    .box > nav {
        width: 150px;
        margin-left: -150px;
        float: left;
    }
    .box > section {
        overflow: hidden;
    }
</style>

Строчные элементы "приблизительно" центрированы по вертикали.

Насчет того, почему сказано "примерно", в одном предложении не понятно, смотрите начало
```

<style>
    span {
        line-height: 24px;
    }
</style>
```

«Приблизительно» вертикальное центрирование многострочного контента

<!-- html -->
<div class="box">
    <div class="content">基于行高实现的...</div>
</div> 

<!-- CSS -->
<style>
    .box {
        width: 120px;
        line-height: 120px;
        background-color: #f0f3f9;
    }
    .content {
        display: inline-block;
        line-height: 20px;
        margin: 0 20px;
        vertical-align: middle;
    } 
</style>

Вертикальный разрыв изображения в контейнере

Проблема связана с «призрачным пустым узлом» и высотой x, вы можете попробовать добавить символ x перед img для наблюдения.

<!-- html -->
<div class="box">
	<img src="demo.gif">
</div>

<!-- CSS -->
<style>
    .box {
        width: 280px;
        outline: 1px solid #aaa;
        text-align: center;
        /* 解决方案1 */
        font-size: 0;
        /* 解决方案2 */
        line-leight: 0;
    }
    .box > img {
        height: 96px;
        /* 解决方案3 */
        display: block;
    } 
</style>

Выравнивание текста значка

Особенность в том, что изменение размера текста не влияет на выравнивание. ex представляет высоту x-height, которая варьируется в зависимости от различных x-глифов (например, семейства шрифтов).

<!-- 方式一 -->
<!-- html -->
<div class="box">
    <p>
    	<i class="icon icon-demo"></i>拉拉
    </p>
</div>

<!-- CSS -->
<style>
    .box {
        /* 根据图片大小变化 */
        line-height: 20px;
    }
    p {
        font-size: 40px;
    }
    .icon {
        display: inline-block;
        width: 20px;
        height: 20px; 
        white-space: nowrap;
        letter-spacing: -1em;
        text-indent: -999em;
    }
    .icon::before {
        /* 低版本IE7兼容 */
        content: '\3000';
    }
    .icon-demo {
        background: url(demo.png) no-repeat center;
    }
</style>

<!-- 方式二 -->
<!-- html -->
<p>文字 <img src="delete.png"></p>

<!-- CSS -->
<style>
    p {
        font-size: 14px;
    }
    p > img {
        width: 16px; height: 16px;
        vertical-align: .6ex;
        position: relative;
        top: 8px;
    }
</style>

Всегда центрированные пули

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

<!-- html -->
<div class="container">
    <div class="dialog">demo</dialog>
</div>

<!-- CSS -->
<style>
    .container {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: rgba(0,0,0,.5);
        text-align: center;
        font-size: 0;
        white-space: nowrap;
        overflow: auto;
    }
    .container::after {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .dialog {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        font-size: 14px;
        white-space: normal;
        /* 弹框样式 */
        padding: 10px 14px;
        border: 1px solid #000;
        border-radius: 4px;
        background: #fff;
    }
</style>

изображение обтекания текстом

Реальное использование поплавка.

<!-- html -->
<div class="box">
    <div>
    	<img src="demo.gif">
    </div>
    <p>demo，demo，demo，demo，demo，demo，demo</p>
</div>

<!-- CSS -->
<style>
    .box {
        width: 100px;
    }
    img {
        float: left;
        width: 40px;
        height: 40px;
    }
</style>

Настройте полосы прокрутки с помощью overflow:hidden

На самом деле, overflow:hidden можно прокручивать и можно прокручивать с помощью точки привязки, фокуса, scrollTop. Реализация полосы прокрутки должна быть выполнена самостоятельно.

Эффект табуляции, достигнутый меткой

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

<!-- html -->
<div class="box">
    <div class="list"><input id="one">1</div>
    <div class="list"><input id="two">2</div>
    <div class="list"><input id="three">3</div>
    <div class="list"><input id="four">4</div>
</div>
<div class="link">
    <label class="click" for="one">1</label>
    <label class="click" for="two">2</label>
    <label class="click" for="three">3</label>
    <label class="click" for="four">4</label>
</div> 

<!-- CSS -->
<style>
    .box {
        height: 10em;
        border: 1px solid #ddd;
        overflow: hidden;
    }
    .list {
        height: 100%;
        background: #ddd;
        position: relative;
    }
    .list > input {
        position: absolute; top:0;
        height: 100%; width: 0;
        border:0; padding: 0; margin: 0;
    } 
</style>

«Содержащий блок» Абсолютно позиционированный элемент «Одна опора» Задача

<!-- html -->
<div class="father">
    <div class="son">拉拉</div>
</div>

<!-- CSS -->
<style>
    .father {
        position: relative;
        width: 20px;
        height: 20px;
    }
    .son {
        position: absolute;
        /* 解决方案 */
        white-space: nowrap;
    }
</style>

Приложение для проверки формы "без опоры на абсолютное позиционирование"

Если вы используете только «position:absolute» для элемента (атрибут position родительского элемента используется по умолчанию), фактически элемент останется на месте, и в конечном итоге будет сгенерирован BFC.
```

<div class="group">
    <label class="label"><span class="star">*</span>邮箱</label>
    <div class="cell">
        <input type="email" class="input">
        <span class="remark">邮箱格式不准确（示意）</span>
    </div>
</div>
<div class="group">
    ...
</div>


    <style>
    .group {
        width: 300px;
    }
    .label {
        float: left;
    }
    .remark {
        position: absolute;
    }
</style>
```
боковая панель главной страницы

Используйте комбинацию text-align и fixed; цель установки высоты на 0 и скрытия переполнения состоит в том, чтобы не влиять на восприятие основного тела, а причина, по которой элемент абсолютного позиционирования не скрыт, заключается в том, что «если переполнение не элемент позиционирования, элемент абсолютного позиционирования и контейнер переполнения находятся одновременно. Если между ними нет позиционированных элементов, переполнение не может отсекать абсолютно позиционированные элементы." - "Мир CSS".
```

<div class="alignright">
    <span class="follow"></span>
</div>


<style>
    .alignright {
        height: 0;
        text-align: right;
        overflow: hidden;
        background: blue;
    }
    .alignright:before {
        content: "\2002";
    }
    .follow {
        position: fixed;
        bottom: 100px;
        z-index: 1;
        width: 10px;
        height: 10px;
        border: 1px solid #000;
    } 
</style>
```
Без установки ширины и высоты формы занимать всю?

При одновременном использовании верха и низа или левого и правого задаются характеристики характеристик жидкости; по сравнению с «верхним: 0; левым: 0; шириной: 100%; высотой: 100%;» при установке margin, border, При заполнении он не будет переполняться за пределами формы (даже если вы думаете об изменении размера окна, а как насчет поля?); и причина использования span заключается в том, чтобы объяснить, что абсолютное позиционирование заставит отображение элемента блокироваться.
```

<span></span>


<style>
    span {
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom: 0;
    }
</style>
```

margin:auto center по горизонтали и вертикали

<!-- html -->
<div></div>

<!-- CSS -->
<style>
    div {
        width: 300px; height: 200px;
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
        margin: auto;
    }
</style>

тень бумажного завитка

В основном используйте «позиция: относительная; z-индекс: 0;» для создания контекста стека и отрицательное значение z-индекса для размещения тени между «контейнером» и «страницей».

Вы можете попробовать удалить ключ CSS, чтобы увидеть эффект.

<!-- html -->
<div class="container">
    <div class="page">
        <h4>demo</h4>
        <p>demo</p>
    </div>
</div>

<!-- CSS -->
<style>
    .container {
        background-color: #666;
        height: 1000px;
        /* 创建层叠上下文，关键 */
        position: relative;
        z-index: 0;
    }
    .page {
        width: 600px;
        background-color: #f4f39e;
        background: linear-gradient(to bottom, #f4f39e, #f5da41 60%, #fe6);
        box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
        text-shadow: 0 1px 0 #f6ef97;
        position: relative;
        left: 200px;
        top: 200px;
    }
    .page:before {
        transform: skew(-15deg) rotate(-5deg);
        transform-origin: left bottom;
        left: 0;
    }
    .page:after {
        transform: skew(15deg) rotate(5deg);
        transform-origin: right bottom;
        right: 0;
    }
    /* 边角卷边阴影 */
    .page:before, .page:after {
        width: 90%; height: 20%;
        content: "";
        box-shadow: 0 8px 16px rgba(0, 0, 0, .3);
        position: absolute;
        bottom: 0;
        z-index: -1;
    }
</style>

скрытый текст

Это в основном для иллюстрации того, что если размер шрифта в браузере Chrome меньше 12 пикселей (в новой версии нет ограничений), он будет автоматически обработан как 12 пикселей, за исключением одного значения, 0.
```

<style>
    p {
        font-size: 0;
    }
</style>
```
Устранение подчеркивания оформления текста и перекрытия текста

Поскольку это встроенный элемент, не нужно беспокоиться о воздействии на высоту элемента.
```

<style>
    a {
        text-decoration: none;
        border-bottom: 1px solid;
        padding-bottom: 5px;
    }
</style>
```
Автоматически преобразовывать вводимые строчные буквы в прописные
```

<style>
    input {
        text-transform: uppercase;
    }
</style>
```
Первый селектор символа в ценовом сценарии

Особенность в том, что он может сделать структуру html чистой.
```

<p class="price">¥399</p>


<style>
    .price:first-letter {
        ...
    }
</style>
```
Элемент скрыт и ресурсы не загружаются

Последующий доступ через script.innerHTML.
```

<script type="text/html">
    <img src="1.jpg">
</script> 
```

Эффект полого прямоугольника обрезки аватара

В основном используйте контур.

<!-- html -->
<div class="crop">
    <div id="cropArea" class="crop-area"></div>
    <img src="demo.gif">
</div>

<!-- CSS -->
<style>
    .crop {
        width: 200px; height: 200px;
        overflow: hidden;
        position: relative;
    }
    .crop > .crop-area {
        position: absolute; top:0; height: 0;
        width: 80px; height: 80px;
        outline: 200px solid rgba(0,0,0,.5);
        cursor: move;
    } 
</style>

пользовательский курсор

Обратите внимание, что IE поддерживает только файлы cur.
```

<style>
    .cursor-demo {
        cursor: url(demo.cur);
    }
</style>
```
Изменить горизонтальный поток на вертикальный поток

Совместимо с IE7; это приложение включает в себя множество вещей, все характеристики горизонтального потока могут быть применены к вертикальному потоку (например, горизонтальное центрирование становится вертикальным центрированием).
```

<style>
    .verticle-mode{
        writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }
</style>
```

очистить поплавок

Текст располагается по центру, когда текста меньше, и слева, когда его часто

удар человек

Пусть отступы и границы не влияют на размер блочной модели

высота: 100% экранный эффект

Расширение элемента произвольной высоты

Элегантное изображение не загружается или загружается неудачный эффект

CSS эффект замены плавающего изображения

Оптимизированный для SEO логотип заголовка «заменить элемент»

Совместимые по высоте гистограммы с автоматической равной шириной и выравниванием по нижнему краю

Хорошо совместимые эффекты загрузки

Увеличить область клика

Эффекты «три полосы» и «точки» без псевдоэлементов

Панель навигации удаляет лишний размер справа

Правильный способ прокрутки нижнего бланка

Многоколоночный контур с высокой совместимостью

Правильные элементы блочного уровня выровнены по правому краю

Поле загрузки изображения

Не влияет на поля настройки положения фонового изображения.

Граница образует трапеции и различные треугольники

Высота совместима с двойными столбцами, одна сторона имеет одинаковую ширину, а другая — адаптивный макет с одинаковой высотой.

Строчные элементы "приблизительно" центрированы по вертикали.

«Приблизительно» вертикальное центрирование многострочного контента

Вертикальный разрыв изображения в контейнере

Выравнивание текста значка

Всегда центрированные пули

изображение обтекания текстом

Настройте полосы прокрутки с помощью overflow:hidden

Эффект табуляции, достигнутый меткой

«Содержащий блок» Абсолютно позиционированный элемент «Одна опора» Задача

Приложение для проверки формы "без опоры на абсолютное позиционирование"

боковая панель главной страницы

Без установки ширины и высоты формы занимать всю?

margin:auto center по горизонтали и вертикали

тень бумажного завитка

скрытый текст

Устранение подчеркивания оформления текста и перекрытия текста

Автоматически преобразовывать вводимые строчные буквы в прописные

Первый селектор символа в ценовом сценарии

Элемент скрыт и ресурсы не загружаются

Эффект полого прямоугольника обрезки аватара

пользовательский курсор

Изменить горизонтальный поток на вертикальный поток