HTML的认识

01、HTML是超文本标记语言，不是编程语言；

02、所有的html标记（标签）都要放在尖括号<>里面

5、HTML的结构（重点）

一对html标签里面嵌套一对head标签（给浏览器解析用的）和body标签（用户看的），head标签里面还嵌套了一对titlie标签（用户可以看见的）

Html标签的关系

• 嵌套关系  --- 后代关系，嵌套关系可以多层嵌套不单是两层；

• 并列关系  --- 兄弟关系

div和span（重点）

div标签布局标签，主要是布局用的大标签，也是主要标签;

特点：没有语义，独占一行；

span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标；

特点：没有语义，一行共存多

图像（图片）标签（重点+记忆）

图像标签 --- img ，单标签

<img />,可以配合src属性将图片引入html页面，<img src=“图片路径” />

图像常见的属性

src        属性值 --- url            图像路径   

        alt        属性值 --- 自定义文本    图像不能正常显示的时候替换文本；

        title       属性值 --- 自定义文本    鼠标移入图片显示提示文本；

        width     属性值 --- 自定义数值    设置图片的宽度；

        height     属性值 --- 自定义数值    设置图片的高度；

        border    属性值 --- 自定义数值    设置图片的描边，一般不使用，后期会使用css进行设置；

超链接a（重点）

超链接：实现页面之间的跳转，a标签，双标签；

<a href=”#”></a>

常用属性（强制记忆）

href用于指定链接目标的url路径地址，必不可少的；

target 用于指定链接页面的打开方式，属性值我们一般选择新窗口打开 _blank； === target="_blank"            

超链接的链接方式（记忆）

    外部链接（在线链接）【href里面引用绝对路径】：直接在href=“http://+要访问的网址”，注意http://必须书写；

    内部链接(href里面引用相对路径)：  直接在href=“书写html页面名称”，注意在书写内部链接的时候要书写清楚页面的路径；

空链接：   如果不知道要链接到什么地方，我们就暂时用#代替即可；

其他链接：我们不仅仅能给文字添加链接，我们还可以给其他的网页元素添加链接，例如：图像、表格、音频、视频等；

路径

所谓的路径就是从文件（html文件或css文件）自身出发找目标文件；

常见的路径分为两大类：绝对路径（不推荐使用的）和相对路径（是我们一直要用的）

相对路径（重要）

相对路径又分为：同级路径、下级路径、上级路径

同级路径

文件（html文件和css文件）和目标文件在同一个目录文件下面平级存在，我们可以直接书写目标文件名称（如果是图片就直接书写图片名称）,

下级路径：

文件（html文件和css文件）和存放目标文件的父级是平级存在，我们可以先书写目标文件的父级名称+/+目标文件名称

上级级路径：

存放文件（html文件和css文件）的父级和存放目标文件的父级是平级关系，我们可以直接以 ../ 表示上一级去查找目标文件路径；

        记忆口诀：

        同级路径：文件和目标文件是同一个父级，平级关系；

    下级路径：从文件出发往里面查找；

        上级路径：从文件出发往外面查找，用 ../ 表示上一级关系；

列表

列表分为：无序列表、有序列表、自定义列表

无序列表（重点一定要记住）

结构：ul嵌套li标签，li的个数不定，按照设计稿需求进行设置；

注意：01、<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的；

      02、无序列表的所有默认样式我们都不用，后期会用css来进行设置；

有序列表（知道实际工作中不用）

ol嵌套li标签；

<ol>

        <li></li>

        <li></li>

        <li></li>

</ol>

自定义列表：

dl嵌套dt和dd标签，dt表示描述标题，dd描述的内容；

自定义列表的使用技巧：

   01  一个dl嵌套一个dt和多个dd，相当于中国的一词多义；

   02  一个dl里面可以嵌套多对的dt和dd（实际工作中很少用）；

   03  一些图文混排效果可以用dl嵌套dt和dd实现，dt放图片，

注意：所有的列表都有默认的样式，我们在实际开发的时候都要去除，所以现在不必纠结；

input控件

输入的意思，可以更改type属性的属性值来指定不同的控件类型；

还有对应的name、value、size等几个属性；

Input表单属性（死记硬背）

01、value 默认值，没有交互效果 --- value=” 请输入您的名字”/、02、placeholder占位符 html5的新属性，有交互效果 --- placeholder="请输入您的名字"

