css

1；块级元素

常用的块级元素：

div -- 无意义 用在大布局上

ol  -- 有序列表

ul  -- 无序列表

li  -- 列表项

ol和ul下面的第一层级的标签只能是li

dl  -- 定义列表

dt  -- 定义术语

dd  -- 定义描述

hx（1-6）-- 标题 意义 浏览器会优先抓取h标题中的内容

p   -- 段落标签

table -- 表格

from -- 表单

2)行内元素

常用的内联元素：

span -- 无意义 用在小结构的区分

b -- 加粗

strong -- 加粗 带有强调的意义

i -- 斜体

em -- 斜体  带有强调的意义

sub -- 下标

sup -- 上标

s  -- 中划线

del -- 删除线

small -- 文字变小

big -- 文字变大

1）块级元素的内容；

变成块级元素就将值设置为display：block

特点：

1、独占一行

2、在不设置宽高的情况下，宽度是父级元素内容的宽度，高度是本身内容的高度

3、可以设置宽高

4、可以设置内外边距

5、块级元素可以进行任何元素的嵌套

2）内联元素的内容

变成内联元素就将值设置为display：inline

特点：

1、和其他的文字或者内联元素在一行显示

2、默认宽高就是内容的宽高

3、不能设置宽高

4、设置内外边距的时候，只有左右起作用

5、内联元素不能嵌套块级元素（规范）

3）行内块级元素的特点：display：inline-block

1、可以设置宽度和高度，margin和padding

2、在一行显示，从左到右（html的书写顺序）

3、也会受到空格的影响，导致元素之间有间距

4、也会受到垂直对齐方式的影响（内容的高度不同），如果出现这中情况，我们需要将所有的元素对齐方式修改一致

页面是由一个个盒子组成，如果是平级盒子默认排布：

1、块级元素：从浏览器的左上角开始进行排布，并且是上下排布

2、内联元素：从浏览器的左上角开始排布，他们会在一行从左到右进行排布

如果是嵌套盒子默认排布：

1、块级元素：子级盒子会在父级盒子的左上角开始排布，所有平级的子级元素还是会默认上下排布

2、内联元素：子级盒子会在父级盒子的左上角开始排布，所有平级的子级元素还是会默认从左到右排布

2；路径：

相对路径：从文件出发，通过参照物找到我们要找的文件

../表示上一级 -- 指的是要引入文件的上一级，而不是被引入文件的上一级

如果是同级文件，我们只需要写文件夹名称或者文件名称

每一层级之间用/隔开 --> 父级/子级

绝对路径：通过一个地址直接能找到我们要找到的文件

D:\2016教学\html和css\13、第十三期\2、第二天\修改\20161011\备份\anna1.jpg

文件夹没有后缀

文件才有后缀

3；选择器的分类：

选择器的名称   选择器的格式   选择器的权重   作用

1）、标签选择器   标签名{css}       1        批量选择相同标签名的元素

p{color:red;}             给这些元素添加同一的css样式

2）、类选择器     .类名{css}       10       区分相同的标签名，单独选择其中一个

.className{}              两个p标签，通过不同的类名区分

3）、id选择器    #id名{}          100       准确找到唯一的一个元素

选择器的权重：

当选择器不同，但是都操作同一个元素的相同css属性的时候，谁的权重器权重大，谁的css属性值生效

特殊选择器（组合选择器）

4；

选择器的名称   选择器的格式          选择器的权重        作用

1）、后代选择器  选择器1 选择器2{}     所有选择器的权重之和  操作一定范围内的指定                                                    元素

父级选择器 子级选择器{} 子孙后代全部选择上了

2）、子级选择器  选择器1>选择器2>...{} 所有选择器的权重之和  操作一定范围(更加具体                                                   )内的指定元素

第一层级的父级>第一层级的子级{}

5；选择器的名称   选择器的格式         选择器的权重             作用

