一、边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="border: 1px solid red">abc</div> <div style="border: 1px dotted blue">abc</div> </body> </html> #style="border: 1px //边框1像素 #solid //实线； dotted //虚线；还可以设置左、右； #颜色
二、其他样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 45px; 80%; border: 1px solid red">abc</div> <div style="height: 45px; 200px; border: 1px solid red; font-size: 20px; text-align: center; line-height: 45px; font-weight: bold; ">abc</div> </body> </html> height //高度,百分比 width //宽度像素，百分比 text-align:ceter //水平方向居中 line-height //垂直方向根据标签高度居中 color //字体颜色 font-size //字体太小 font-weight //字体加粗
三、float样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style=" 20%; background-color: red; float: left">1</div> <div style=" 80%; background-color: blue; float: right">2</div> </body> </html> float //让标签飘起来，块级标签也可以堆叠；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 38px; background-color: #dddddd; line-height: 38px; } </style> </head> <body style="margin: 0 auto"> #去掉顶部空隙 <div class="pg-header"> <div style="float: left;">收藏本站</div> <div style="float: right;"> <a>登录</a> <a>注册</a> </div> </div> <div style=" 300px; border: 1px solid red;"> <div style=" 96px; height: 30px; border: 1px solid green; float: left; "></div> #div会逐个拼接； <div style=" 96px; height: 30px; border: 1px solid green; float: left; "></div> <div style=" 96px; height: 30px; border: 1px solid green; float: left; "></div> <div style=" 96px; height: 30px; border: 1px solid green; float: left; "></div> <div style=" 96px; height: 30px; border: 1px solid green; float: left; "></div> <div style=" 96px; height: 30px; border: 1px solid green; float: left; "></div> <div style="clear: both"></div> </div> </body> </html>
四、display样式
行内标签：无法设置高度，宽度，padding margin 块级标签：可以设置高度，宽度，padding margin display:none； //让标签消失 display:inline； //让块级标签变成行内标签 display:block； //让行内标签变成块级标签 display:inline-block； //具有inline默认自己有多少占多少； //具有block，可以设置高度，宽度，padding margin； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: red; display: inline">abc</div> <span style="background-color: red; display: block">abc</span> </body> </html>
五、内外边距
margin //外边距
padding //内边距