一、大小
①width宽;height高。
!注释:<a><span>无法使用该方法调整大小
控制元素的大小:宽高。下例是宽高分别100像素的div标签。
<div style="width:100px; height:200px;">
</div>
二背景
background-color背景色
background-image背景图
background-size大小(auto自动。在repeat-no情况下over宽高比不变,超出部分隐藏。contain宽高比不变,缩小至容器放下,可能留有空白)
background-repeat图片平铺方式(x轴平铺repeat-x;y轴平铺repeat-y;repeat-no不平铺。)
background-position图片位置(上top右right下bottom左left居中center)
background-attachment设置图片是否滚动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#a{ height: 1000px;
width: 1000px;
background-image:url(1.jpg);
background-repeat: no-repeat;
background-size:contain;
background-position:center;}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
三、字体
font-family设置字体
font-size字体大小12px;16px;
font-style(normal正常的,italic斜体,oblique倾斜)
font-weight:bold加粗
text-decoration(underline下划线,overline上划线,line-through删除线,none没有,作用删除超链接线)
color颜色
四、对齐方式
text-align水平对齐(center把文本排到中间,left靠左对齐,right靠右对齐)
line-height行高
vertiacl-align垂直对齐方式(需要配合行高使用)
text-indent缩进(单位像素,默认情况下15px为一个汉字字符大小,需按照字体大小设置)
五、边界边框
margin外边距
padding内边距
border边框。属性:大小、实虚线、颜色。例如border: 1px solid #fff;
可以使用单独方向,例如maigin-top:0;
六、列表方块
list-style:none不使用前面的点,inside点在里面,outside点在外面。
list-style-image将序号变更为图片。
七、格式布局
①position位置定位
fixed固定位置,相对浏览器
absolute绝对定位,相对父级
relative相对定位,对于原来的位置
②top、right、bottom、left距离上右下左的位置
③float流、流动,left向左流动,right向右流动
④clear:both清流、
⑤z-index分层
八、其他
①display隐藏属性。none隐藏、block显示。不占位置。可以使用display:inline-block改变span、a标签的大小
②visibility隐藏hidden。隐藏后占位置
③overflow超出隐藏hidden。
④透明opacity:0.5;-moz-opacity:0.5;filter:alpha(opcaity=50)
⑤圆角border-radius:5px;
⑥box-shadow:20px 20px 10px white;(左、下、隐约的大小、颜色)
⑦box-reflect:文字图片倒影
1、方向above上方,below下方,left左侧,right右侧
2、offset偏移距离,百分比定义。默认值为0
3、mask-box-image定义遮罩图像,该图像将覆盖投影区域。如果省略该参数值,则默认为无遮罩图像。