CSS

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色、边框样式等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。

选择器（重点）

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

将上面的图形按照类别进行分组，这时就要用到选择器:

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

案例：

    <style>
        p{
            color:red;
        }
    </style>
    <h2>静夜思</h2>
    <p>离离原上草，</p>
    <p>一岁一枯荣。</p>
    <p>野火烧不尽，</p>
    <p>春风吹又生。</p>

类选择器（重点）

tips：在HTML页面中的几乎所有的元素都是有class属性。class属性就是来绑定CSS。

类样式就是创建一个样式类别。凡是在class中绑定了制定的样式名的元素都是这个样式类别的元素。

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

 标签调用的时候用 class=“类名”  即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

案例：

    <style>
        .blue{
            color: blue;
        }
    </style>
    <p class="blue">//创建一个ArrayList对象</p>
    <p>ArrayList al = new ArrayList();</p>
    <p class="blue">//给al集合中添加元素</p>
    <p>al.add(new Student("大锤"));</p>
    <p>al.add(new Student("狗蛋"));</p>
    <p>al.add(new Student("山炮"));</p>
    <ul>
        <li class="blue">Arraylist底层是使用数组实现的</li>
        <li class="blue">创建一个Arraylist对象的时候</li>
        <li class="blue">在内存中创建了一个ArrayList对象</li>
        <li class="blue">并没有创建数组，第一次添加元素的时候才创建数组</li>
    </ul>

tips：

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。
3.不要纯数字、中文等命名，使用英文字母来表示。
4.一个标签可以属于多个类，如果一个标签有多个类，在class中可以使用“空格”隔开。

.product-list-item{
    color: red;
}

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
2. 各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

案例:

    <style>
        .item-font{
            font-size: 26px;
            font-family: "黑体";
            color: red;
        }
        .blue{
            color: blue;
        }
    </style>
    <p class="blue item-font">//创建一个ArrayList对象</p>
    <p>ArrayList al = new ArrayList();</p>
    <p class="blue item-font">//给al集合中添加元素</p>
    <p>al.add(new Student("大锤"));</p>
    <p>al.add(new Student("狗蛋"));</p>
    <p>al.add(new Student("山炮"));</p>

id选择器

tips：HTML页面中所有的元素都是有id属性，理论上id是唯一的。

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

案例： #newObject{

            color:green;
        }

<p id="newObject">ArrayList al = new ArrayList();</p>

id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，是可以多次重复使用的.

id选择器好比人的身份证号码，全国是唯一的不得重复。只能使用一次。

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

伪类选择器

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

类选择器是一个点 比如 .demo {}   
而伪类 用 2个点 就是冒号  比如  :link{}

链接伪类选择器

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

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

案例：

    <style>
        a{
            font-size: 26px;
            /*去掉超链接的下划线*/
            text-decoration: none;
        }
        /*未访问过的连接*/
        a:link{
            color: green;
        }
        /*访问过的连接样式*/
        a:visited{
            color:tomato;
        }
        /*鼠标悬浮*/
        a:hover{
            color: red;
        }
        /*激活时：鼠标按下去的时候*/
        a:active{
            color: violet;
        }
    </style>
    <ul>
        <li><a href="http://www.baidu.com">你点我试试</a></li>
        <li><a href="www.hsnb.com">一定要点我</a></li>
        <li><a href="www.jsnb.com">不要点别的</a></li>
        <li><a href="www.nbnb.com">别瞎点</a></li>
    </ul>

tips：上面的伪类不仅仅只能用在a后面，同样的可以用在其他的选择器后面，比如：

.st{color:red}
.st:hover{color:green;}

结构(位置)伪类选择器（CSS3)

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：定位到父元素，选择当前的第一个元素，必须是当前元素才生效，顺序
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式
nth-of-type(n):选中父元素下的某个元素的第n个，类型

案例：

    <style>
        li:first-child { /*  选择第一个孩子 */
        		color: pink; 
        	}
        li:last-child {   /* 最后一个孩子 */
        		color: purple;
        	}
        li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 这里的计数是从1开始的 */ 
				color: skyblue;
        	}
    </style>
    <ul>
        <li>曹操</li>
        <li>孙悟空</li>
        <li>李自成</li>
        <li>刘邦</li>
        <li>孙权</li>
    </ul>