03、name   给当前的数据起一个名字，让后台工作人员调用

1、Css的作用

Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；

2、使用css的原理

能够将结构html和样式css分离书写，简化代码，提高可阅读性；

3、css的书写位置

分为3类：行内式、内嵌式（内部样式）、外部链接式

Css属性书写语法

属性：属性值；

Css样式书写格式：

选择器 { 属性1:属性值1;  属性2:属性值2;   …… }

行内式

直接在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可、。

注意：行内样式没有实现结构和样式分离，尽量不用：

例如：<div style=“color:pink; font-size:16px;”>我是行内样式</div>;

内部样式（内嵌式）：

书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；

外部链接

使用外部链接的好处：实现了结构和样式的完全分离，代码简介，可读性强；

使用外部链接的步骤

01 新建：.css格式的css文件，直接书写选择器以及css样式；

02 引用：利用link标签引入新建的css文件，要配合link的三个属性  rel关系，type文件类型 （可以省略），href文件路径；

外部链接的好处

一个css样式可以共享，如果两个页面的标签样式完全一致，就可以使用同一个css文件，然后分别连接过来即可；

三种链接方式的使用总结

行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离；

内部样式表：部分结构和样式的分离。缺点：没有彻底分离；

外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入

Css选择器的分类

Css选择器分为两类：基础选择器和高级选择器（复合选择器）

基础选择器：标签选择器（html选择器）、类选择器、ID选择器

复合选择器：后代选择器、并集选择器、指定标签选择器

CSS选择器作用

选择标签的，把想要选择的元素标签选择出来。

类选择器（重点）类选择器定义

类选择器使用有一个过程：

01 定义： 在css里面用点“  .  ”   +  类名称 +{ css键值对 } 进行样式定义;

02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；

类选择器的命名规则：

不能用纯数字、数字开头的、中文命名；

但是可以用数字结束。

类选择器特殊用法（多类名）

一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；

例如：<div class=“red  font100”>一个元素调用多个类名</div>

字体的综合写法 font复合属性

font：是否倾斜   是否加粗   文字大小/ 行高   字体；

注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的，否则不生效；

链接伪类选择器链接的伪类四种状态：

     a:link        未访问的链接（访问前）

     a:visited    已访问的链接（访问后）

     a:hover      鼠标移动到连接上（鼠标经过）

     a:active      选定的链接（按下鼠标的时候）

注意：以上的顺序不能颠倒；

实际工作中我们不需要将四个伪类状态都书写，如果4个都要写顺序不能乱；

标签显示模式（重点要理解）

实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：

    块级元素：自己独占一行； --- 代表标签 div、h标签

     行内元素：一行可以共存多个；--- 代表标签  span 、a

     行内块元素：一行可以共存多个； --- 代表标签 img 、 input

块级元素(死记硬背)

特点：独占一行，设置宽高能够生效，也可以控制外边距和内边距；

       默认的宽度是父级的100%；

       是一个容器盒子，里面可以放行内或者块元素；

注意：p标签是块级元素，但是p标签里面不能放div标签；

      同理h标签（标题标签）dt等都是文字类块级标签，里面尽量不能放其他块级元素；

常见的块级元素：div/p/h1-h6/ul/li/dl/dt/dd

行内元素(死记硬背)

特点：01、一行可以共存多个，设置宽高不生效，一般宽高是自己本身的内容撑开；

02、行内元素里面最好只放文本或者其他的行内元素；

常见的行内元素：a  span  u  s  del  strong   em  i  ins 等；

注意：超链接里面不能嵌套超链接；

      特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式；

行内块元素：

一行共存多个，默认宽高由内容撑开，但是可以控制固定的宽度和高度和外边距，内边距；

一句话总结：行内块元素可以一行共存多个，能够设置宽高并且生效；

三种显示模式相互转换

将元素转化为块级元素：display:block;

将元素转化为行内元素：display:inline;

将元素转化为行内块元素：display:inline-block;

、实体化三属性（重要滴很）

宽 width

高 height

背景 background

注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题；

背景的复合写法（死记硬背）

background:背景颜色 url（）  平铺方式  是否固定 X轴 Y轴；

11、 Css的三大特性

分为：层叠性（覆盖性）、继承性、优先级；

层叠性（覆盖性）

层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠；

继承性

