java基础笔记（11）
css
样式的设置主要有选择器+声明{}；声明里又分为属性和值；
注释代码：/*注释语句*/
内联式：写在元素开始的标签里；例：<p style = "color:red;font-size:12px"></p>;
嵌入式：写在<style type="text/css"></style>标签之间；一般写在<head></head>之间；例：
外部式：写在一个css文件中，通过<link>标签连接到html文件内；<link href="xxx.css" rel="stylesheet" type="text/css" />;这个链接一般写在<head>标签内；rel="stylesheet" type="text/css"这个是固定的格式；
优先级：内联>嵌入>外部(如果外部的链接早于嵌入的位置，那就会外部优先，即就近原则，且这里的顺序是在其相同的权值的情况下)
类选择器：已英文点开头，名字任意起，在元素标签中通过class="类名"进行调用；
ID选择器：和类选择器一样的原理，只不过将英文点换成#符号，调用的时候将属性class改成属性id；
类和ID选择器的区别：
1、在一个html中，id选择器只能调用一次，而类可以多次；
2、在一个元素中可以调用多个类选择器，用空格隔开，如<p class=类名1 类名2>；而一个元素内只能调用一个id选择器；
子选择器：用于选择指定标签元素的第一代子元素；如：.food>li{border:1px solid red;}；在元素标签里设置好class = “food”，在这个标签下的第一个子标签为<li>标签的内容样式会被修改定义；
后代选择器：.food li{border:1px solid red;};与子选择器不同的是大于号>改成了空格，且其范围不通，子选择器只包括第一代<li>标签，而后代选择器的包含所有的<li>标签；
通用选择器：*{xxx ；xxx；}；涉及的范围最大，任意的标签元素都会根据通用选择器的声明进行设置；
伪类选择符：可以给html还不存在的标签状态进行设置样式（如鼠标滑过标签时标签状态）；例：a:hover{color:red;}（使鼠标滑过标签时标签内容变红色）；其中：hover是可以放到任何标签中，但是由于兼容性比较不好，所以常用的还是a：hover组合；
分组选择器：通过逗号对两个标签隔开，后加生命，这样多个标签可以拥有同一个样式；例：h1,span{color:red;}；
权限：标签的权限值为1、类选择器为10、ID选择符为100；注意：继承也有权限值，只不过很小很小；
层叠覆盖：指如果权限相同，后面的样式会覆盖前面的样式；
最高权限：！important，写在分号前；例：p{color:red!important;}；
字体设置：font-family:"宋体"；所设置的必需是浏览器有安装的字体；
字号、颜色：font-size、color;
粗体：font-weight：bold；
斜体：font-style:italic;
下划线：text-decoration:underline;
删除线：text-decoration：line-through；
缩进：text-indent：2em；2em指的是文字的2倍大小；
行间距（行高）：line-height：2em
字间距:字母间距：letter-spacing:50px;单词间距：word-spacing:50px;
对齐：text-align：center/left/right；居中、向左或者向右对齐
居中：
行内居中：text-align：center
定宽块状元素：需先固定好width宽度，根据左右margin得值设为“auto”,使得其居中对齐；
不定宽块状元素：
1、加入table标签：利用table标签得长度自适应性，因此可以看做是一个定宽度块元素；再根据左右margin得值设为“auto”,使得其居中对齐；
2、通过改变块级元素得display为inline类型，然后通过text-align：center来进行居中；
3、通过给父元素设置float，然后给父元素设置 position:relative和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
垂直居中：
1、如果是单行文本，且父元素的行高：leight已经是固定的，那么只要将其的行高line-height也设置一样的高度，即可实现垂直居中，缺点是：当文字内容的长度大于块的宽时，就有内容脱离了块；
2、如果是多行文本，css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用；td 标签默认情况下就默认设置了 vertical-align 为 middle，因此可以使用<tb>标签作为多行文本的父标签，这样多行文本就会实现垂直居中，如：
<body>
<table><tbody><tr><td>
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
这样，只要在css代码中改变td盒范围就可以显示出效果了：td{position:absolute; left:50%; top:50%;}（文本内容将会处于浏览器中间）
3、可以通过display：table-cell改变元素属性为表格属性，这样该元素就拥有vertical-align为middle的属性；从而达到垂直居中的效果，缺点是兼容性较差，不兼容IE6、7；不建议使用；
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
常用的内联块状元素有：
<img>、<input>
特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
切换：display：block（块级元素）/inline（内联元素）/inline-block（内联块状元素）
隐性改变display的类型：
设置以下 2 个句之一：
1.position:absolute;
2. float : left 或 float:right;
只要出现了以上两句之一，元素类型就会自动变为display:inline-block；
盒模型：边框
div{border：2px solid red；}分别对应：border-width(边框宽度)、border-style（边框类型）、border-color（边框颜色）；
border可根据可根据border-top、border-right、border-left、border-bottom四个不同的边进行不同的设置；
div{padding:20px 20px 20px 20px}：元素内容和边框之间的距离，称为“填充”，同样地，填充也分4个方向；
div{margin:20px 20px 20px 20px}：元素和其他元素之间的距离，称为“边界”，同样地，填充也分4个方向；
一个元素实际宽度（盒子的宽度）=左边界（margin-left）+左边框（border-left）+左填充（padding-left）+内容宽度（width）+右填充+右边框+右边界。
css布局模型：
在网页中，元素有三种布局模型：
1、流动模型（Flow）：块垂直、内联水平
2、浮动模型 (Float)：让块水平：float：left
3、层模型（Layer）
层模型有三种形式：
1、绝对定位(position: absolute)：相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
2、相对定位(position: relative):相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动(表示不在块范围内的内容不会改变)
3、固定定位(position: fixed)：相对移动的坐标是视图（屏幕内的网页窗口）本身，由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。
绝对和相对定位的组合使用；绝对定位可以作为相对定位的子元素，这样绝对定位采用的参照物就不是浏览器，而是相对定位的的这个父元素；
简写：
方向：4个相同可写1；上下相等左右对称可写上下和左右共为2；左右相等可写上右下为3；如不相等按顺时针写；
颜色：相等可对半；颜色值 是根据红、绿、蓝取0~255的整数比例调节而成,用16进制表示，如：p{color:#00ffff;}
字体：font:12px/1.5em "宋体",sans-serif;（常见，注：字号和行高要加入“/”斜杠）；
长度值：px、em、百分比：都是相对单位；px像素是指显示器上的一个小点；
