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.display的属性有几种，分别是
none,inline,block,inline-block
3.使这两个div平行排列均分且无边距
<div class="box">
<div class="box_l"></div>
<div class="box_r"></div>
</div>
4.
<script>
(window.foo||(window.foo='bar'));
</script>
5.一个容器宽度400px,高度100px,使文字水平垂直居中
<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>