1、设置元素宽高
设置元素宽度width
width的取值主要有：像素值、百分比、auto
例如：
width:300px; 设置宽度为300像素
width:50%; 设置宽度为该元素所在容器宽度的50%
width:auto; 相当于100%，但如果元素设置了浮动则是由元素里面的内容来决定宽度。
设置元素高度height
height取值主要有：像素值、百分比、auto
height属性默认值为auto，也就是有内容决定元素高度。
最小宽度min-width和最大宽度max-width
取值方式与width一样，当width没有固定像素值时，可以用这两个属性设定width的范围。
最小高度min-height 最大高度max-height
取值方式与height一样，当height没有固定像素值时，可以用这两个属性设定height的范围。
2、元素的实际宽高
网页元素实际占用的宽度=width+左右padding+左右border+左右margin
网页元素实际占用的高度=height+上下padding+上下border+上下margin
如下图所示：
3、溢出处理
当元素里面的内容超出元素的宽高范围时，我们需要考虑溢出部分如何处理。
设置溢出处理方式overflow
overflow属性的取值如下：
hidden 溢出部分隐藏
scroll 右边和底部出现滚动条，滚动展示元素内的超出部分。
auto 自动，内容超出时才出现滚动条，没有超出则不出现。
visible 默认值，溢出部分照常显示。
4、元素的显示属性
设置元素的显示属性 display
display属性常用取值如下：
block 块元素 默认是独占一行，可以设置宽高、边距、行高等 如：<p> <h1>
块元素的width和height默认为auto。当宽度为auto时，尽量占最大的宽度，高度为auto时，高度由内容决定。
inline 行内元素 不会独占一行，不能设置宽高，行高。如：<a> <span>
inline-block行内块元素 不独占一行，能设置宽高,行高等，如：<img/>
none 不显示
设置块元素对齐方式
块元素宽度比容器小时，默认是靠左对齐
左右外边距设为auto即可居中对齐 margin-left:auto;margin-right:auto;
左外边距auto有外边距为0，即可右对齐 margin-left:auto;margin-right:0px;
块元素内的文字垂直对齐
通过line-height与height可调整块级元素内文字的垂直位置，行高与高度一致，文字就会垂直居中（仅适合单行文字）。
5、html标记的默认样式
大部分HTML标记都自带了一些样式，例如：
P标记有上下外边距
H标记有上下外边距和文本加粗样式
A标记有下划线
body 标记默认有左右margin(有些浏览器是padding)
用css可以随意覆盖标记的默认样式
例如：
bordy{maring:0px;padding:0px;}
如果给<span>标记加<p>标记一样的样式，就可以拿它当<p>标记用，例如：
span{display:block;margin:10px 0px;}
6、用浏览器审查网页元素
新版主流浏览器一般都带了审查网页元素的功能，对于网页代码的调试非常有用。鼠标右键点击网页上的某个元素，然后点“检查元素”（推荐使用Google浏览器、火狐浏览器）。
查看html文档结构
修改元素的属性和内容
查看或修改元素的css样式
查看元素占用的宽、高、内外边距
添加新的网页元素
添加新的样式代码
查看样式代码的存放位置
在线咨询