CSS 选择器，display，visibility，overflow

CSS 复合选择器

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。

<style type="text/css">
    div {
        width: 100px;
        height: 30px;
        background-color: red;
    }
    div.one {
        background-color: blue;
    }
</style>

<div class="one"></div>
<div class="two"></div>

并集选择器

并集选择器是和的意思，用逗号隔开的，所有选择器都会执行后面样式。

<style type="text/css">
    .one, span {
        display: block;
        width: 100px;
        height: 50px;
        background-color: red;
        font-size: 30px;
    }
</style>

<span class="one">文字1</span>
<span>文字2</span>

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，把外层标签写在前面，内层标签写在后面，中间用空格分隔，内层标签就成为外层标签的后代。

<style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    .father div {
        width: 50px;
        height: 50px;
        background-color: red;
    }
</style>

<div class="father">
    <div></div>
</div>

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

<style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    .father > div {
        width: 50px;
        height: 50px;
        background-color: yellow;
    }
</style>

<div class="father">
    <div></div>
</div>

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素

链接伪类选择器

• :link 未访问的链接
• :visited 已访问的链接
• :hover 鼠标移动到链接上
• :active 选定的链接

注意：写的时候，他们的顺序尽量不要颠倒 ，按照 lvha 的顺序。

<style type="text/css">
    a {
        font-size: 30px;
        color: gray;
    }
    a:hover {
        color: red;
    }
</style>

<a>这是一个a链接</a>

display 标签显示模式

HTML标签一般分块标签和行内标签两种，也称块元素和行内元素。

块元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

特点：

• 总是从新行开始

• 高度，行高、外边距以及内边距都可以控制

• 宽度默认是容器的100%

• 可以容纳内联元素和其他块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

行内元素

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

特点：

• 和相邻行内元素在一行上。

• 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

• 默认宽度就是它本身内容的宽度。

• 行内元素只能容纳文本或则其他行内元素。（a特殊 a里面可以放块级元素 ）

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

注意：

• 文字类块级元素只能放文字和不能放块级元素，如：p,h1,h2,h3,h4,h5,h6,dt。

• 链接里面不能再放链接。

• a里面可以放块级元素

行内块元素 inline-block

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

特点：

• 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
• 默认宽度就是它本身内容的宽度。
• 高度，行高、外边距以及内边距都可以控制。

解决inline-block边距问题

在父标签设置font-size: 0;

标签显示模式转换 display

• display:inline：行内元素
• display:block：块级元素
• display:inline-block：行内块元素
• display: none：隐藏元素，不再占用空间

visibility 可见性

• visibility: visible：显示元素

• visibility: hidden;：隐藏元素，但是保留位置空间

overflow 溢出

overflow 属性用于控制内容溢出元素框时显示的方式。

• overflow:visible：不剪切内容也不添加滚动条。
• overflow:auto：超出自动显示滚动条，不超出不显示滚动条
• overflow:hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉
• overflow:scroll：不管超出内容否，总是显示滚动条

vertical-align 垂直对齐

vertical-align 的默认值 baseline

语法：vertical-align : baseline |top |middle |bottom

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐

文字居中问题

1. 块级元素内文字水平居中

text-align: center; 用于块级元素，

2. 块级元素自身水平居中

margin: 0 auto; 或margin-left:auto;margin-right:auto;

3. 块级元素内文字图片垂直居中

设置height的高度与line-height的高度相同

<div style="line-height:500px;height:500;"></div>

4. 绝对定位垂直或水平居中

1. 首先left:50%父盒子的一半大小
2. 然后margin-left设置为全部宽度的一半。