目标伪类选择器(CSS3)

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

        :target{
            border: 2px solid #D4D4D4;
            background-color: #e5eecc;
        }

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

CSS注释

/*  需要注释的内容  */  进行注释的。

例如：

p {
  font-size: 14px;       /* 所有的字体是14像素大小*/
}

CSS字体样式属性

font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ font-family:"微软雅黑";}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

1. 现在网页中普遍使用14px+。
2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3. 各种字体之间必须使用英文状态下的逗号隔开。
4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。

方案一：你可以使用英文来替代。比如 font-family:"Microsoft Yahei"。

方案二：在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。 font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。

可以通过escape() 来测试属于什么字体。

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

案例：

    <style>
        li{
            font-size: 16px;
        }
        li:nth-child(1){
            font-family:"隶书";
        }
        li:nth-child(2){
            font-family:"LiSu";
        }
        li:nth-child(3){
            font-family:"\96B6\4E66";
        }
    </style>
    <ul>
        <li class="blue">Arraylist底层是使用数组实现的</li>
        <li class="blue">创建一个Arraylist对象的时候</li>
        <li class="blue">在内存中创建了一个ArrayList对象</li>
        <li class="blue">并没有创建数组，第一次添加元素的时候才创建数组</li>
    </ul>

font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

数字 400 等价于 normal，而 700 等价于 bold。  但是我们更喜欢用数字来表示。

案例：

    <style>
        li:nth-child(1){
            font-weight: 100;
        }
        li:nth-child(2){
            font-weight: 300;
        }
        li:nth-child(3){
            font-weight: 600;
        }
        li:nth-child(4){
            font-weight: 900;
        }
    </style>
    <ul>
        <li>接口和抽象类都不能直接创建对象</li>
        <li>抽象类中可有抽象方法也可以有非抽象方法</li>
        <li>接口中除过默认方法职位都是抽象方法</li>
        <li>抽象类中可以有属性，但是接口中只能有常量</li>
    </ul>

font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。

font:综合设置字体样式 (重点)

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

<style>
        p{
            font: 600 28px "隶书"
        }
</style>
<p>抽象了和接口有什么异同点?</p>

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

CSS外观属性

color:文本颜色（前景色）

color属性用于定义文本的颜色（不能定义其他的颜色），其取值方式有如下3种：

1.预定义的颜色值，如red，green，blue等。

2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

    <style>
        li{
            font-size: 24px;
        }
        li:nth-child(1){
            /*英文单词*/
            color: red;
        }
        li:nth-child(2){
            /*使用16进制数字设置rgb*/
            color: #0000ff;
        }
        li:nth-child(3){
            /*使用rgb函数得到颜色*/
            color: rgb(188, 188, 188);
        }
        li:nth-child(4){
            /*使用rgba函数得到颜色   最后一个参数是透明度，透明度是0~1之间*/ 
            color: rgba(235, 123, 255, .8);
        }
    </style>
    <h2>JDK 和 JRE 有什么区别？</h2>
    <ul>
        <li>JDK：Java Development Kit</li>
        <li>JRE： Java Runtime Environment</li>
        <li>JDK顾名思义是java开发工具包，是程序员使用java语言编写java程序所需的开发工具包，是提供给程序员使用的。JDK包含了JRE，同时还包含了编译java源码的编译器javac，还包含了很多java程序调试和分析的工具：jconsole，jvisualvm等工具软件，还包含了java程序编写所需的文档和demo例子程序。</li>
        <li>JRE顾名思义是java运行时环境，包含了java虚拟机，java基础类库。是使用java语言编写的程序运行所需要的软件环境，是提供给想运行java程序的用户使用的。</li>
    </ul>

line-height:行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

单行文字上下居中： line-height = height

一般情况下，行距比字号大7.8像素左右就可以了。

    <style>
        p{
            font-size: 18px;
            line-height: 25px;
            width: 300px;
        }
    </style>
    <h2>== 和 equals 的区别是什么？</h2>
    <p>
        ==是比较运算符，主要对被比较的两个操作数在栈内存中的内容。基本类型比较的就是值。引用类型比较的就是地址。
        equals是Object类的方法。默认就是使用==进行比较的，如果希望equals按照我们的期望进行比较，就必须重写equals方法。String类就是重写了equals方法，可以比较两个字符串的字符序列
    </p>

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度如果是汉字的段落1em 就是一个汉字的宽度，一般是2em

letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

案例：

    <style>
        p{
            font-size: 18px;
            /*设置行高,一般比字体大7~8个像素*/
            /* line-height: 1.4em; */
            line-height: 25px;
            /*文本的对齐方式*/
            text-align: left;
            /*字间距*/
            letter-spacing: .2em;
            /*词间距*/
            word-spacing: 1em;
        }
    </style>   
<h2>== 和 equals 的区别是什么？</h2>
    <p>
        ==是比较运算符，主要对被比较的两个操作数在栈内存中的内容。基本类型比较的就是值。引用类型比较的就是地址。
        equals是Object类的方法。默认就是使用==进行比较的，如果希望equals按照我们的期望进行比较，就必须重写equals方法。
　　　　String类就是重写了equals方法，可以比较两个字符串的字符序列
    </p>
    <hr>
    <p>
        ==Is a comparison operator, which mainly compares the contents of the two operands being compared in the stack memory. Basic types compare values. Reference types compare addresses.
Equals is the method of the object class. The default is to use = = for comparison. If we want equals to compare according to our expectations, we must override the equals method. The string class overrides the equals method to compare the character sequences of two strings
    </p>

text-decoration：文本装饰

我们可以通过text-decoration给文本添加下划线、上划线、删除线等等。

    <style>
        span{
            font: 900 36px "黑体";
            text-shadow: -3px -5px 3px red;
            /*文本装饰*/
            text-decoration: underline;
        }
    </style>
     <span>
        这里就是要显示文字的阴影！
    </span>

text-decoration的几个值：

underline 下划线

line-through 删除线

overline 上划线

none 没有任何线（去掉超链接的下划线就是这个设置。）

颜色半透明(css3)

文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：

    color: rgba(r,g,b,a)  a 是alpha  透明的意思  取值范围 0~1之间    color: rgba(0,0,0,0.3)  

文字阴影(CSS3)

以后我们可以给我们的文字添加阴影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

前两项是必须写的。后两项可以选写。

案例：

<style>
        h2{
            font-size: 36px;
            text-shadow: -3px -3px 3px red;
        }
</style>
<h2>噢！ 好模糊呀！</h2>

引入CSS样式表（书写位置）

行内式（内联样式）

是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

    <ul>
        <li>接口和抽象类都不能直接创建对象</li>
        <!-- 这里利用行样式制定样式表 -->
        <li style="color: red; font:italic 600 18px '黑体'">
　　　　　　　　抽象类中可有抽象方法也可以有非抽象方法</li>
        <li>接口中除过默认方法职位都是抽象方法</li>
        <li>抽象类中可以有属性，但是接口中只能有常量</li>
    </ul>

行样式的级别在所有样式表中是最高的，可以覆盖其他的样式属性。

内部样式表（内嵌式）

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。

外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，

通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

注意： link 是个单标签哦!!!

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内嵌样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多	控制整个站点（多）

标签显示模式（display）

块级别元素和行内元素的区别案例：

    <style>
        /*给a标签和p标签添加细线边框*/
        a,p,div{
            border:1px solid;
            height: 100px;
            width: 300px;
        }
    </style>
    <p>这是一个段落</p>
    <a href="">点我</a>
    <a href="">别点它</a>
    <p>有时一个p标签</p>
    <div>
        <header>这里是头部</header>
        <div style="height: 50px;">
            这里是主体
        </div>
        <footer>这里是footer </footer>
    </div>

p标签独占一行，并且设置的高度是生效的。

a标签不会独占一行，并且设置的高度是无效。

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。具体如下：

块级元素(block-level)

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

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

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%。

（4）可以容纳内联元素和其他块元素。

行内元素(inline-level)

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

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

行内元素的特点：

（1）和相邻行内元素在一行上。

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

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

tips:
1. 只有 文字才 能组成段落  因此 p  里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。
2. 链接里面不能再放链接。

p标签和h标签只能方文字和其他的行内元素，不能放其他的块级元素：

tips:

