宽度
- min-width
最小宽度 对缩小页面文本有个最小限制 - max-width
最大宽度 对放大页面文本有个最大限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hd{
min-width: 970px;
max-width: 1500px;
}
.container>div{
display: inline-block;
width: 100px;
border: 2px solid blueviolet;
}
</style>
</head>
<body>
<div class="hd">
<div class="container">
<div>dov1</div>
<div>dov2</div>
<div>dov3</div>
<div>dov4</div>
<div>dov5</div>
</div>
</div>
</body>
</html>
居中
- text-align
文本水平居中 - line-height=height
文本垂直居中 - vertical-align
单元格对其方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
display: inline-block;
margin-right: 40px;
vertical-align: top;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h3>kehu</h3>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
<li>li6</li>
</ul>
</div>
<div class="box">
<h3>kehu</h3>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</div>
<div class="box">
<h3>kehu</h3>
<ul>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</div>
</div>
</body>
</html>
选择器
-
通配符(*)
-
标签选择器
选择特定的标签 -
类名选择器
选择有类名的选择器 -
id选择器
选择拥有id并且匹配的标签 -
逗号选择器
满足逗号左边 或者逗号右边都算 -
空格选择器
满足嵌套关系
空格后面是空格前面的子元素(多代) -
大于选择器
满足嵌套关系
大于号后面是前面的子元素(一代) -
加号选择器
满足并列关系
加号后面单个元素紧临前面的元素 改变后面的元素 -
~选择器
满足并列关系
~后面满足的元素都可以改变 -
[属性名]{}
拥有属性名的标签 -
[属性名=“val”]{}
拥有属性名并且值为val的标签 -
[属性名^=“val”]{}
拥有属性名并且值以val开头 -
[属性名$=“val”]{}
拥有属性名并且值以val的结尾 -
[属性名*="val“]{}
有属性名并且包含val内容 -
[属性名~="val“]{}
拥有属性名并且值其中一个等于val
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通配符 */
*{
margin: 0;
padding: 0;
}
/* 标签选择器 */
ol{
font-weight: 800;
}
/* 类名选择器 */
.container{
background-color: rgb(124, 209, 205);
}
/* id选择器 */
#link{
font-size: 30px;
}
/* 逗号选择器 */
.li2,.li3{
text-decoration: none;
color: black;
}
/* 空格选择器 */
.container span{
font-size: 30px;
font-family: 宋体;
}
/* 大于选择器 */
.container>ul{
margin-left: 20px;
}
/* 加号选择器 */
.container li+li{
border: 1px solid black;
}
/* ~选择器 */
.container li~li{
list-style: none;
}
/* [属性名]{} */
[p]{
color: brown;
}
/* [属性名=“val”]{} */
[p="d1"]{
font-size: 25px;
}
/* [属性名^="val"]{} */
[p^="sp"]{
color: red;
}
/* [属性名$="val"]{} */
[p$="1"]{
font-weight: 700;
}
/* [属性名*="val“]{} */
[class*="span"]{
border: 1px solid lightblue;
}
/* [属性名~="val“]{} */
[p~="span"]{
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<span>文本</span>
<ul>
<li id="link"><a href="">li1</a></li>
<li><a class="li2" href="">li2</a></li>
<li><a class="li3" href="">li3</a></li>
<span>文本</span>
<li><a href="">li4</a><span>文本</span></li>
<li><a href="">li5</a></li>
<li><a href="">li6</a></li>
</ul>
</div>
<ol>ol</ol>
<p p="p1">p1</p>
<p p="d1">p2</p>
<p p="p2">p3</p>
<p>p4</p>
<span class="span1">span1</span>
<span class="span2">span2</span>
<span p="span span3">span3</span>
<span p="dispan span">span4</span>
</body>
</html>
(代码请自行实现)