記事ディレクトリ
1.1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="demo1">
<img src="./d043ad4bd11373f02efb63adad0f4bfbfbed043f.png" alt="" class="img">
<p class="content1">{最多俩行20排序#333,顶部对齐图片,底部间距8px}</p>
<p class="content2">{12px #666 行高1.2}使用语义化的html标签完成以下布局,考虑模板化和扩展性.容器默认宽度320px,右侧</p>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.demo1 {
width: 320px;
float: left;
}
.demo1:hover {
width: 400px;
}
.demo1 .img {
float: left;
width: 100px;
height: 100px;
}
.content1 {
font-size: 20px;
line-height: 20px;
height: 40px;
overflow: hidden;
color: #333;
margin-bottom: 8px;
}
.content2 {
font-size: 12px;
color: #666;
line-height: 1.2em;
}
</style>
</html>
2.いくつかの表示属性があります。
なし、インライン、ブロック、インラインブロック
3.これらの2つのdivを並列に配置し、均等に分割し、マージンを付けないようにします
<div class="box">
<div class="box_l"></div>
<div class="box_r"></div>
</div>
4.4。
<script>
(window.foo||(window.foo='bar'));
</script>
5.コンテナの幅は400ピクセル、高さは100ピクセルであるため、テキストは水平方向と垂直方向の中央に配置されます。
<div>我是一行文字,需要水平和垂直居中</div>
</body>
<style>
div{
border: 1px solid black;
/* 上下垂直居中用height=line-height */
height: 100px;
line-height: 100px;
/* 水平居中 */
text-align: center;
}
6.要素を要素の水平方向および垂直方向の中央に配置します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="border"><div class="content"></div></div>
</body>
<style>
.border{
width: 200px;
height: 200px;
background-color: aqua;
position: relative;
}
.content{
width: 100px;
height: 100px;
background-color: blueviolet;
position: absolute;
top: 50%;
left: 50%;
/*margin这两个值设置为负的宽高的一半 */
margin-top: -50px;
margin-left: -50px;
}
</style>
</html>