HTML模式是流式布局。
所有的块级元素独占一行，所有的块级元素都可以设置大小。
div,p,h系列，li
行内元素不独占一行，行内元素大部分是不能设置大小。
table,img,a,span,input....
行内元素可以设置大小的：table和img。

案例：
   <p>
        这时一个段落
        <div>P标签内部的一个DIV</div>
        段落结束
    </p>

p标签从开始标签开始到下一个块级元素的开始标签位置，就自动成为一个段落。

行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />、<table>、<td>，可以对它们设置宽高和对齐属性
行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

行内元素和块级元素之间的切换

行内元素切换为块级元素：将display修改block
块级元素转为行内元素：将display修改为inline
如果希望元素既不独占一行，也可以设置大小，将display修改为：inline-block

案例：

    <style>
        img{
            width: 150px;
        }
        input{
            width: 150px;
            height: 80px;
        }
        table{
            /* width: 300px; */
            display: inline-table;
            border: 1px solid;
        }
        td{
            border: 1px solid;
            width: 150px;
            height: 60px;
        }
    </style>    
<img src="images/btn_bg.jpg" alt="">
    <input type="text">
    <input type="radio">
    <input type="checkbox">
    <table>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td>单元格13</td>
        </tr>
        <tr>
            <td>单元格21</td>
            <td>单元格22</td>
            <td>单元格23</td>
        </tr>
    </table>

display样式属性

我们可以通过display属性将行内元素和块级别元素进行转换。

display的几个值：

none：表示这个元素不可见。

block：表示元素是块级别元素。上面说过的块级别元素默认就是block。如果将一个行内元素的display设置为block，这个元素会转换为块级元素。

inline：表示元素是行内元素。所有的行内元素默认都是inline。如果将一个块级元素的display设置为inline，这个块级元素会转换为行内元素。

inline-block：行内块级元素。不会独占一行。而且可以设置元素的大小。

tips：table不是块级元素。但是table的display默认是table ，效果也是独占一行。也可以设置大小。

案例：

    <style>
        p{
            display: none;
        }
        a{
            border:1px solid;
            /*将行内元素转换为快级别元素*/
            display: block;
            width: 300px;
            height: 100px;
        }
        div{
            border:1px solid;
            width: 200px;
            height: 100px;
            /*将div转换为行内元素*/
            display: inline;
        }
        /*如果希望一个元素是行内元素，但是可以设置大小*/
        span{
            border:1px solid;
            width: 200px;
            height: 100px;
            /*行内块元素*/
            display: inline-block;
        }
    </style>
    <span>这是一个span--1</span>
    <span>这是一个span--2</span>
    <hr>
    <div>这是一个DIV，块级元素1</div>
    <div>这是一个DIV，块级元素2</div>
    <a href="">这是一个行内元素：超链接1</a>
    <a href="">这是一个行内元素：超链接2</a>
    <p>哈哈哈</p>
    <div>嘻嘻</div>

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

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

记忆技巧：

交集选择器是并且的意思。即...又...的意思

比如：   p.one   选择的是： 类名为 .one  的 段落标签。

用的相对来说比较少，不太建议使用。

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

记忆技巧

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

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

后代选择器

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

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

body p{backgroud:red}

子元素选择器

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

白话：这里的子指的是亲儿子不包含孙子重孙子之类。

比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。

相邻选择器：只有一个,相邻（向下） .classname + p{...}

通用兄弟选择器：当前选中元素的向下的所有兄弟元素 .classname~p{...}

属性选择器

选择器	示例	含义
E[attr]		存在attr属性即可
E[attr=val]		属性值完全等于val
*E[attr=val]**		属性值里包含val字符并且在“任意”位置
E[attr^=val]		属性值里包含val字符并且在“开始”位置
E[attr$=val]		属性值里包含val字符并且在“结束”位置

