HTML 表单[form]元素用于收集用户输入
block-level 块内元素 独占一行有宽高 例：div 标签
inline-level 行内元素 一行可以放多个 无有宽高 例：span,a ,h 标签
inline-block 行内快元素 一行可以放多个 可以设置宽高 例： img ,input, td 标签
- 行内元素不转化为行内块元素|块内是margin无效
- 行内快中间有缝隙 浮动可以清除
- 行内快元素的大小与内容有关
用 display可以转换他们的模式
- display：inline 将块级元素转换为行内元素
- display：block 将行内元素转化为块级元素
- display：inline-block 将行内元素转换为行内块元素
text-alight:center 文字水平居中
text-dectoraton：none 去掉下划线
背景图片与插入图片的区别
背景图片不占位置 插入图片占位置 背景图片有定位属性插入没有
插入图片
div img｛
width:100px; 插入图片更改大小 图片整体缩小
height:100px;
margin-top:20px; 插入图片更改位置 可以用margin或padding 盒子模型
padding-left:10px;
｝
背景图片
div{
wdith:200px;
height:200px; 盒子的宽高
background:url(...) no-rerpart;
background-size:20px 30px; 背景图片更改大小
background-poisition： 30px 50px或top left;背景图片更改位置
}
------------------------------------------------------------------------------------------ light-height 文字垂直居中
行高 light-height：**px；
行高三部分组成 文字与文字上下的距离
上下距离总是相等，因此文字看上去水平居中
如果行高等于height （盒子div）的高度 文字水平居中
如果行高大于height （盒子div）的高度 文字会偏下
如果行高小于height （盒子div）的高度 文字会偏上
text-align:center 可以让盒子里面的 文字 行内元素 行内块元素 居中对齐 文字水平居中
margin：0 auto； 上下是0 左右auto（自动） 前提盒子必须有宽度 盒子居中对齐
块级元素给了宽才能居中对齐
padding：**px； 内边距
padding：20px； 上下左右 都是20
padding：10px 20px； 上下10 左右20
padding：0 20px； 上下0 左右20
padding：10px 20px 30px；上10 左右20 下30
padding：10px 20px 30px 40px；上10 右20 下30 左40 顺时针
padding-left：10px； 左10
没有宽高padding不会撑开盒子
padding会撑开带有宽（width）高（height）的盒子
如果设置padding并不改变盒子的大小 可以改变原有盒子的大小
盒子的宽有 width+padding+solid 组成 w100 p10 s5 宽为130
#box>p 选择的是id为box的元素的所有直接子元素p 指的是 所有 亲儿子
p, .box 选择的是p元素 和所有类名为box的元素 逗号代表和
p .box 选择的是p元素 后代里所有类名为box的元素 p与box之间有空格
p.box 选择的是拥有box类名的p元素
p与box之间无空格
.message h4 a (div里面的h4里面的a)
css 的权重性
*（代表选择所有） 0000
div 0001 标签
.one 0010 class
#two 0100 id
行内 1000 在标签内的
important ∞ 最重要的
1.权重相同 则就近原则
2.权重会叠加 0001+0001=0002
background-image: url(images/3.jpg);
背景图片的显示方式
background-repeat：repeat； 背景图像在纵向和横向上平铺
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺
背景图片定位 在这之前需定义背景图片
background-position: x y ;
background-position: center top; top 上 bottom 下 left 左 right 右
background-position: center center;
background-position: bottom right; t
- positon后面可以跟方位名词 他们之间可以没有上下顺序 例：left top=top left
- position 如果只写一个方位名词，另外一个默认是居中的
- position 后面也可以跟 值px 但是 必须有顺序 x 在前面 y 后面 不能颠倒
background-position: left; top 上 bottom 下 left 左 right 右
background-position: bottom; top 上 bottom 下 left 左 right 右
background-position: 12px 50px; 左12 上50
background-position: 50px 12px ; 左50 上12
background-position: 10px center;
一张图片上走top是负的 同理 上下左右
一个盒子里面加背景图片默认左上角对齐 若背景图片大于盒子 只显示盒子里面的背景多余的不显示
background：url（。。。）背景图片不会撑开盒子但有定位属性 不占位置
插入图片会撑开盒子占位置 虽然撑开但盒子依旧没有宽高
background-image: url(images/3.jpg);
背景图片是否随对象内容滚动
background-attachment: scroll||fixed; scroll滚动的 fixed 固定的
外边距
盒子居中对齐 前提盒子必须给宽不然充满整个浏览器没法居中
margin-left：auto；
margin-right：auto；
margin：0 auto； 上下是0 左右auto（自动）
margin：5px auto 0； 上5 左右居中 下0
清除内外边距 *{margin：0； padding：0；}
圆角边框
border-radius：**%； 让一个正方形变成圆（值为宽高的一半）或角是圆的 百分之五十时 是个圆
border-radius：150px 0； 左上右下为150 右上左下为0 对角线
盒子阴影
box-shadow：2px 2px 2px 2px red； 水平阴影的位置 垂直阴影的位置 阴影的模糊程度 阴影的大小 颜色
rgba（0,0,0,0.5） 黑色的半透明 可以代替上面的颜色 半透明
float:left|right|none； 浮动目的： 让多个 块级元素（div）在一行显示 每个块级元素都加float
浮动只有左浮动与右浮动 浮动走不过内边距
标准流：正常显方式 块级一行显示一个 行内元素一行显示多个
浮动标是脱标的 浮动与父亲有关系 如设内边距 浮动就过不来
加了浮动 margin 左右失效 浮动就是贴着左边对齐的意思 所以margina 0 auto 失效 因为他没法即居中对齐又帖着左边对齐
1.加了浮动的元素盒子是浮起来的，漂浮在其他标准留盒子的上面
2.加了浮动的盒子 不占位置 他浮起来了 它原来的位置漏给标准流的盒子
为不影响其他的元素可以给其他的元素加个父亲 并给他高度
2.浮动可以让元素默认转换为行内快元素
3.如果给行内元素添加浮动 此时不需要转换这个元素也可以有宽高
浮动在父盒子里面 是不会超过内边距和边框的范围
如果子盒子有一个浮动了 其他的子盒子都应该浮动
/如果一个盒子里某个孩子浮动 按道理所有的孩子都要浮动/
border padding 边框与内边距 会影响盒子的大小
给盒子设边框的大小是在 盒子本来的宽高基础上加的 所以如果盒子有边框 则 盒子的大等于盒子本身的大小加边框
如有padding在加上那个padding 同上
textarea 文本域 在里面可以写内容
在盒子里面写内容 默认左上角对齐
图片按钮
子盒子能把父盒子撑开
多类名使用方法background：url（。。。）背景图片不会撑开盒子但有定位属性 不占位置
插入图片会撑开盒子占位置 虽然撑开但盒子依旧没有宽高
list-style：none 去掉li前面自带的点
background：url（。。。） no-repeat right 背景图片不重复 右对齐
子盒子的宽度大于父盒子 那么子盒子会掉下来
表格不用来布局 用列表来做排列一行一行一列一列的
i|em 倾斜标签
font 如果连写 有两个不能省略 ：size family
外边距塌陷（外边距合并）：一个父盒子里面有个子盒子 若他们的上面重合 父盒子的margin-top 会带着子盒子一块下来
子盒子的margin-top下来
外边距塌陷（外边距合并） 解决办法：1.给父盒子加一个 overflow：hidden
2.给父盒子加一个边框 border
父盒子不给高度子盒子给高度 若子盒子浮动，脱标，父盒子没有高度变为0不会撑开盒子
(由于内部的原因父盒子不方便给高度)
浮动与定位都有不占位置的 但浮动可以子绝父相所以没有清楚定位
清除浮动
清除浮动 拥有浮动和清除浮动的优点
清除浮动的目的：为了解决父级元素由于子级浮动引起内部高度为0的问题
浮动目的：让多个 块级元素（div）在一行显示
如果清除浮动，父亲会自动检测孩子的高度 以最高的为准
方法：1. 在最后一个浮动标签后，添加一个新标签
在这个新标签内添加：clear：both； 清除浮动 2. 给父级添加 overflow：hidden (别加错位置 给父亲加) 缺点：隐藏超出盒子的地方
3. 使用after伪元素清除浮动 div:after{ 伪元素前面加 ：
content:"";
display: block;
height: 0;
clear：both；
visibility: hidden;
} 正常浏览器 清除浮动
div{
zoom: 1;
} IE7一下的使用方法
4. 使用before和after双伪元素清除浮动 div:before，div:after{
content:"";
display: table;
}
div:after{
clear：both；
}
div{
zoom: 1;
} IE7一下的使用方法
不是所有的浮动都需要清除 谁影响布局清除谁
定位 poisiton：static|relation|absolute| fixed background——poisiton 背景定位
定位 就是飘在别人的上面 相对定位保留位置 绝对定位不占有位置
定位属性主要包括定位模式与边偏移两部分
加了 定位 浮动 的盒子margina 0 auto；（盒子居住对齐）失效了 定位优先
定位可以走过内边距
poisiton：static 固定定位 网页中所有元素默认 静态定位 唯一用处取消定位
poisiton：relation 相对定位 在原有的位置上改变位置
虽然通过边偏移改变了位置，但原来的位置，继续占有 *占有原有位置
例.poisiton：relation；left：100px； 在原有的基础上 左面在加100px ；
相对定位比标注流高一级 浮在上面的 浮动在其他标准流上面
poisiton：absolute 绝对定位 *不占位置 与浮动一样
例. poisiton：absolute; bottom:0; right:0; 盒子在右下角
若无父元素或父元素无定位 以当前屏幕（左上角）为基准点
若有父（祖先）级元素元素则依据最近的已经定位（绝对，相对，或固定定位）
的父（祖先）元素进行定位
绝对定位 （poisiton：absolute）的盒子水平垂直居中
普通盒子是左右margin auto 即可，但绝对定位就无效了 定位的盒子也可以水平或垂直居中算法
1.首先left：50% 父盒子一半的大小
2.然后走自己外边距负的一半值就可以 margin-left：
（）
子绝父相（子 绝对定位 父 相对定位） 占不占位置 对齐 定位：定在哪个地方保不保留位置
poisiton：fixed 固定定位 固定定位与父元素无任何关系只认浏览器
固定定位完全脱标 不占位置 不随滚动条滚动
相对定位 绝对定位 固定定位 都脱标 浮在标准流上面 只不过相对定位占有位置
叠放次序（z-index） 默认的z-index的值为0 z-index: 0;
1.z-index的默认属性值为0，取值越大，定位元素在层叠元素中居上
2.如果取值相同，则根据书写顺序，后来居上
3.后面的数字不加单位 （font-weight：100也不加单位）
4.只有 相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性
四种定位总结
定位模式 是否脱标占有位置 是否可以说使用边偏移 移动位置基准
静态static 不脱标，正常模式 不可以 正常模式
相对定位relation 脱标，占位置 可以 相对自身位置移动（自恋型）
绝对定位absolute 完全脱标，不占有位置 可以 相对于定位父级移动位置（拼爹型）
以当前屏幕（左上角）为基准点
固定定位fixed 完全脱标，不占有位置 可以 相对于浏览器移动位置（认死理型）
以一个点做绝对定位 区域性的绝对定位 在body父元素设一个不需要top与left 的相对定位poisiton：elation
在在自身上加一个poisiton：absolute
定位模式转换
*跟浮动一样，元素添加了绝对定位和固定定位以后，元素模式会发生转化，都转换为行内快模式，
）
因此 比如行内元素如果添加了绝对定位或固定定位 浮动后 可以不用转换模式 直接给宽高
-------------------------------------------------css------------------------------------
显示与隐藏
display 显示
display：none 隐藏 某个元素 隐藏后不保留位置
display：block 1.显示某个元素 2（转化为块级元素）
visibilty 可见性
visibilty：visible 对象可视
visibilty：hidden 对象隐藏 隐藏后保留位置
a：hover .mask 鼠标经过a标签后里面的mask出来 后代选择器 a是链接标签 mask是一个名为mask的div
鼠标样式
cursor：default 鼠标经过变成默认的
cursor：move 鼠标经过变成十字架的样式 在css的样式里面写
cursor：pointer 鼠标经过变成小手
cursor：text 鼠标经过变成选择 （I）
resize：none 防止文本域拖拽 textarea
outline：none 用于表单（input｜textarea）取消轮廓线做法 并不是完全没有 可以用border声明一个边框
vertical-align 图片/表单 与文字的对齐方式
和行内快元素搭配使用（image｜input）
块级元素没有，只针对行内或行内快元素 特别是行内快元素。 通常用来控制图片/表单 与文字的对齐
vertical-align 控制文字与图片的垂直关系 默认图片与文字的基线对齐（文字与图片下面一齐）
vertical-align：baseline 图片与文字的基线对齐
vertical-align：top 图片与文字顶部对齐
vertical-align：middle 图片与文字垂直对齐 文字在图片高一半的位置
文字的隐藏
当一个盒子里面的内容大于盒子时
overflow：hidden 溢出隐藏 多余的内容隐藏
overflow：scroll 滚动条 不管多不多于都显示滚动条
overflow：auto 自动 多余时显示滚动条 不多于时不显示
overflow：hidden 超出的部分隐藏
white-space:nowrap 强制所有文本（文字）同一行显示即便大于盒子 或遭遇br标签才换行
超出的部分隐藏省略号代替（三步）： white-space:nowrap 同一行显示
overflow：hidden 溢出隐藏
text-overflow：ellipsis 溢出省略号代替
----------------------------------------css精灵技术---------------------------------
css精灵技术 ：为了减少服务器接受与发送的次数，提高页面加载速度 处理网页背景图像的方式
（例. 一张大图里面有许多小图 不用每次拿一个小图可以直接把大图拿来）
为什么用精灵技术：为了减少去服务器的请求次数
怎么实现精灵技术：把多个小背景图片放到一张大图上面
怎样使用精灵技术：背景定位 background-position: 一个小盒子显示一个大盒子里面的某个内容 就让大盒子往上或下走
精灵技术实现的本质
将涉及到的多个背景小图放到一张大图，这样用户访问该页面的时候，只需向服务器发出一次请求，就可全部展示出 这个由许多背景小图片组成的大图大图通常叫精灵图
background-position: -50px -12px ; 在精灵技术里面的值几乎都是负的
在一张大图片中截取一个小图片 1.先测他的宽高 2.在用background-position: -50px -12px ;写出他的X轴与Y轴的坐标
坐标轴以左上为原点 X轴向右越来越大
Y轴向下越来越大
设置精灵图
.btn{
2 background:url(bg.png);
3 background-repeat:no-repeat;
4 background-position:-25px -374px;
5 height:16px; 设置截图图片的大小
6 width:24px;
7 }
css里面的样式有的在的父级写也可以给他的下里面的文字
------------------------------------------------滑动门---------------------------------
行内元素：span和a 的大小与内容有关
滑动门: a里面包span
滑动门里面不可能与宽 可以有高 因为他的宽不一定 他的宽由内容的多少决定
a里面包span a代表链接 span里面写文字 那么文字越长链接就越长
a与span 里面放的是同一张图片 只不过 a默认的左对齐 span右对齐 一个左圆角 一个右圆角
背景图片右对齐：background：url（。。。） right；
-----------------------------------------------字体图标----------------------------
字体图标是字 是特殊的字体 需到网站下载 需把字体文件放到与网站同一级的文件 在icomoon.io字体图标网站 下载（步骤：右上选完右下）
可以跟图片一样 改透明度，旋转度 等
但本质上是文字，可以随意改变颜色，产生阴影，透明效果等 font-size 支持所有浏览器
盒子可以是 span div 之类的
在网站下载完字体后得到压缩包 解压后
复制里面的fonts文件 放到网站目录下（同一级别） 第一步就是把他两人联系起来
demo.html文件里面是所有图标 复制小图标的小方块就是复制这个图标（第三步）
使用字体图标表 1.在样式里面（style）声明字体：告诉别人我们自定义的字体 （复制一段代码@font-face{ … }）
2.将字体放到一个盒子内 在在样式内给这个盒子使用字体（font-family：）
3.盒子里面放一个复制的小方块（代表字体图标）
追加新的图标 ：进入字体图标网站后点左上（import icons） 找到字体图标文件（icomon）的 selection.json 后在点yes 后选择新的下载就可以了 最后生成综合的
font：12px/1.5 行高
line-height：1.5 在bady中一般不加单位px 1.5代表在字体大小的基础上乘以1.5
例
/* line-height: 26px;/
font-size: 16px;
/ 行高会继承 line-height: 1.5 1.5*16 = 24 字体大小跟高度没关系 此时行高就是字号的1.5倍 */
}
</style>
ico 图标
可以再标题中显示的（类似于一张local图片）
他不是字体图标也不是图片
放在head标签中间
将favicon.ico这个图标放到根目录下
路径中的 …/ 代表上一级 出来
代码不一定错 但有许多隐含的东西会影响 例 自带的内边距
大盒子会撑开小盒子
正常盒子靠左边走 给margin-right 盒子不动
一个盒子给他一个 margin-left：-10 他会向左走10
margin-right：-10 他会不动 但他的右边十没有了
两个盒子中间距离30px
给左边的盒子margin：10 右边的盒子向右走10 中间的距离边40
给左边的盒子margin-right：-10 右边的盒子向左走10 中间的距离边20
图片低测有缝隙
img {
vertical-align:top; /去除 图片低测缝隙 因为图片与文字基线对齐/
}
width=100% 与父亲 一样宽高 等比例缩放 例。一个小盒子里面放一个大图片
点击密码鼠标调到密码框
1.
resize 调节元素尺寸大小 resize:none
none不可调 默认 bot可调h horizontal可调宽 vertical可调高
如果是textarer元素 可直接使用这个resize属性
其他元素需要设置 overflow：auto 才可使用resize 进行拖拽
小盒子里面放大的背景图片方法：
盒子小背景图片大必须使用插入图片才能完全显示
图片的宽高设为width:100%; height:100%;与父盒子一样大
如果要是背景图片的话只显示部分图片不能完全显示
letter-apacing：。。px； 字与字之间的距离
//隐藏div
//不占位
//my$("dv").style.display="none";
//占位
//my$("dv").style.visibility="hidden";
//占位
//my$("dv").style.opacity=0;
//占位
//my$("dv").style.height="0px";
//my$("dv").style.border="0px solid red";
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
