HTML分类:
1. 块级元素:
div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul
特点:总是在新行上开始,高度、行高以及上下边距都可控制,宽度默认是容器的100%,除非设定宽度。
功能:主要是用来搭建网站架构、网页布局、承载内容。
2、行内元素:
span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、textarea、tt、u、var
特点:和其他元素都在一行上,高、行高、以及上下边距不可变,宽度就是它的文字和图片的宽度,不可改变。
嵌套规则:1、块级元素与块级元素平级、内嵌元素与内嵌元素平级
2、块级元素可以包含内联元素或某些块元素,但是内联元素不能包含块元素,它只能包含其他的内联元素。
3、有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素
h1~h6、p、dt
4、块级元素不能放在标签p里面
5、li标签可以包含标签,因为li和div标签都是装载内容的容器。
a标签想要用hover必须把它的路径写全
所有属性的简写形式总结:
框:border:width(边框粗细) style(边框样式) color(边框颜色);(border-top/border-left/border-right/border-bottom)
溢出overflow:visible/(溢出可见)hidden(隐藏)/scroll(显示滚动条,溢出时可用)/auto(自动,溢出显示滚动条,并可用);(overflow-x、overflow-y)
外边距:margin:value(数值) 先上下后左右(可以设负值)
默认拥有外边距的元素:body,p,h1,h2,h3,h4,h5,h6,pre,ol,ul,dl,dd
外边距特殊效果:1.外边距合并2.上下外边距溢出(子元素是一个没有外边距的父元素的第一个或最后一个)
内边距:padding:value 先上下后左右
在设置button type=“submit/reset/button”的宽高时包含边框和内边距
box-sizing:content-box/border-box;按照盒子模型计算(将内边距和边框包含进去)
background:color(颜色) url(“”)(背景照片的路径) repeat(是否重复背景图片) attachment(背景图片固定) position(背景图片定位);
attachment(背景图片固定):scorll(背景随文本移动)、fixed(固定)
repeat(是否重复背景图片):repeat、no-repeat、repeat-x、repeat-y
background-size:背景图片的大小:cover扩充足够大覆盖元素区域(有可能背景图显示不完整)
position(背景图片定位);抠图专用;
线性渐变:background-image:linear-gradient(angle(角度或方向),color-point,color-point…)
径向渐变:background-image:radial-gradient([size(圆半径) at position(圆心位置)],color-point…)
浏览器兼容性:fire-fox:-moz-
chrome&safari:-webkit-
opera:-o-
字体属性:font: style(样式normal/italic) variant(小型大写字母normal/small-caps) weight(字体加粗 normal/bold/400-900) size(字体大小px pt em) family(字体*必须写);
文本属性:color:颜色、文本排列:text-align:left/center/right;文字修饰:text-decoration:none/underline/line-though/overline;行高:line-weight:value;首行文本缩进text-indent:value;文本阴影:text-shadow:h-shadow(横向阴影) v-shadow(纵向阴影) blur(阴影模糊) color(阴影颜色);
表格:垂直方向对齐:vertical-align:top/middle/bottom;
边框合并:border-collapse:separate(分离)/collapse(合并)
边框边距:border-spacing:value 一个值垂直和水平都有、两个值代表水平和垂直
标题位置:caption-side:top/bottom
显示规则:table-layout:auto(列宽由内容决定[加载慢])/fixed(列宽由设定值决定[速度快])
浮动定位:float:none/left/right;
清除浮动:none/left/right/both;
如果想消除浮动对父元素的影响:设置父元素高度、父元素浮动、父元素设置:overflow:hidden/auto 、父元素设置clear:both。
显示方式:display:none(隐藏:脱离文档流)/block(块级:允许修改尺寸)/inline(行级)/inline-block(行内块:允许修改尺寸)/table(尺寸自占一行);
显示效果:visibility:visible(元素可见)/hidden(元素不可见:未脱离文档流)/collapse(删除一行或一列不影响布局)
透明度:opacity:0~1;
文本垂直对齐方式:vertical-align:baseline(默认基线对齐)/top/middle/bottom;
光标:cursor:default/pointer(小手)/crosshair(+)/text(I)/wait(等待)/help(帮助);
列表项标志:lis-style-type:none(无标记)/disc(实心圆)/circle(空心圆)/square(方块);
列表项图像:list-style-image:url(“url”);
列表项位置:;list-style-position:outside(标志位于文本域之外)/inside(文本域之内);
列表属性:list-style:type url() position;
定位:position:static(静态)/relative(相对定位)/absolute(绝对定位:元素会变成块级元素[弹出菜单])/fixed(固定定位:脱离文档流不占据页面空间);
偏移属性:top/bottom/left/right:value
堆叠顺序:z-index:value;
自带属性去除body,p,h1,h2,h3,h4,h5,h6,pre,ol,ul,dl,dd{
margin:0px;
padding:0px;
}
背景图片的处理:
#top_box>ul>.shoujijingdong a {
padding-left: 18px;
display: inline-block;
height: 23px;
padding-bottom: 9px;
background: url("../Images/iconlist_2.png") no-repeat;
background-position: -127px -356px;
}