/* 获取到 拥有 该属性的元素 */
li[type] {
  border: 1px solid gray;
}
/* 获取 属性等于某个值的 元素 属性值 可以使用 引号进行包裹 */
li[type="vegetable"] {
  background-color: green;
}
/* 使用空格分隔的 多个属性 其中有某个属性即可获取 */
li[type~="hot"] {
  font-size: 40px;
}
/* 获取以某个属性开头的语法  */
li[color^='green'] {
  background-color: orange;
}
/* 获取以某个值 结尾的属性 */
li[type$='t']{
  color: hotpink;
  font-weight: 900;
}
/* 获取 属性中 拥有某个值的 元素 */
li[type*=ea] {
  font-size: 100px;
}
/*  如果属性的值 只有very 也能够获取  用来获取 多个属性 并且 使用-连接 */
li[price|='very'] {
  background-color: darkred;
}
<ul>  
<li type='fruit' color='green'>卡卡西</li>
 <li type='vegetable' color='greenyellow'>王大锤</li>
<li type='meat'>鸣人</li><li type='meat hot'>佐助</li>  <li type='drink hot'>小吴，你懂得</li> 
 <li type='drink hot'>刘大胆</li> <li price='very-cheap'>小黑</li> <li price='very'>大黄</li></ul>
//ui li{list-style:none}  去掉小圆点

伪元素选择器（CSS3)

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}
/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}
p::selection {
  /* font-size: 50px; */
  color: orange;
}

4、E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

E:after、E:before后面的练习中会反复用到，目前只需要有个大致了解

":" 与 "::" 区别在于区分伪类和伪元素

CSS 背景(background)

CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色背景图片地址背景平铺背景滚动背景位置

背景图片(image)

语法：

background-image : none | url (url)

参数：

none : 　无背景图（默认的） url : 　使用绝对或相对地址指定背景图像

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

背景图片后面的地址，url不要加引号。

背景平铺（repeat）

语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数：

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

背景位置(position)

语法：background-position : length || length background-position : position || position

说明：

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意：

position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

实际工作用的最多的，就是背景图片居中对齐了。

背景附着

语法：

background-attachment : scroll | fixed

参数：

scroll : 　背景图像是随对象内容滚动

fixed : 　背景图像固定

说明：设置或检索背景图像是随对象内容滚动还是固定的。

背景简写

background属性的值的书写顺序官方并没有强制标准的

background:背景颜色背景图片地址背景平铺背景滚动背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度取值范围 0~1之间

注意：背景半透明是指盒子背景半透明，盒子里面的内容不收影响。

同样，可以给文字和边框透明都是 rgba 的格式来写。

color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);

背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');
			background-size: 300px 100px;
			/* background-size: contain; */
			/* background-size: cover; */

多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局

background-image: url('images/gyt.jpg'),url('images/robot.png');

CSS 三大特性

层叠继承优先级

CSS层叠性

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是：子承父业。

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

盒子模型（CSS重点）

其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

看透网页布局的本质

行内元素比如文字，需要一个盒子把他们装起来，我们前面学过的双标签都是一个盒子。有了盒子，我们就可以随意的，自由的，摆放位置了。

看透网页布局的本质：把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

CSS 其实没有太多逻辑可言，类似你们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。

盒子模型（Box Model）

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

盒子边框（border）

边框就是那层皮。橘子皮。。柚子皮。。橙子皮。。。

语法：

border : border-width || border-style || border-color

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

表格的细线边框

table{ border-collapse:collapse; }

border-collapse:collapse; 表示边框合并在一起。

盒子边框总结表

