Java向上转型注意事项

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

1.CSS和HTML结合的方式

CSS和HTML的结合方式有3种：

行内样式：在某个特定的标签里采用style属性。范围只针对此标签。
内嵌样式表：在页面的head里采用<style>标签。范围针对此页面。
引入外部样式表css文件的方式。这种方式又分为两种：
- 1、采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
- 2、采用import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

2.CSS选择器

基本选择器：

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）

1）标签选择器：

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

p{

  font-size:16px;

  color:#333;

}

上面代码的意思就是所有的P标签字体大小为16px，颜色为#333。

需要注意的是：

（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input。

（2）标签选择器选择的是所有同类型的标签，而不是一个。

2）ID选择器

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。

<style type="text/css">

    #test{

        background-color:red;

        border:1px solid blue;

    }

</style>

<body>

    <p id="test">这是一个测试</p>

</body>

为id为test的标签加上红色的背景颜色，以及1px宽度红色实线边框。id选择器的选择符为“#”。特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为test的h1，一个id为test的div，是非法的！

id的命名规则：

只能有字母、数字、下划线。
必须以字母开头。
不能和标签同名。比如id不能叫做body、img、a。

3）类选择器

规定用圆点“.”来定义、针对你想要的所有标签使用,和id非常相似，任何的标签都可以携带id属性和class属性。

class属性的特点：

特性1：类选择器可以被多种标签使用。
特性2：同一个标签可以使用多个类选择器。用空格隔开

一个标签可以被多个css选择器选择：

<style type="text/css">

    #test{

        background-color:#eee;

        border:1px solid blue;

    }

    .test1{

        color:red;

    }

    .test2{

        font-weight:700;

    }

    p{

        font-size:22px;

    }

</style>

<body>

    <p id="test" class="test1 test2">这是一个测试</p>

</body>

p标签的此时的样式应该是：

3.高级选择器

后代选择器：用空格隔开
交集选择器：用.隔开
并集选择器（分组选择器）：用逗号隔开
伪类选择器

1）后代选择器

对于P C这种格式，表示所有属于P元素后代的C元素，有这个样式。空格就表示后代。

<head>

    <style type="text/css">

        #test{

            background-color:#eee;

            border:1px solid blue;

        }

        p span{

            color:red;

        }

        .test1 span{

            font-weight: 700;

        }

    </style>

</head>

<body>

    <p id="test" class="test1">这是一个<span>测试</span></p>

</body>

样式如下：

2）交集选择器

<head>

    <title>测试</title>

    <style type="text/css">

        .test{

            background-color:#eee;

            border:1px solid blue;

        }

        /*交集选择器*/

        p.test1{

            color:red;

        }

        .test1 span{

            font-weight: 700;

        }

    </style>

</head>

<body>

    <p  class="test test1">这是一个<span>测试</span></p>

    <p  class="test test2">这是一个<span>测试</span></p>

</body>

选择的元素必须同时满足p标签并且class类名为test1的标签才添加此样式：

3）并集选择器

定义的时候用逗号隔开，三种基本选择器都可以放进来。

<head>

    <title>测试</title>

    <style type="text/css">

        #test1, .test2, h3{

            background-color:#eee;

            border:1px solid blue;

        }

    </style>

</head>

<body>

    <p  id="test1">这是一个p标签</p>

    <h2  class="test2">这是一个h2标签</h2>

    <h3>这是h3标签</h3>

</body>

4）伪类选择器

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

:link 超链接点击之前
:visited 链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
:before 在元素之前插入某些内容，注意：这里的“之前”并不是位置上的前，而是文档流里的前。
:after与before类似，在元素之后插入某些内容

4.CSS浮动

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

（1）浮动
（2）绝对定位
（3）固定定位

浮动的性质

浮动的元素脱离标准文档流
浮动的元素互相贴靠
浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度

浮动的清除

元素设置浮动之后，就不能够撑开父元素的高度。最常用清除浮动的方法就是利用after伪类：

.clearfix:after{

    content:"";

    display:block;

    height:;

    clear:both;

    visibility:hidden;

}

5.CSS定位

CSS的定位属性常用的有三种，分别是绝对定位、相对定位、固定定位。还有一个处于实验中的属性粘性定位

position: absolute;  <!-- 绝对定位 -->

position: relative;  <!-- 相对定位 -->

position: fixed;     <!-- 固定定位 -->

position: sticky;    <!-- 粘性定位 -->

相对定位

让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。

相对定位：不脱离标准文档流，还是会在原来的位置留下元素，别人不会把它的位置挤走。

一般使用相对定位只有两个作用：

微调元素
做绝对定位的参考，子绝父相

格式：

position: relative;

left: 50px;

top: 50px;

绝对定位

绝对定位：定义横纵坐标。横坐标用left或right表示，纵坐标用top或者bottom表示。

绝对定位的盒子脱离了标准文档流。

所以，所有的标准文档流的性质，绝对定位之后都不遵守了。

绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。

参考点：一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。

利用relative和absolute配合实现垂直居中水平居中

<head>

    <title>测试</title>

    <style type="text/css">

        .test1{

            border:1px solid blue;

            position: relative;

            height: 300px;

            width: 500px;

            margin: 0 auto;

        }

        .test2{

            background-color:red;

            position: absolute;

            height: 50px;

            width: 50px;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            margin: auto;

        }

    </style>

</head>

<body>

    <div class="test1">

        <div class="test2"></div>

    </div>

</body>

效果如下：

固定定位

固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。

用途：

网页右下角的“返回到顶部”
顶部导航条

格式：

position: fixed;

bottom: 100px;

right: 30px;

粘性定位

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

不过兼容性现在还不是很乐观，推荐 fixed-sticky 。

6.CSS盒模型

盒子模型，英文即box model。无论是div、span、还是a都是盒子。

盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

这就是一个常见的盒模型：

标准盒模型和IE盒模型

CSS盒模型和IE盒模型的区别：

在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。