1）并集选择器  选择器1,选择器2...   每一个选择器都是独立的权重  给不同的元素添加

p,.box1,a{}相同的样式

2）交集选择器  选择器1选择器2       所有选择器权重之和         增加权重

标签.类名/标签#id名

p.box1{}

p#box{}

.box1.box2{} p.s：ie6版本浏览器不支持

组成交集选择器的所有选择器都必须作用于同一元素

6；选择器的名称   选择器的格式              选择器的权重        作用

1）、类型选择器  选择器[type=value]{}     10-11之间          通过标签的type属                                                      性值区分元素

2）、伪类选择器  选择器:伪类{}            跟选择器基本一致      可以给元素

添加一种状态

text-decorration:none a标签的下划线去掉

添加伪元素

伪元素：html中标签就是元素，那么伪元素的意思是通过css向html中添加一个原本不存在的元素

伪类一般只兼容到ie8版本以上

伪元素：

选择器:before：

选择器:after

before和after都会在这个元素内，before在所有html内容之前，after在所有html内容之后

div:after,div:before{}

::before

内容

::after

最后一个选择器：

通配符选择器：

格式:  *{}  *全部的意思 从html这个标签开始全部标签都会被选择上

权重小于1   这个选择器在项目中一般不用，因为这个选择器会过滤所有的标签

*****组合选择器的查找方式是从右向左查找，所以紧挨着{}的这个选择器尽量是类选择器

*****组合选择器一般作用的对象是紧挨着{}的这个选择器

.box1 ul li{}  li才是最终要操作的元素  .box1 ul 只是用来划定范围

*****id名义上权重是100 但是其他选择器的权重之和大于100 也不能覆盖掉id内的属性

********选择器的格式   选择器的权重怎样计算  选择器的作用

4；盒子模型；

Box Formatting Context

盒子 布局 规格   上下文

盒子模型的组成

盒子与盒子之间的距离叫做外边距                css属性：margin[外边距]

盒子周围的边框（盒子外边缘距离盒子内边缘的距离） css属性：border[边框]

盒子内容距离边框内边缘的距离叫做内边距         css属性：padding[内边距]

盒子的内容 content                        css属性：width[宽度] / height[高度]

盒子在页面上所占的位置大小

x轴=宽度（width）+左右内边距（padding-left+padding-right）+左右边框（border-left+border-right）

+左右外边距（margin-left+margi-right）

y轴=宽度（height）+上下内边距（padding-top+padding-bottom）+上下边框（border-top

+border-bottom）+上下外边距（margin-top+margi-bottom）

margin

margin-top:10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

margin:10px;-->四个方向的值相等

margin:10px 20px;-->上下 10px  左右 20px

margin:10px 15px 20px;-->上 10px 左右 15px 下20px

margin:10px 15px 20px 25px; 上 右 下 左

padding

padding-top:10px;

padding-right:10px;

padding-bottom:10px;

padding-left:10px;

padding:10px;-->四个方向的值相等

padding:10px 20px;-->上下 10px  左右 20px

padding:10px 15px 20px;-->上 10px 左右 15px 下20px

padding:10px 15px 20px 25px; 上 右 下 左

5；margin属性的兼容性问题：

1、同级元素，并且是上下排布，第一个元素有margin-bottom值，第二个元素有margin-top值的时候，

两个值取最大值保留，两个值相同留一个

2、父子级元素，子级元素有margin-top值，父级元素不存在padding和border值的时候，

margin-top值会发生传递，传递给父级元素

overflow: hidden;这个属性解决这个问题

3、h标签 ul dl p等标签都天生自带margin或者padding值，这些值影响我们的盒子模型计算，

所以我能要将这些值先进行重置

4、浮动元素margin值加倍 ie6浏览器出现

写一个hake

div{margin-left:10px;_margin-left:5px;}

ie6浏览 20px

_margin-left:5px; 其他浏览器取值为10px，ie6取值5

