Artigo Diretório
-
- 1
- 2. Existem vários atributos de exibição, a saber
- 3. Faça esses dois divs dispostos em paralelo e igualmente divididos e sem margens
- 4
- 5. Um contêiner tem uma largura de 400 px e uma altura de 100 px, de modo que o texto seja centralizado horizontal e verticalmente
- 6. Faça o elemento horizontalmente e verticalmente centralizado no elemento
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. Existem vários atributos de exibição, a saber
nenhum, embutido, bloco, bloco embutido
3. Faça esses dois divs dispostos em paralelo e igualmente divididos e sem margens
<div class="box">
<div class="box_l"></div>
<div class="box_r"></div>
</div>
4
<script>
(window.foo||(window.foo='bar'));
</script>
5. Um contêiner tem uma largura de 400 px e uma altura de 100 px, de modo que o texto seja centralizado horizontal e verticalmente
<div>我是一行文字,需要水平和垂直居中</div>
</body>
<style>
div{
border: 1px solid black;
/* 上下垂直居中用height=line-height */
height: 100px;
line-height: 100px;
/* 水平居中 */
text-align: center;
}
6. Faça o elemento horizontalmente e verticalmente centralizado no elemento
<!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>