有一些css属性子级是可以继承父级的，一般文字控制属性都会被继承，a标签除外，需要单独设置；

一般文字的属性：下图蓝色的可以被继承，颜色也是可以被继承，只不过超链接a不能继承父级的颜色color；，超链接a的color和线条样式text-decoration需要单独设置；

边框的综合写法

边框的宽度：border-width:3px;

边框的样式：border-style:solid;     

常用的线条样式：solid实线   dashed虚线    dotted点线

边框的颜色： border-color:red;

综合写法：border:边框宽度   边框样式   边框颜色；

设置不同方向的边框border-方向英文

如果只写border表示四个方向的边框都有，也可以利用 “  –  方向英文”来设置不同方向的边框： 方向英文：left/right/top/bottom/center

border:3px  solid  #ccc;   四个边框都有

border-left:3px  solid  #ccc;  左边框

border-right:3px  solid  #ccc;  右边框

border-top:3px  solid  #ccc;  上边框

border-bottom:3px  solid  #ccc;  下边框

浮动：浮动布局的原理应用

让元素脱离文档流，进行页面效果的布局；

作用：

让多个盒子水平排列一行显示实现网页布局，盒子左右对齐，最早是用来实现文字环绕文字；

属性：float取值：left  right  none（不浮动默认就是）  浮动的特点浮：

浮动之后的元素脱离了标准流；

漏：

盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；

特

1、浮动之后的盒子的显示模式会更改为行内块元素的特点；

2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；

3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

4、常见布局（重点一定要会写）

实际工作中我们最常见的布局就是左右布局和左中右布局

左右布局

方法1：一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子右浮动float:right;

方法2：:一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子左浮动float:left;，如果两个盒子之间有距离就直接给第一个盒子添加margin-left即可；

清除浮动本质：

父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；

解决方案

清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法；

方法1：直接飞父级设置固定的高度，但是有时不方便设置高度，这样就不能使用这个方法；

2额外标签法

在浮动元素的末尾（找到最后浮动的盒子）添加一个空的标签：

<div style=“clear:both;”></div>

书写方便，但是会添加许多没有意义的标签，不建议使用

3父级加overflow属性法

直接给父级添加overflow:hidden;，强制的撑开父级的高度；

after伪元素法（会使用一直用）

After伪元素清除浮动法实际开发中推荐使用：

overflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉；

overflow:auto;  溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示

定位属性：position 取值不同实现的效果不同，如下：

静态定位：position:static;

相对定位：position:relative;

绝对定位：position:absolute;

固定定位：position:fixed;

相对定位：position:relative;

参照物：自己本身原来的位置，进行位置的偏移；

位置偏移：通过改变方位名词（top/bottom/left/right）的值来设置；

特点：相对于自己原来的位置为参照物进行位移，属于占位定位，盒子仍然在标准流里面；

绝对定位：position:absolute;

注意:绝对定位完全脱离了文档流；

参照物：默认情况下是自己的父级盒子，但是如果绝对定位的父级盒子没有任何定位属性，参照物就以浏览器为参照去进行定位；

绝对定位的参照物选定

绝对定位的参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照物；

绝对定位的特点

绝对定位是完全脱离了标准流不占位的，参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照定位；

子绝父相的应用

子绝父相：子级绝对，父级相对，父级盒子做了相对定位定位了，但是依然占位，不会影响其他盒子的布局；

注意：其实实际工作中不一定是子绝父相，其实只要父级有了定位属性，子级就会以父级为参照，但是一般用的最多的还是子绝父相；

固定定位： position:fixed;

• 参照物：电脑屏幕（可视窗口）；

• 注意：固定定位完全脱离了标准流，参照物是可视窗口为准，和父级没任何关系，IE6不支持固定定位，但是我们现在不用管它，直接使用就可以；

CSS精灵技术好处

• 使用css精灵技术可以减少对服务器的请求次数；

原理

可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图；

精灵图的使用精髓

• Css精灵图的技术核心：精确测量每一个小图标的大小和位置，然后设置图片定位的X轴和Y轴的位置；

• background:url(图片路径)  no-repeat   -X轴   -Y轴；

• background-position: -X轴   -Y轴;

一句话总结：就是背景图片的定位位置设置

HTML的认识

01、HTML是超文本标记语言，不是编程语言；

02、所有的html标记（标签）都要放在尖括号<>里面

5、HTML的结构（重点）