css属性分为可继承属性和不可继承属性

可继承属性  和文字相关的属性都是可继承属性

6；溢出隐藏

overflow: auto; 自动识别  纵向滚动条

overflow: scroll 自动识别 横向滚动条

7；边框

border-width: 10px;--四个方向的宽度都是10

8；border边框写三角形

border-width: 5px;

border-style:solid;

border-color:red transparent transparent transparent ;

width: 0

9；ps的使用

在ps中打开一个文件

【文件】--【打开】--【选中文件】--【打开】

直接将文件拖拽到ps操作界面，鼠标释放

文件原大小展示

ctrl+1

文件展示的时候缩小或放大

ctrl+"-" 缩小

ctrl+"+" 放大

局部方法和缩小

点击Z键或者是点击工具栏中的缩放工具  用鼠标进行拖拽

图层工具栏

【窗口】--【图层】 f7

移动工具 可以移动图层

V

选框工具  可以用他来测量

M

抓手工具  点击鼠标左键 移动鼠标就可以进行文件的移动

H   按住空格键临时切换到抓手工具

修改ps中的单位

【编辑】--【首选项】--【单位与标尺】--像素/点

查看测量结果

【窗口】--【信息】

查看文字信息

1、可以用文字工具“T”选中文字进行查看

2、打开【窗口】--【字符】，再用移动工具点击这个文字就可以查看

移动工具设置成自动选择【图层】

查看颜色

工具栏中有一个面板是前景色，还有一个背景色

ps中设置辅助线

ctrl+R  显示标尺

点击标尺位置，拖拽后会出现一条辅助线，到达指定位置释放鼠标即可

调整辅助线的位置或者删除废弃的辅助线

用移动工具

删除 移动工具选中辅助线向窗口外拖拽释放

隐藏/显示辅助线 ctrl + “;”/ctrl+H

切片工具  默认是裁剪工具 我们需要选择第三个

C

鼠标从头开始不释放一直拖拽到指定位置释放

选中切片 右键【编辑切片选项】可以改变切片的大小

移动切片 键盘的上下所有键 每按一次 移动1像素

切片选择工具，可以直接移动切片

切片选择工具 裁剪工具的第四项

切片的导出：

【文件】--【储存为web所用格式】

alt+shift+ctrl+S

文件的格式：

jpeg（品质在60-100之间）  .jpg/.jpeg

png  png24  用在背景为透明的图片上  .png

gif         用在背景为透明的图片上/动态图

10；img的默认属性

img受到对齐方式的影响会有底部空白，我们需要将这个空白去掉，改变对齐方式即可

vertical-align: top/middle/bottom;都可以

11；margin: 0 auto;

可以使有宽度的块级盒子，自动在其父级盒子内水平居中

必须要设置宽度才能让盒子居中

12；

浮动元素的特点：

1、按照一定方向，按照html的书写顺序，从这个方向开始依次向另一个方向排布

2、浮动元素，都可以直接设置盒子模型的属性

3、浮动元素脱离文档流，文档流内的元素识别不到浮动元素********

4、任何内联元素和行内块级元素（html的书写顺序）挨着浮动元素的时候都会围绕着浮动元素进行排布（也就是说他们都是平级的时候）

5、文字会围绕着浮动元素进行排布

6、浮动元素进行排布的时候，他会优先识别他紧挨着的上一个元素

float:left;  左浮动

float:inherit; 继承浮动属性的属性值

float:right;  右浮动

float:none;去掉浮动属性

clear:both;  清除掉浮动元素对浮动元素“下方”元素的影响

清除浮动，不是将元素的浮动属性去掉，而是清除掉浮动元素对其他元素（html顺序写在浮动元素后面的那些元素）影响，所以我们清除浮动的属性写在**最后一个浮动元素的后面**

清除浮动的方式：

1、在最后一个浮动元素的后面用块级元素引入clear:both;这个css属性****

