属性：
字体，文本
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>
搜索
复制
原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/278293.html