Нерегулярно обновляемые приемы CSS (1)

внешний интерфейс CSS
Нерегулярно обновляемые приемы CSS (1)

1. CSS написать квадрат адаптивного размера

Код:

<style type="text/css">
以图片为例
background 写法
	.img{
		width: 100%;
		height: 0;
		padding-bottom: 100%;		//关键所在
		overflow: hidden;
		background:url(../res/images/haha.png) center/100% 100% no-repeat;
	}
	.img img{
		width: 100%;
	}
img 写法
	.img{
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 100%;		//关键所在
		overflow: hidden;
	}
	.img img{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
</style>
<div class="img"></div>

Изображение эффекта:

принцип:

элементальpaddingПроцентное значение четырех значений рассчитывается на основе ширины текущего элемента.

paddingтолько взятьtopилиbottom, значение адаптивного квадрата должно быть таким же, как и ширина.Конечно, другие прямоугольники других пропорций можно получить, задав отступы разных пропорций

2. Несколько столбцов и одинаковая высота

Код:

<style type="text/css">
	.web_width{
		width: 100%;
		overflow: hidden;			//关键所在
	}
	.left{
		float: left;
		width: 20%;
		min-height: 10em;
		background: #66afe9;
		padding-bottom: 2000px;		//关键所在
		margin-bottom: -2000px;		//关键所在
	}
	.right{
		float: right;
		width: 80%;
		height: 20em;
		background: #f00;
	}
</style>

Изображение эффекта:

принцип:

метод компенсации заполнения

Добавьте положительное значение к элементу с небольшой высотойpadding-bottomи отрицательное значениеmargin-bottomЗатем добавьте к родителюoverflow: hiddenСкрыть дочерние элементы за пределамиpadding-bottom

Примечание:

  1. padding-bottom、margin-bottomСумма должна быть равна 0 (рекомендуемое значение не должно быть слишком большим, достаточно)
  2. кодовая единица нейтронного подэлементаemЭто сделано для того, чтобы сделать эффект gif более очевидным.

(Получил это в своих заметках, использовал это для решения многих проблем с макетом)

3. Нарисуйте треугольник

код

<style type="text/css">
.demo {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 50px solid red;
}
</style>

Изображение эффекта:

принцип:

с помощью блочной моделиborderАтрибуты

Примечание:

  1. когда коробочная модельwidth/heightКогда он равен 0,borderФорма сторон – треугольник, задав только три стороныborder, а нарисованный треугольник примыкает к двум сторонамborderЦвет установлен наtransparent, и, наконец, регулируяborder-widthнарисуй нужные тебе треугольники

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

В-четвертых, скрыть полосу прокрутки (это относительно скучно, в основном потому, что в то время была необходимость ее скрыть)

код

<style type="text/css">
	* {
		margin: 0;
		padding: 0
	}
	
	section {
		width: 300px;
		height: 500px;
		margin: 20px auto;
		overflow: hidden;
	}
	
	div {
		width: calc(100% + 20px);
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
	
	p {
		width: 100%;
		height: 200px;
		background: #999;
		overflow: hidden
	}
	p:nth-child(2n){
		background: #f60;
	}
</style>
<section>
	<div>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
	</div>
</section>

Изображение эффекта:

принцип:

Родительский элемент частично скрыт и будет прокручивать элементwidthза пределами родительского элементаwidth, чтобы скрыть полосу прокрутки

5. Тот же цвет бордюрного шрифта (2018.06.06)

код

<style>
	#app {
		width: 200px;
		height: 200px;
		color: #000;
		font-size: 30px;
		
		/*方案一*/
		border: 50px solid currentColor;
		
		/*方案二*/
		border: 50px solid;
			/*或*/
		border-width: 50px;
		border-style: solid;
	}
</style>

Изображение эффекта:

принцип:

  1. Вариант 1: CSS3currentColorУказывает текущий цвет текста
  2. Вариант 2:borderЗначение по умолчанию (начальное) равноcurrentColor, что можно записать непосредственно какborder: 50px solid; пропуститьcolorзначение

currentColor-CSS3 супер-уровень средней школы, простая в использовании переменная CSS

6. Отображение иерархической структуры узлов (2018.06.11)

Можно сказать, что это действительно странный навык, нечего сказать, служит

Код:

/*手动添加*/
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }

/*JS添加 在控制台运行*/
const m_style = document.createElement('style');
const m_style_text = '*{background-color:rgba(255,0,0,.2)}* *{background-color:rgba(0,255,0,.2)}* * *{background-color:rgba(0,0,255,.2)}* * * *{background-color:rgba(255,0,255,.2)}* * * * *{background-color:rgba(0,255,255,.2)}* * * * * *{background-color:rgba(255,255,0,.2)}';
m_style.appendChild(document.createTextNode(m_style_text));
document.getElementsByTagName('head')[0].appendChild(m_style)

Эффект

Обоснование: селекторы подстановочных знаков CSS (*) селектор с селектором потомков

Что я видел на Скучной Шуйжиху - оригинальный адрес

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

Если у вас есть другие полезные советы, поделитесь ими в комментариях.

Примечание: Советы, упомянутые в области комментариев, будут добавлены после завершения теста. В конце концов, вы должны быть осторожны при размещении сообщений, и вы не можете просто использовать опыт воды небрежно. Братья и сестры, не будьте в торопиться.

Первые два исходных адреса

Категории