一对html标签里面嵌套一对head标签（给浏览器解析用的）和body标签（用户看的），head标签里面还嵌套了一对titlie标签（用户可以看见的）

Html标签的关系

• 嵌套关系  --- 后代关系，嵌套关系可以多层嵌套不单是两层；

• 并列关系  --- 兄弟关系

div和span（重点）

div标签布局标签，主要是布局用的大标签，也是主要标签;

特点：没有语义，独占一行；

span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标；

特点：没有语义，一行共存多

图像（图片）标签（重点+记忆）

图像标签 --- img ，单标签

<img />,可以配合src属性将图片引入html页面，<img src=“图片路径” />

图像常见的属性

src        属性值 --- url            图像路径   

        alt        属性值 --- 自定义文本    图像不能正常显示的时候替换文本；

        title       属性值 --- 自定义文本    鼠标移入图片显示提示文本；

        width     属性值 --- 自定义数值    设置图片的宽度；

        height     属性值 --- 自定义数值    设置图片的高度；

        border    属性值 --- 自定义数值    设置图片的描边，一般不使用，后期会使用css进行设置；

超链接a（重点）

超链接：实现页面之间的跳转，a标签，双标签；

<a href=”#”></a>

常用属性（强制记忆）

href用于指定链接目标的url路径地址，必不可少的；

target 用于指定链接页面的打开方式，属性值我们一般选择新窗口打开 _blank； === target="_blank"            

超链接的链接方式（记忆）

    外部链接（在线链接）【href里面引用绝对路径】：直接在href=“http://+要访问的网址”，注意http://必须书写；

    内部链接(href里面引用相对路径)：  直接在href=“书写html页面名称”，注意在书写内部链接的时候要书写清楚页面的路径；

空链接：   如果不知道要链接到什么地方，我们就暂时用#代替即可；

其他链接：我们不仅仅能给文字添加链接，我们还可以给其他的网页元素添加链接，例如：图像、表格、音频、视频等；

路径

所谓的路径就是从文件（html文件或css文件）自身出发找目标文件；

常见的路径分为两大类：绝对路径（不推荐使用的）和相对路径（是我们一直要用的）

相对路径（重要）

相对路径又分为：同级路径、下级路径、上级路径

同级路径

文件（html文件和css文件）和目标文件在同一个目录文件下面平级存在，我们可以直接书写目标文件名称（如果是图片就直接书写图片名称）,

下级路径：

文件（html文件和css文件）和存放目标文件的父级是平级存在，我们可以先书写目标文件的父级名称+/+目标文件名称

上级级路径：

存放文件（html文件和css文件）的父级和存放目标文件的父级是平级关系，我们可以直接以 ../ 表示上一级去查找目标文件路径；

        记忆口诀：

        同级路径：文件和目标文件是同一个父级，平级关系；

    下级路径：从文件出发往里面查找；

        上级路径：从文件出发往外面查找，用 ../ 表示上一级关系；

列表

列表分为：无序列表、有序列表、自定义列表

无序列表（重点一定要记住）

结构：ul嵌套li标签，li的个数不定，按照设计稿需求进行设置；

注意：01、<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的；

      02、无序列表的所有默认样式我们都不用，后期会用css来进行设置；

有序列表（知道实际工作中不用）

ol嵌套li标签；

<ol>

        <li></li>

        <li></li>

        <li></li>

</ol>

自定义列表：

dl嵌套dt和dd标签，dt表示描述标题，dd描述的内容；

自定义列表的使用技巧：

   01  一个dl嵌套一个dt和多个dd，相当于中国的一词多义；

   02  一个dl里面可以嵌套多对的dt和dd（实际工作中很少用）；

   03  一些图文混排效果可以用dl嵌套dt和dd实现，dt放图片，

注意：所有的列表都有默认的样式，我们在实际开发的时候都要去除，所以现在不必纠结；

input控件

输入的意思，可以更改type属性的属性值来指定不同的控件类型；

还有对应的name、value、size等几个属性；

Input表单属性（死记硬背）

01、value 默认值，没有交互效果 --- value=” 请输入您的名字”/、02、placeholder占位符 html5的新属性，有交互效果 --- placeholder="请输入您的名字"

03、name   给当前的数据起一个名字，让后台工作人员调用

1、Css的作用

Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；

2、使用css的原理

