属性:
字体,文本
font-size :字体大小
color :文本颜色
text-align :对其方式
line-height :行高
背景:
background:
边框:
border :设置边框,符合属性
尺寸:
width:宽度
height:高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ color: #FF0000; font-size: 30px; text-align: center; line-height: 100px; border: 1px solid red; } div{ border:1px solid red; height: 200px; width: 200px; background: url("img/logo.jpg"); } </style> </head> <body> <p>汆子嬉水</p> <div>黑马程序员</div> </body> </html>
CSS_属性2_盒子模型
盒子模型∶控制布局
margin:外边距padding :内边距
默认情况下内边距会影响整个盒子的大小
box-sizing: border-box;设置盒子的属性,让width和height就是最终盒子的大小
float:浮动
left
right
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ border: 1px solid red; width: 100px; } .div1{ width: 100px; height: 100px; /*margin: 50px;*/ } .div2{ width: 200px; height: 200px; padding: 50px; box-sizing: border-box; } .div3{ float: left; } .div4{ float: left; } .div5{ float: right; } </style> </head> <body> <div class="div2"> <div class="div1"></div> </div> <div class="div3">aaa</div> <div class="div4">bbb</div> <div class="div5">ccc</div> </body> </html>
搜索
复制