盒子模型:两种
标准盒模型下盒子的大小 = content + border + padding + margin
怪异(IE)盒模型下盒子的大小=width(content + border + padding) + margin
HTML文件头的<!DOCTYPE HTML>(Doctype文档类型)声明浏览器用标准盒子模型解析
*相邻盒子的相邻外边距会重叠而不是叠加(只计算大的外边距)
*box-sizing:border-box;指定该属性后浏览器会根据设定的宽高减去内外边距边框智能计算宽高。content = width - border - padding - margin
display 属性规定元素应该生成的框的类型
块级元素,占一行
<P>,<div,<h1>~<h6>,<ul>,<li>,<ol>,<dl>,<dt>,<dl>等
行内元素(内联元素),在一行显示,占满一行才会在下行显示
<span>,<em>,<a>等
*替换元素,浏览器根据其标签的元素与属性来判断显示的具体内容
<img>,<input.<textarea>等
背景样式
background-color: ; background-image: ; 包含内边距和边框,不包含外边距;背景图片覆盖背景颜色
*边框颜色默认和内容字体颜色一样
background-position 设置背景图像的起始位置(根据所在容器),第一个个值水平位置,第二个值垂直位置,只写一个第二个默认居中(可写百分比、具体数值、top,right,left,bottom,center)
background-attachment 背景图像是否固定或者随着页面的其余部分滚动 fixed固定 scroll滚动
background 简写,后面的属性不分先后顺序,用空格分隔
列表样式
list-style-type 列表项目标记类型(圆点,正方形...)
list-style-position 列表项目标的位置;inside第二行文本缩进 | outside第二行文本不相对项目标记缩进
list-style-image 用图片设置列表项目标记
list-style 简写,后面的属性不分先后顺序,用空格分隔;list-style-image覆盖list-style-type