能够将结构html和样式css分离书写，简化代码，提高可阅读性；

3、css的书写位置

分为3类：行内式、内嵌式（内部样式）、外部链接式

Css属性书写语法

属性：属性值；

Css样式书写格式：

选择器 { 属性1:属性值1;  属性2:属性值2;   …… }

行内式

直接在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可、。

注意：行内样式没有实现结构和样式分离，尽量不用：

例如：<div style=“color:pink; font-size:16px;”>我是行内样式</div>;

内部样式（内嵌式）：

书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；

外部链接

使用外部链接的好处：实现了结构和样式的完全分离，代码简介，可读性强；

使用外部链接的步骤

01 新建：.css格式的css文件，直接书写选择器以及css样式；

02 引用：利用link标签引入新建的css文件，要配合link的三个属性  rel关系，type文件类型 （可以省略），href文件路径；

外部链接的好处

一个css样式可以共享，如果两个页面的标签样式完全一致，就可以使用同一个css文件，然后分别连接过来即可；

三种链接方式的使用总结

行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离；

内部样式表：部分结构和样式的分离。缺点：没有彻底分离；

外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入

Css选择器的分类

Css选择器分为两类：基础选择器和高级选择器（复合选择器）

基础选择器：标签选择器（html选择器）、类选择器、ID选择器

复合选择器：后代选择器、并集选择器、指定标签选择器

CSS选择器作用

选择标签的，把想要选择的元素标签选择出来。

类选择器（重点）类选择器定义

类选择器使用有一个过程：

01 定义： 在css里面用点“  .  ”   +  类名称 +{ css键值对 } 进行样式定义;

02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；

类选择器的命名规则：

不能用纯数字、数字开头的、中文命名；

但是可以用数字结束。

类选择器特殊用法（多类名）

一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；

例如：<div class=“red  font100”>一个元素调用多个类名</div>

字体的综合写法 font复合属性

font：是否倾斜   是否加粗   文字大小/ 行高   字体；

注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的，否则不生效；

链接伪类选择器链接的伪类四种状态：

     a:link        未访问的链接（访问前）

     a:visited    已访问的链接（访问后）

     a:hover      鼠标移动到连接上（鼠标经过）

     a:active      选定的链接（按下鼠标的时候）

注意：以上的顺序不能颠倒；

实际工作中我们不需要将四个伪类状态都书写，如果4个都要写顺序不能乱；

标签显示模式（重点要理解）

实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：

    块级元素：自己独占一行； --- 代表标签 div、h标签

     行内元素：一行可以共存多个；--- 代表标签  span 、a

     行内块元素：一行可以共存多个； --- 代表标签 img 、 input

块级元素(死记硬背)

特点：独占一行，设置宽高能够生效，也可以控制外边距和内边距；

       默认的宽度是父级的100%；

       是一个容器盒子，里面可以放行内或者块元素；

注意：p标签是块级元素，但是p标签里面不能放div标签；

      同理h标签（标题标签）dt等都是文字类块级标签，里面尽量不能放其他块级元素；

常见的块级元素：div/p/h1-h6/ul/li/dl/dt/dd

行内元素(死记硬背)

特点：01、一行可以共存多个，设置宽高不生效，一般宽高是自己本身的内容撑开；

02、行内元素里面最好只放文本或者其他的行内元素；

常见的行内元素：a  span  u  s  del  strong   em  i  ins 等；

注意：超链接里面不能嵌套超链接；

      特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式；

行内块元素：

一行共存多个，默认宽高由内容撑开，但是可以控制固定的宽度和高度和外边距，内边距；

一句话总结：行内块元素可以一行共存多个，能够设置宽高并且生效；

三种显示模式相互转换

将元素转化为块级元素：display:block;

将元素转化为行内元素：display:inline;

将元素转化为行内块元素：display:inline-block;

、实体化三属性（重要滴很）

宽 width

高 height

背景 background

注意：这三个属性属于我们布局的中流砥柱，只要这三个值设置好了，我们书写的网页就很少出现兼容问题；

背景的复合写法（死记硬背）

background:背景颜色 url（）  平铺方式  是否固定 X轴 Y轴；

11、 Css的三大特性

分为：层叠性（覆盖性）、继承性、优先级；

层叠性（覆盖性）

层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠；

继承性

有一些css属性子级是可以继承父级的，一般文字控制属性都会被继承，a标签除外，需要单独设置；

