CSS？？？

发表于 | 更新于 | 分类于
太年轻以至于开始学习CSS

真正的勇士敢于直面纷繁的叠层样式表

前言

该博文主要用于记录各种在调整CSS以满足各种各样需求酷炫的效果中遇到的问题，以及解决方案。

CSS选择器基础

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

1
<p class="p-class">test</p>

1
2
3
.p-class {
    color: red;
}

ID选择器

ID 选择器允许以一种独立于文档元素的方式来指定样式。意味着当需要某一特定的标签具有特定的效果时，ID选择器是最好的效果

1
<p id="mostimportant">test</p>

1
2
3
4
#mostimportant {
    color: red;
    font-weight: bold; 
}

分组选择

当需要多个选择器都具有相同的CSS属性时，则可以使用分组选择申明。

1
2
3
<p class="p-class">test</p>
<h1 class="h1-class">test</h1>
<h2>test</h2>

1
2
3
4
5
.p-class,
.h1-class,
h2	{
    color: red;
}

Footer置底

最实用的Footer置底css设置–使用calc()实现动态计算。

1
2
3
4
<div class="content">
  <!-- content -->
</div>
<div class="footer">footer</div>
1
2
3
4
5
6
.content {
  min-height: calc(100vh - （x + y)px); /*y为content与footer之间的距离*/
}
.footer {
  height: x px;
}

Modal设置最大高度以及滚动

1
2
3
4
.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

flex布局

2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。使用flex布局，既可以轻松实现各种布局方案。任何容器都可以使用display: flex启用flex布局。

水平布局

而flex-direction属性决定主轴的方向（即项目的排列方向），它能取四个值：

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

那么实现水平布局即可轻松实现：

1
2
3
4
<div class="horizon">
	<div>row 1</div>
	<div>row 2</div>
</div>

1
2
3
4
.horizion {
    display: flex;
    flex-direction: row;
}
0%