设置内容	样式属性	常用属性值
上边框	border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度样式颜色;
下边框	border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度样式颜色;
左边框	border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度样式颜色;
右边框	border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度样式颜色;
样式综合设置	border-style:上边 [右边下边左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置	border-width:上边 [右边下边左边];	像素值
颜色综合设置	border-color:上边 [右边下边左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border:四边宽度四边样式四边颜色;

圆角边框(CSS3)

从此以后，我们的世界不只有矩形。

语法格式：

Border-radius: 水平半径/垂直半径；

一般我们垂直半径都是省略的默认和水平半径一样。

border-radius: 左上角  右上角  右下角  左下角;

案例:

<style>
  div {
    width:200px;
    height:200px;
    border:1px solid red;
    margin:10px 40px;
    text-align: center;
    line-height: 200px;
  }
  div:first-child {
    border:10px solid red;
    border-radius: 20px/50px;
  }
  div:nth-child(2) {
    border-radius: 20px;
  }
  div:nth-child(3) {
    border-radius: 15px 0;
  }
  div:nth-child(4) {
    border-radius:100px;
  }
  div:nth-child(5) {
    border-radius: 50%;
  }
  div:nth-child(6) {
    border-radius: 100px 0;
  }
  div:nth-child(7) {
    border-radius: 200px 0 0 0;
  }
  div:nth-child(8) {
    border-radius: 100px 100px 0 0;
    height:100px;  /*高度减半*/
  }
  div:nth-child(9) {
    border-radius: 100px;
    height:100px;
  }
  div:nth-child(10) {
    border-radius: 100%;
    height:100px;
  }
</style>

内边距（padding）

padding属性用于设置内边距。是指边框与内容之间的距离。

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

注意：后面跟几个数值表示的意思是不一样的。

值的个数	表达意思
1个值	padding：上下左右边距比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距左右边距比如 padding: 3px 5px; 表示上下3像素左右 5像素
3个值	padding：上边距左右边距下边距比如 padding: 3px 5px 10px; 表示上是3像素左右是5像素下是10像素
4个值	padding:上内边距右内边距下内边距左内边距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 顺时针

案例：

		<style>
			div{
				border:1px solid;
			}
			#inner{
				width: 200px;
				height: 200px;
				background-color: #87CEEB;
			}
			#outer{
				width: 300px;
				height: 300px;
				/*设置内边距:设置里面的内容和边框之间的距离*/
				padding-top: 10px;
				padding-left: 20px;
				padding-right: 30px;
				padding-bottom: 50px;
				background-color: #CCCCCC;
			}
		</style>		
		<div id="outer">
			<div id="inner">
				哈哈哈
			</div>
		</div>

外边距（margin）

margin属性用于设置外边距。设置外边距会在元素之间创建“空白”，这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距右外边距下外边距左外边

取值顺序跟内边距相同。

		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				/* display: inline-block; */
			}
			span,div{
				border:1px solid;
				width: 200px;
				height: 200px;
				margin-left: 20px;
				margin-right: 20px;
				margin-top: 20px;
				margin-bottom: 30px;
				/*一次性设置所有的margin。 根border和padding设置是一样的*/
				/* margin: 10px 20px 30px 40px; */
			}			
			#outer{
				background-color: #CCCCCC;
				padding-top: 20px;
				padding-left: 20px;
			}
			#inner{
				background-color: #FFA500;
			}
		</style>		
　　　　　　　　　　<div id="outer">
			<div id="inner">				
			</div>
		</div>
		<hr>
		<span>第一个span</span>
		<span>第二个span</span>
		<div>
			第一个DIV
		</div>
		<div>
			第二个DIV
		</div>

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意：行内元素是只有左右内外边距的，是没有上下内外边距的。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：避免就好了。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow:hidden。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

盒子模型布局稳定性

开始学习盒子模型，分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？

按照优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）。

  width >  padding  >   margin

原因：

margin 会有外边距合并还有 ie6下面margin 加倍的bug所以最后使用。
padding 会影响盒子大小，需要进行加减计算其次使用。
width 没有问题我们经常使用宽度剩余法高度剩余法来做。

CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: border-box 盒子大小为 width

2、box-sizing: content-box 盒子大小为 width + padding + border

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

div {
  width: 100px;
  height: 100px;
  background: skyblue;
  margin: 0 auto;
  border: 1px solid gray;
  /* 
  默认的设置 如果我们添加了 border属性 该容器的大小会发生改变
  因为他要优先保证内部的内容所占区域 不变
  */
  /*  
  box-sizing  如果不设置 默认的值 就是 
  content-box: 优先保证内容的大小 对盒子进行缩放;
  border-box: 让 盒子 优先保证自己所占区域的大小,对内容进行压缩;
  */
  box-sizing: border-box;
}

盒子阴影

语法格式：

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

前两个属性是必须写的。其余的可以省略。
外阴影 (outset) 但是不能写默认想要内阴影 inset

img {
  border:10px solid orange;
  box-shadow:3px 3px 5px 4px rgba(0,0,0,1);
}

浮动(float)

普通流(normal flow)

这个单词很多人翻译为文档流，字面翻译普通流或者标准流都可以。

前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？

CSS的定位机制有3种：

普通流（标准流）、浮动和定位。

html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，

比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

