标签：sda 像素 垂直 选择 显示 宽度 char strong 1.7
在标签上设置style属性
background-color:red;
height: 48px;
...<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color:red;height: 48px;">dd</div>
<div></div>
<div></div>
</body>? #id{属性:值}
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color:red;
height: 48px;
}
#i2{
background-color:red;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">dd</div>
<span>ff</span>
<div id="i2">ww</div>
<div>ff</div>
</body>? .class{属性:值}
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color:blue;
height: 48px;
}
</style>
</head>
<body>
<div>dd</div>
<span class="c1">ff</span>
<div>ww</div>
<div class="c1">ff</div>
</body><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color:blue;
height: 48px;
}
</style>
</head>
<body>
<div>dd</div>
<span>ff</span>
<div>ww</div>
<span>ff</span>
</body>? .c1 .c2 div{属性:值}
连接方式:空格
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 div{
background-color:blue;
height: 48px;
}
</style>
</head>
<body>
<div>dd</div>
<span class="c1">
<div>111</div>
</span>
<div>ww</div>
<span>ff</span>
</body>? #i1,#i2 {属性:值}
连接方式:逗号
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1,.c1,#i2{
background-color:red;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">dd</div>
<span class="c1">ff</span>
<div id="i2">ww</div>
<div>ff</div>
</body>对选择到的标签再通过属性进行一次筛选
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[n="alex"]{width:100px;height:200px}
input[type="password"]{width:100px;height:100px}
</style>
</head>
<body>
<input type="text" n="alex">
<input type="password">
</body>标签上的style优先,其它按照编写顺序,就近原则
<link rel="stylesheet" href="style.css"/>/* ......... */
border: 1px solid red
边框1像素宽,实体,红色border-left
width可以使用百分比,像素...
若height的父元素height像素固定,也可使用百分比.
text-align:center 水平方向居中
line-height垂直方向根据标签高度. 等于标签高度,则显示居中
font-weight 字体加粗
font-size 字体大小
color 字体颜色让标签飘起来,块级标签也可以堆叠
<body>
<div style="width: 20%;background-color: red;float: left;">dsasdas</div>
<div style="width: 80%;background-color: black;float: left;">dsasdas</div>
</body>老子管不住的时候,加
<body>
<div style="width: 300px;border: 1px solid red">
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
<div style="clear: both;"></div>
</div>
</body>块级标签转为行内标签
<body>
<div style="background-color: red;display: inline">asdf</div>
<span style="background-color: red;"">asdf</span>
</body>行内标签转换为 块级标签
<body>
<div style="background-color: red;">asdf</div>
<span style="background-color: red;display: block">asdf</span>
</body>行内标签: 无法设置高度/宽度/margin/padding
块级标签: 设置高度/宽度/margin/padding
display:inline-block;
具有inline,默认自己有多少占多少
具有block,可以设置高度/宽度/margin/paddingdisplay:none
让标签消失margin:外边距
margin:0 auto;
0 距离上下的间距是0
auto 当前div居中padding:内边距
标签：sda 像素 垂直 选择 显示 宽度 char strong 1.7
原文地址：https://www.cnblogs.com/chenych/p/8847570.html
