1. 布局排版(盒子模型)
float - 浮动:设置块元素的浮动效果。 常用参数:left (左) right(右) 例如:float:left; 或 float:right;
width - 宽:确定盒子模型本身的宽度值,使得盒子模型的宽度不依靠内容的多少 例如:width:20px 结尾是以像素为单位
height - 高:确定盒子模型本身的高度 例如:height:20px 结尾是以像素为单位
clear - 清除:用于清除设置的浮动效果 常用的参数:both(在左右两侧均不允许浮动元素) 、 left(在左侧不允许浮动元素) 、right(在右侧不允许浮动元素)、none(默认值。允许浮动出现在两侧)
margin -
外边距: 控制元素外边距的大小 , 常用的属性 margin-top(控制上边距大小)、margin-right(控制右边距宽度)、margin-bottom(控制下边距大小)、margin-left(控制左边距的宽度)
padding - 内边界:控制元素内边距的大小, 元素的填充数量,属性padding-top 控制上留白的宽度,padding - right控制右留白的宽度、padding - bottom 、padding - left 对应下和左
2.边距
border - 设置边框
border-width- 宽:控制边框的宽度 属性:border-top-width 顶边框的宽度border-right-width border-bottom-width border-left-width各自对应右、下、左的边框宽度
border-color- 颜色:设置边框的颜色
border-style- 边框的样式 样式:无 neone、虚线dotted等等 border:
3.文字的属性
font-family: 字体:设定字体之前需要考虑浏览器中原先有无字体
font-size: 字体的大小
font-wight: 字体的粗细 normal(正常) 、bold(粗体)、bolder(特粗)、lighter(细体) 还有用像素设置的方式
font-style: 字体的样式
line-height: 行高:行距 以字体大小为值
font-variant: 变形
text-transform: 控制字体的大小写 属性:capitalize (首字大写) uppercese(大写) lowercase(小写) none(无)
text-decoration: 修饰 用于控制连接文本的显示形态, underline(有下划线) overline(无下划线) line-through(删除线) blink(闪烁) none(无)
4.背景属性
background-color: 背景颜色:设置背景颜色
background-image: 背景图像:设置网页背景图像
background-repeat: 控制背景图像的平铺方式 不重复(no-repeat) repeat(重复 水平和垂直方向)
background-attachment: 控制背景图像是否随着页面一起滚动而滚动 fixd(文字滚动时,背景图像保持固定) scroll(背景图像随文字内容一起滚动)
5.区块属性
word-spacing:控制文字相隔的距离 normal正常 以及自定义
letter-spacing: 控制字母的距离
text-align:文本对齐
text-indent:文字缩进:控制块的缩进程度
white-space:空白间距
6.绝对定位属性
position: 用于确定定位的类型 绝对定位(absolute) relative(相对定位) static(静态)
visibility:该元素可将网页中的元素隐藏
定位 为元素确定了绝对定位的类型后,该组属性决定元素在网页中的具体位置
分别是“左”属性名是left控制元素左边的起始位置 上属性为top 控制元素上面的起始位置 宽和高与盒子中的类似
7.列表
list-style-type 类型样式
list-style-image 将别表前面的符号转换为图形
list-style-position 用于描述列表的位置
选择未访问、已访问、悬浮和活动链接,并设置它们的样式:
a:link {color:blue;} a:visited {color:blue;} a:hover {color:red;} a:active {color:yellow;}
部分内容为转载