浮动(float)

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。浮动起来会脱离标准流，要解决父级边框塌陷的问题。

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动详细内幕特性

浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找离它最近的父级元素对齐。但是不会超出内边距的范围。

浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；
如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

由2可以推断出，一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

元素添加浮动后，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少

浮动根据元素书写的位置来显示相应的浮动。
tips:

HTML中的元素都是平面的，只有XY和两个方向，但是一旦给元素添加float。就有z轴方向
float之后，元素会离开之前的标准流。默认在另外一个层面靠左考上对齐。
float之后的元素脱离了标准流，float的元素不会再将外部的元素撑大，要使用clera封闭外面的元素

布局流程

为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：

1、确定页面的版心（可视区）。“版心”(可视区) 是指网页中主体内容所在的区域。

一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等

2、分析页面中的行模块，以及每个行模块中的列模块。

3、制作HTML结构。

4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度且居中

最普通的，最为常用的结构

    <style>
        div{
            border: 1px solid #ccc;
            margin: 10px;
            text-align: center;
        }
        .box{
            border: 0;
            margin: auto;
            width: 980px;
        }
    </style>
    <div class="box">
        <div style="height: 100px;">top</div>
        <div style="height: 50px;">banner</div>
        <div style="height: 500px;">main</div>
        <div style="height: 100px;">footer</div>
    </div>

两列左窄右宽型

    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        div{
            border: 1px solid #ccc;
            margin: 10px;
            text-align: center;
        }
        .box{
            border: 0px;
            margin: auto;
            width: 980px;
        }
    </style>
    <div class="box">
        <div style="height: 100px;">top</div>
        <div style="height: 50px;">banner</div>
        <div style="height: 500px; border: 0px; padding: 0px;">
            <div style="width:280px; height: 500px; display: inline-block; margin: 0px; ">left</div>
            <div style="width:670px;  height: 500px; display: inline-block; margin: 0px;  ">right</div>
        </div>
        <div style="height: 100px;">footer</div>
    </div>

通栏平均分布型

    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        div{
            border: 1px solid #ccc;
            margin-top: 5px;
            text-align: center;
        }
        .box{
            border: 0px;
            margin: auto;
            width: 980px;
        }
        .top,.footer{
            height: 100px;
        }
        .banner{
            height: 50px;
        }
        .content-top,.content-bottom{
            border:0px;
        }
        [class^='content-top-']{
            height: 100px;
            width: 236px;
            display: inline-block;
            margin-right: 2px;
        }

        [class^='content-bottom-']{
            height: 300px;
            width: 236px;
            display: inline-block;
            margin-right: 2px;
        }
    </style>
    <div class="box">
        <div class="top">top</div>
        <div class="banner">banner</div>
        <div class="content-top">
            <div class="content-top-1"></div>
            <div class="content-top-2"></div>
            <div class="content-top-3"></div>
            <div class="content-top-4"></div>
        </div>
        <div class="content-bottom">
            <div class="content-bottom-1"></div>
            <div class="content-bottom-2"></div>
            <div class="content-bottom-3"></div>
            <div class="content-bottom-4"></div>
        </div>
        <div class="footer">footer</div>
    </div>

为什么要清除浮动

我们前面说过，浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

准确地说，并不是清除浮动，而是清除浮动后造成的影响

清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

清除浮动的方法

父级边框塌陷的问题：解决方案：

1.增加父级元素的高度 height：800px;（简单，元素假设有了固定的高度，就会被限制）

2.增加一个空的div标签，清除浮动,(简单，但代码中尽量避免空的div，结构化会变差)

.clear{

clear:both;margin:0;padding:0;

}

3.overflow overflow:hidden (下拉的一些场景避免使用)

4.父类添加一个伪类：after（推荐使用，没有副作用）

#father：after{

content:" ";display:block;clear:both;//和2方法相似，但不用再新建div

}

其实本质叫做闭合浮动更好一些, 清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动，其基本语法格式如下：

选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

父级添加overflow属性方法

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

定位(position)

如果，说浮动，关键在一个 “浮” 字上面，那么我们的定位，关键在于一个 “位” 上。

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了，比如 top: 100px; left: 30px; 等等

2、定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话翻译成白话：就是网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。