2、给浮动元素的父级盒子添加高度  ***

3、给浮动元素的父级盒子添加overflow: hidden;这个属性 ***

4、给浮动盒子的父级盒子添加float这个属性 *

最常用的方式：利用伪类来进行浮动的清除

格式

.clear{zoom:1;}

.clear:after{

display:block;

content:"";

clear:both;

}

13；十六进制

色值：颜色

十六进制色值--所有浏览器都支持

介于0-f（黑-白）之间

格式: #XXXXXX

#ff0000--#f00--red

#fff000--#fff000

#000000--黑色

#ffffff--白色

RGB--红绿蓝

0-255之间

还支持百分数 0%-100%之间

rgb(207,70,70)

RGBA--红绿蓝透明度  支持ie8以上浏览器

0-255之间

还支持百分数 0%-100%之间

Alpha支持的数值 0-1 0是完全透明 1是完全不透明

单位：

绝对单位

px  像素

cm  厘米

m   米

km  千米

s    秒

ms   毫秒

14；

定位：是在基本文档流之上的，也是脱离文档流，我们要的效果就是压在其他元素上

定位的元素要在其他元素之上，这里的其他元素指的是任何元素（包括文档流内元素，浮动元素，定位元素）

通过上 下 左 右四个方向来进行位置的定义

top bottom left right 前提是这个元素是定位元素

1、相对定位：            position: relative;

特点：

a、参照物是本身

b、没有脱离文档流，所以其他元素还可以识别相对定位的元素，其他元素识别的是相对元素原来的位置而不是改变的位置

c、相对定位的元素，还是在文档流内元素的上方

d、相对定位的元素可以通过z-index属性改变他们的层级关系

e、相对定位的元素，原display属性不发生改变

2、绝对定位            position: absolute;

特点:

a、脱离文档流

b、绝对定位元素默认参照物是第一次识别的body的位置

c、只要具有定位属性的元素（上级元素）都是绝对定位元素的参照物

（一般设置参照物的时候，我们给参照物相对定位这个属性）

d、绝对定位的元素，display属性改变

e、绝对定位的元素可以通过z-index属性改变层级关系

f、当绝对定位元素的上级元素都有定位属性的时候，它的参照物最近的父级元素

以谁作为参照物，就给他设置一个 position: relative;

3、固定定位  ie6不兼容            position: fixed;

a、脱离文档流

b、参照物永远是浏览器的可视窗口

c、固定定位的元素，display属性改变

d、固定定位的元素可以通过z-index属性改变层级关系

15；background的属性

1） background-color: red;背景颜色 铺满整个盒子

2） background-image: url("图片路径"); 背景图片 默认铺满整个盒子

3） background-repeat: no-repeat; 背景平铺

no-repeat 不平铺 repeat-x x轴平铺 repeat-y y轴平铺

4）background-size: 控制背景图片的宽高  第一个值是宽度 第二个值是高度

ize中如果是百分数 它指的是盒子的宽高的百分之多少

如果是绝对单位，例如px 给多少值 背景图片就是多大

16； 表单元素的标题【表单元素的描述】

用户名

当label标签中for的值和表单元素中id的值相同的时候，点击label中的文字，自动跳转到相关的表单元素

input 标签

type  类型

placeholder 提示信息 【h5的新增属性】{浏览器兼容 html文件的文档声明需要是h5的声明}

value 值

id   id

name 名称

文本框text：文本框

密码框 password：密码框

邮箱    email：邮箱

单选框radio：单选框

多选框checkbox：多选框

单选框和多选框 有默认选中状态 checked="checked"/【checked】

单选的时候我们只需要一个选项 那么我们可以通过name值一致的这种做法 达到这个目的

 file：上传文件

image：图片

reset：重置按钮

submit：提交按钮

button：普通按钮

-webkit-user-select: none; 把鼠标点击的阴影取消