CSS进阶+设计

一、CSS伪类与伪元素

伪类和伪元素是用来修饰不在文档树中的部分

1、CSS伪类

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

（1）操作状态伪类

        ①用于链接<a><a>标签</a>的伪类

:link	链接未被点击及未被鼠标悬停时
:hover	鼠标悬停在元素上时
:active	链接被点击时
:visited	链接被点击后

        ②用于输入框input获取焦点的伪类

:focus

当输入框input获取焦点时的样式

（2）选择器状态伪类

        ①与type有关

element:first-of-type	选择父元素下的第一个类型为element的元素
element:last-of-type	选择父元素下的最后一个类型为element的元素
element:nth-of-type(n)	选择父元素下的第n个类型为element的元素
element:nth-last-of-type(n)	选择父元素下的倒数第n个类型为element的元素
element:only-of-type	选择父元素下的唯一的类型为element的元素

        ②与child有关

element:first-child	选择父元素下的第一个类型为element的元素，若该元素不是element类型，则选择失败
element:last-child	选择父元素下的最后一个类型为element的元素，若该元素不是element类型，则选择失败
element:nth-child(n)	选择父元素下的第n个类型为element的元素，若该元素不是element类型，则选择失败
element:nth-last-child(n)	选择父元素下的倒数第n个类型为element的元素，若该元素不是element类型，则选择失败
element:only-child	选择父元素下的唯一的类型为element的元素，若该元素不是element类型，则选择失败

 2、CSS伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。

（1）添加内容类伪元素

        ①::before

<span class="hello">我是 Regena</span>

.hello::before{
    content: '????';
    color: blue;
    font-size: larger;
    background-color: pink;
}

        ②::after

<span class="hello">我是 Regena</span>

.hello::after{
    content: '????';
    color: blue;
    font-size: larger;
    background-color: pink;
}

（2）修改样式类伪元素

        ①::first-letter

        ②::first-line

二、关系选择器

关系选择器是能够根据其他元素的关系选择适合的元素选择器。

1、子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

2、后代选择器

作用：通过指定的祖先元素找到指定的子元素

语法：父元素 子元素{} （父元素和子元素中间空格）

3、下一个兄弟选择器

作用：选择与当前元素紧挨着的第一个同级元素

语法：兄+弟{}

4、下面所有兄弟选择器

作用：选择当前元素下的所有同级元素

语法：兄~弟{}

三、CSS布局

四、盒模型

页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。

盒子模型组成 ：content   下面都是CSS样式的属性

• height高度 
• width宽度
• border边框
• padding内边距
• margin外边距

一个盒子的实际宽度、高度：content+padding+border+margin

Overflow属性：当内容溢出盒子框时，通过overflow属性进行如下设置

Hidden	超出部分不可见
Scroll	显示滚动条
Auto	如果有超出部分，显示滚动条

Border：边框属性

属性	描述	取值
border-width	边框宽度	px、thin、medium、thick
border-style	边框样式	dashed、dotted、solid、double
border-color	边框颜色	颜色值
border	宽度、样式、颜色	width style color
div{ border-width:2px; border-style:solid; border-color:red; }	div{ border:2px solid; }	div{ border-bottom:1px solid red; }

Padding：内边距属性，取值：px， %（外层盒子的宽度和高度）

Margin：外边距属性

内边距	外边距	组成
padding:5px;	margin:5px;	上右下左
padding-top:10%;	margin-top	上
padding-left	margin-left	左
padding-right	margin-right	右
padding-bottom	margin-bottom	下

对浏览器默认的设置清零：

*{margin:0;

   padding:0;

  }

Margin用法

margin:1px;

margin:1px 2px;

margin:1px 2px 3px;

margin:1px 2px 1px 3px;

注意：虽然上下边距都为1px，但是这里不能缩写。

Margin的合并：垂直方向合并，水平方向不合并

水平居中

图片、文字水平居中   text-align：center；

div水平居中                margin：0 auto；         浏览器自动计算

五、调试CSS

打开网页后鼠标右键点击“检查”，检查网页元素。

选中所要查看的dom节点，即可查看有该节点的所有信息。