PS：静态定位其实没啥可说的。标准流的定位方式. 当定位方式为static时候，样式属性left和top不生效

相对定位relative(自恋型)

相对定位是相对于它在标准流中的原来的位置进行指定的偏移

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

注意：

相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。
其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。

//案例

绝对定位absolute

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。脱离标准流

注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

　　1.父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。

　　2.父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

如果绝对定位是没有设置top和left的，这时绝对定位的元素在父元素内部。一旦设置了top和left，就要看父元素的定位方式了。子绝父相

　　子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。

这句话的意思是子级是绝对定位的话，父级要用相对定位。

首先，我们说下，绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。

就是说，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说，子绝父绝，子绝父相都是正确的。

所以，我们可以得出如下结论：

因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是相对定位.

元素居中的问题

普通的盒子是左右margin 改为 auto就可，但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法。

首先left 50% 父盒子的一半大小
然后走自己外边距负的一半值就可以了 margin-left。

固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。

叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2; opacity;0.5//背景透明度

注意：

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
如果取值相同，则根据书写顺序，后来居上。
后面数字一定不能加单位。
只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，

因此比如行内元素如果添加了绝对定位或者固定定位后浮动后，可以不用转换模式，直接给高度和宽度就可以了。

元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现

display 显示

display 设置或检索对象是否及如何显示。方向不可以控制

display : none 隐藏对象与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。

特点：隐藏之后，不再保留位置。

visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点：隐藏之后，继续保留原有位置。（停职留薪）

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。

auto : 　超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

CSS高级技巧

CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。防止表单域拖拽

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

鼠标放我身上查看效果哦：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
</ul>

尽量不要用hand 因为火狐不支持 pointer ie6以上都支持的尽量用

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

resize：none 这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。

右下角不可以拖拽：

<textarea  style="resize: none;"></textarea>

边框圆角

border-radius：设置圆角.

一次性设置4个：左上角，右上角，右下角，左下角

border-radius：5px 10px 20px 30px;

vertical-align 垂直对齐

让带有宽度的块级元素居中对齐，是margin: 0 auto;

让文字居中对齐，是 text-align: center;

vertical-align 图片文字垂直对齐

        img{
            vertical-align: top;
        }

posted on 2022-01-18 18:21 潇潇消消气阅读(138) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

导航

CSS

CSS(Cascading Style Sheets)

CSS样式规则

选择器（重点）

标签选择器（元素选择器）

类选择器（重点）

id选择器

通配符选择器

伪类选择器

链接伪类选择器

结构(位置)伪类选择器（CSS3)

目标伪类选择器(CSS3)

CSS注释

CSS字体样式属性

font-size:字号大小

font-family:字体

CSS Unicode字体

font-weight:字体粗细

font-style:字体风格

font:综合设置字体样式 (重点)

CSS外观属性

color:文本颜色（前景色）

line-height:行间距

text-align:水平对齐方式

text-indent:首行缩进

letter-spacing:字间距

word-spacing:单词间距

text-decoration：文本装饰

颜色半透明(css3)

引入CSS样式表（书写位置）

行内式（内联样式）

内部样式表（内嵌式）

外部样式表（外链式）

三种样式表总结

标签显示模式（display）

块级元素(block-level)

行内元素(inline-level)

行内块元素（inline-block）

行内元素和块级元素之间的切换

display样式属性

CSS复合选择器

交集选择器

并集选择器

后代选择器

子元素选择器

属性选择器

伪元素选择器（CSS3)

CSS 背景(background)

背景图片(image)

背景平铺（repeat）

背景位置(position)

背景附着

背景简写

背景透明(CSS3)

背景缩放(CSS3)

多背景(CSS3)

CSS 三大特性

CSS层叠性

CSS继承性

CSS优先级

盒子模型（CSS重点）

看透网页布局的本质

盒子模型（Box Model）

盒子边框（border）

表格的细线边框

盒子边框总结表

圆角边框(CSS3)

内边距（padding）

外边距（margin）

外边距实现盒子居中

清除元素的默认内外边距

外边距合并

相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的合并

content宽度和高度

盒子模型布局稳定性

CSS3盒模型

盒子阴影

浮动(float)

　　1.父级没有定位

　　2.父级有定位

　　子绝父相