列表样式，定位，元素居中学习
1.列表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表样式</title>
</head>
<body>
<style>
*{
padding: 0;
margin:0;
}
/* ul {
margin-top:0;
margin-bottom:0;
padding-left: 0;
}写上就好不用那么麻烦 */
ul li {
list-style-image: url(1.png);
list-style-position: inside;
/* list-style: none; 不要*/
}
</style>
<ul>
<!-- ul>li{item$}*5 -->
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
</body>
</html>
2.定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
/* :root {
border:1px solid #000
} */
h1 {
background-color: coral;
/* 相对定位 这时这个元素有了一个别名了：定位元素*/
/* 定位元素；只要这个元素的position不是static就可以充当定位元素 */
/* 相对定位，元素相对于自己在文档流中的原始位置进行偏移，此时这个元素仍然在文档流中 */
position: relative;
left:1em;/*32px */
top:2em;
}
</style>
</head>
<body>
<!-- <h1>草莓很好吃</h1>
<h2>想吃芒果味果冻</h2> -->
<div class="parent">
<div class="box"></div>
</div>
<style>
.box {
width: 10em;
height: 10em;
background-color: brown;
}
.parent {
width: 16em;
height:16em ;
border-color: 5px solid #000;
/* 转为定位元素 */
/* position: relative; */
}
.box {
/* 绝对定位总是相对距离它最近的上一级定位元素进行定位，并逐级上升 */
/* position:absolute; */
position:fixed;
left: 2em;
top: 2em;
}
body{
/* 转为定位元素 */
position: relative;
}
/* 固定定位：是绝对定位的一个特例，任何时候，它总是相对于html/body进行定位 */
</style>
</body>
</html>
3.元素居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素具中问题</title>
<style>
.box{
width: 15em;
height: 15em;
background-color: aqua;
}
.box{
/* 水平居中 */
text-align: center ;
/* 垂直居中 */
line-height: 15em;
}
.parent{
width: 25em;
height: 25em;
background-color: lightcoral;
border: 1px solid;
/* 转为定位元素 */
position: relative;
}
.box{
/* 水平居中 */
/* margin: 5em 5em 5em 5em; */
/* margin: 5em; */
/* margin-left: 5em; */
/* margin-left: auto;
margin-right: auto;
垂直失效
margin-top: auto;
margin-bottom: auto; */
}
/* 使用固定定位可以快速实现：块级元素在另一个块中的水平垂直居中 */
.box{
/* 绝对定位 */
position: absolute;
/* 先设置一个可定位的空间 */
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<!-- <div class="box">今天天空好蓝呀</div> -->
<div class="parent">
<div class="box"></div>
</div>
</body>
</html>