一般文字的属性：下图蓝色的可以被继承，颜色也是可以被继承，只不过超链接a不能继承父级的颜色color；，超链接a的color和线条样式text-decoration需要单独设置；

边框的综合写法

边框的宽度：border-width:3px;

边框的样式：border-style:solid;     

常用的线条样式：solid实线   dashed虚线    dotted点线

边框的颜色： border-color:red;

综合写法：border:边框宽度   边框样式   边框颜色；

设置不同方向的边框border-方向英文

如果只写border表示四个方向的边框都有，也可以利用 “  –  方向英文”来设置不同方向的边框： 方向英文：left/right/top/bottom/center

border:3px  solid  #ccc;   四个边框都有

border-left:3px  solid  #ccc;  左边框

border-right:3px  solid  #ccc;  右边框

border-top:3px  solid  #ccc;  上边框

border-bottom:3px  solid  #ccc;  下边框

浮动：浮动布局的原理应用

让元素脱离文档流，进行页面效果的布局；

作用：

让多个盒子水平排列一行显示实现网页布局，盒子左右对齐，最早是用来实现文字环绕文字；

属性：float取值：left  right  none（不浮动默认就是）  浮动的特点浮：

浮动之后的元素脱离了标准流；

漏：

盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；

特

1、浮动之后的盒子的显示模式会更改为行内块元素的特点；

2、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶部对齐；

3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

4、常见布局（重点一定要会写）

实际工作中我们最常见的布局就是左右布局和左中右布局

左右布局

方法1：一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子右浮动float:right;

方法2：:一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子左浮动float:left;，如果两个盒子之间有距离就直接给第一个盒子添加margin-left即可；

清除浮动本质：

父级盒子因为子级浮动引起内部高度为0的问题，清除浮动之后，父级就会根据浮动的盒子自动检测高度，从而解决影响下面盒子的布局问题；

解决方案

清除浮动的方法：额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动、固定高度法；

方法1：直接飞父级设置固定的高度，但是有时不方便设置高度，这样就不能使用这个方法；

2额外标签法

在浮动元素的末尾（找到最后浮动的盒子）添加一个空的标签：

<div style=“clear:both;”></div>

书写方便，但是会添加许多没有意义的标签，不建议使用

3父级加overflow属性法

直接给父级添加overflow:hidden;，强制的撑开父级的高度；

after伪元素法（会使用一直用）

After伪元素清除浮动法实际开发中推荐使用：

overflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉；

overflow:auto;  溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示

定位属性：position 取值不同实现的效果不同，如下：

静态定位：position:static;

相对定位：position:relative;

绝对定位：position:absolute;

固定定位：position:fixed;

相对定位：position:relative;

参照物：自己本身原来的位置，进行位置的偏移；

位置偏移：通过改变方位名词（top/bottom/left/right）的值来设置；

特点：相对于自己原来的位置为参照物进行位移，属于占位定位，盒子仍然在标准流里面；

绝对定位：position:absolute;

注意:绝对定位完全脱离了文档流；

参照物：默认情况下是自己的父级盒子，但是如果绝对定位的父级盒子没有任何定位属性，参照物就以浏览器为参照去进行定位；

绝对定位的参照物选定

绝对定位的参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照物；

绝对定位的特点

绝对定位是完全脱离了标准流不占位的，参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照定位；

子绝父相的应用

子绝父相：子级绝对，父级相对，父级盒子做了相对定位定位了，但是依然占位，不会影响其他盒子的布局；

注意：其实实际工作中不一定是子绝父相，其实只要父级有了定位属性，子级就会以父级为参照，但是一般用的最多的还是子绝父相；

固定定位： position:fixed;

• 参照物：电脑屏幕（可视窗口）；

• 注意：固定定位完全脱离了标准流，参照物是可视窗口为准，和父级没任何关系，IE6不支持固定定位，但是我们现在不用管它，直接使用就可以；

CSS精灵技术好处

• 使用css精灵技术可以减少对服务器的请求次数；

原理

可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图；

精灵图的使用精髓

• Css精灵图的技术核心：精确测量每一个小图标的大小和位置，然后设置图片定位的X轴和Y轴的位置；

• background:url(图片路径)  no-repeat   -X轴   -Y轴；

• background-position: -X轴   -Y轴;

一句话总结：就是背景图片的定位位置设置