# css练习

 

项目参考至MDN

点此查看效果哦

代码

## 任务介绍

 

- 为整体卡片的容器提供一个固定的宽/高，背景颜色，边框，以及边框圆角等等。

- 为header提供一个渐变的背景颜色，从更暗到更亮，加上圆角，配合在卡片容器上设置的圆角。

- 为footer提供一个渐变的背景颜色，从更亮到更暗，加上圆角，配合在卡片容器上设置的圆角。

- 将图像向右浮动，使其粘贴在名片主要内容的右边，然后把它的 max-height 设置为 100%

- 编写一个面向卡头规则集,使它们计算的总高度为 50px

- 浏览器会为 h2 和 p元素应用默认的 margin，这会影响我们的设计，所以编写一个规则集： margin 设置为 0。

- 设置 article 的高度为 120px，但是使用 em来表示。还要给它一个半透明黑色的背景颜色，产生一个稍暗一点的阴影，能让红色的背景稍微透过。

- 编写一个规则集，使 h2 有效的字体大小为20px (使用 em表达) 以及一个适当的行高将其放置在标题的内容框的中央。内容框高度应该是30px

- 为页脚中的 p 编写一个规则集，使它的有效字体大小为 15px (使用 em表达) 以及一个适当的行高将其放置在页面的内容框的中央。内容框高度应该是30px

- 为 article 中的段落设置一个合适的 padding 值，让它和 h2 以及页脚的段落左边缘对齐

 

## 知识点

- 选择器：笔记

- 类型选择器（又名元素选择器）

- 类选择器

- ID 选择器

- 通用选择器（*）

- 属性选择器

- [子串值（Substring value）属性选择器

- 伪类

- 组合器和选择器组

- 选择器的优先级:

- 不同级别：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

- 同级：同一级别中后写的会覆盖先写的样式

- CSS数值和单位

- 长度和尺寸

- px 像素是一种绝对单位

- em 1em与当前元素的字体大小相同

- rem 但它总是等于默认基础字体大小的尺寸

- vw, vh: 分别是视口宽度的1/100和视口高度的1/100

- 百分比

- 颜色

- 十六进制值 例如：#ff0000

- RGB 例如：rgb(255,0,0)

- HSL

- 色调：颜色的底色调。这个值在0到360之间，表示色轮的角度。

- 饱和度：饱和度是多少？这需要一个从0-100%的值，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度。

- 亮度：颜色有多亮或明亮？这需要一个从0-100%的值，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白）。

- Opacity 不透明度

- 函数

- 盒模型

- 标准盒模型(content-box)

- 原理<br>

内容宽高+内边距+边框+外边距

- 内容宽高<br>

width宽,height高

- 内边距<br>

元素的内边距在边框和内容区之间,它的属性是padding

- 单内边距属性:<br>

padding-top <br> padding-right <br> padding-bottom <br> padding-left

- 边框<br>

元素的边框就是围绕在内容和内边距的一条或多条线,它的属性是border

- 外边距<br>

围绕在元素边框的空白区域,设置外边距会在元素与元素之间产生一个间距,它的属性是margin

- 怪异盒模型(border-box)

- 原理<br>

内容宽度+外边距(内容宽高包含了内边距和边框)

- 垂直外边距合并<br>

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

- 同级元素发生合并<br>

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

- 父子级之间发生外边距合并<br>

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

- 外边距合并解决办法

- 同级元素给第二个元素浮动,添加绝对定位,单独设置某一个元素inline-block

- 父子级元素外边距合并解决办法

1. 给父级设置内边距代替自己外边距

2. 给父级加边框

3. 给父级overflow:hidden;

4. 设置绝对定位

5. 设置display:inline-block;