一、html常用标签
1.文本标签
1.1 strong
着重阅读,也可以理解为加粗效果
<p>
这是一个<strong>测试页面</strong>
</p>
2.字符实体
2.1 空格
2.2 一个中文宽度实体
 
例子
<h3>用户名</h3>
<h3>密 码</h3>
二、CSS
1.选择器
标签、类、id选择非常常用,前边的文档写过了,不在记录了
1.1 后代选择器
子标签 子子标签 子子子标签都是后代选择器
ul li {
color:red
}
1.2 子代选择器
子代选择器只选择 下边1层
ul > li {
color:red
}
更多写法
.box > li {}
.box > li > li {}
#box > li {}
p.box > li {} #是p标签并且类选择是box的子代是li的
1.3 兄弟选择器
相邻兄弟选择器
当前元素div下边的相邻的 p元素。只是下边1个。 上边的不包括
div + p {}
通用兄弟选择器
~ 代表下边的所有
div ~ * {} div下边的所有标签
div ~ p {} div下边的所有p标签
1.4 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 属性选择器 */
[title] {color: gold}
[href] { color:red}
</style>
</head>
<body>
<p>
<div title="哈哈哈">你好</div>
<a href="www.baidu.com">百度一下</a>
</p>
</body>
</html>
2.文本属性
2.1 水平居中
text-align :center 文本水平居中
div {
background-color: green;
text-align: center;
}
2 2 垂直居中
如果要垂直居中 让div height=line-height
div {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: green;
}
3.列表属性
取消列表的默认前边序号
ul,ol {
list-style-type:none;
}
4.鼠标样式
div {
width: 100px;
height: 100px;
background-color: green;
/* 鼠标移动到盒子的时候会变成小手 */
cursor: pointer;
}
5.元素的显示模式
display属性
dispaly: none 还可以隐藏元素
div {
width: 100px;
height: 100px;
background-color: red;
/* 块元素变成 行内块元素 */
display: inline-block;
}
6.元素之间的空白
元素之间的空白缝隙会出现在 行内元素和 行内块元素之间 ,块元素不会出现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.d1 {
background-color: red;
}
.d2 {
background-color: green;
}
.d3 {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 这样就没有空格 -->
<span class="d1">新闻</span><span class="d2">运动</span><span class="d3">音乐</span>
<!-- 这样就就有空格,这是因为html将换行符是视为一个空格-->
<span class="d1">新闻</span>
<span class="d2">运动</span>
<span class="d3">音乐</span>
</body>
</html>
解决办法:
在html中 空格也是一个字符,利用front-sze:0 所有的文字都会消失的特性,在父标签中 将所有字体设置为0,这时候空格也就没有了,在将要显示的文字设置指定的大小,这样就可以去除空格了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
font-size: 0;
}
.box span {
font-size: 16px;
}
.d1 {
background-color: red;
}
.d2 {
background-color: green;
}
.d3 {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 这样就没有空格 -->
<div class="box">
<span class="d1">新闻</span>
<span class="d2">运动</span>
<span class="d3">音乐</span>
</div>
</body>
</html>
行内块元素之间的缝隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0px;
margin: 0px;
}
.box {
font-size: 0;
list-style-type: none;
padding: 0px;
}
.box li {
font-size: 16px;
display: inline-block;
}
.d1 {
background-color: red;
}
.d2 {
background-color: green;
}
.d3 {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 这样就没有空格 -->
<ul class="box">
<li class="d1">地图</li>
<li class="d2">新闻</li>
<li class="d3">运行</li>
</ul>
</body>
</html>
三、CSS3
1.新增盒子大小属性
box-sizing: 它有两个值
content-box 默认属性 会随着边框、内边距的增加整体盒子会变大
border-box 盒子定义的多大就是多大,不会因为边框 内边距的增加而盒子变大。
2.新增盒子边框属性
border-radius 显示圆角效果
.box {
width: 200px;
height: 200px;
padding: 5px;
border: 5px green solid;
border-radius: 50px;
}
3.伸缩盒模型Flex
3.1 基本概念
display: flex
父标签称为: 伸缩容器
子标签称为: 伸缩项目
一个标签一旦称为伸缩项目 不论它是行级元素还是块元素 全部会变成块元素,也就是说可以使用宽高属性。
3.2 伸缩模型实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 600px;
height: 600px;
background-color: skyblue;
/* 父标签变成了伸缩容器 */
display: flex;
}
/*行级元素 span 变成了伸缩项目 就可以使用宽高了*/
span {
height: 100px;
width: 100px;
background-color: red;
border: 1px black solid;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
4.伸缩盒模型-主轴换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 600px;
height: 600px;
background-color: skyblue;
display: flex;
/*主轴换行,当伸缩项目的个数超出伸缩容器一行内容容纳的个数时,自动换行,而不是压缩伸缩项目的盒子大小*/
flex-wrap: wrap;
}
span {
height: 200px;
width: 200px;
background-color: red;
border: 1px black solid;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
5.伸缩盒模型-主轴对齐方式
justify-content:
space-around 伸缩项目均匀的分布在一行,项目之间的距离是边缘距离的两倍
space-between: 伸缩项目边缘没有距离,项目之间的距离是相等的. 这种用的比较多
space-evenly: 伸缩项目完全均匀的分布在一行
6.伸缩和模型的水平垂直居中
方案1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 600px;
height: 600px;
background-color: skyblue;
display: flex;
/*水平居中*/
justify-content: center;
/*垂直居中*/
align-items: center;
}
span {
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
</div>
</body>
</html>
方案2 比较简单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box {
width: 600px;
height: 600px;
background-color: skyblue;
display: flex;
}
span {
height: 100px;
width: 100px;
background-color: red;
/*伸缩项目 margin自动,也可以居中*/
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>1</span>
<span>1</span>
</div>
</body>
</html>
7.2D位移 tranform
这里实现了一个盒子在屏幕中间居中的效果。
tranform在做位移时,如果使用百分比位移,这个百分比是自己宽度的百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.outer {
width: 500px;
height: 300px;
background-color: #ddd;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
/*基于绝对定位后的位置 在x轴上向左50%,在y轴上向上50%*/
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="outer">
</div>
</body>
</html>
四、盒子的padding
1.块元素的padding
1.1 复合写法
复合写法,这样的写法父盒子的大小变大。
# 四个方向都是20px
padding: 20px;
# 上下20px 左右30px
padding: 20px 30px;
# 上20 左右30 下40
padding: 20px 30px 40px;
1.2 单方向写法
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
2.行内元素的padding
行内元素,设置左右padding没有任何问题,上下的padding就会有问题。
以下例子就能说明:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outer {
width: 100px;
height: 100px;
background-color: gray;
}
span {
font-size: 20px;
background-color: orange;
padding: 50px 100px;
}
</style>
</head>
<body>
<div class="outer">
</div>
<hr>
<span>hello</span>
<p>测试文字</p>
</body>
</html>
五、盒子的margin
1.子盒子margin的参考点
在盒子嵌套的场景中。
如果父盒子有padding,那么设置子盒子的margin的时候是从内容的边缘开始计算mrgin
如果父盒子没有padding,那么设置子盒子的margin的时候是从父盒子的左上角开始计算
2.设置margin对位置的影响
2.1 设置上和左
如果设置 “上和左” 的margin,不会影响前边的盒子,会影响当前盒子的位置,后边的盒子也会因为当前盒子位置的变化而变化
2.2 设置右和下
如果设置了右和下,上边的和当前的盒子的位置不会发生变化,后的盒子会发生变化
3.行内元素的margin
行内元素设置左右margin正常,上下margin直接无效。padding是上下有问题,不是无效
注意:
在设置行内元素的padding和margin的时候,不要使用上下距离。只使用左右距离
4.margin的取值
margin可以设置负值
5.外边距塌陷问题
5.1 什么是外边距塌陷
在父盒子中,第一个子盒子的上边距离,或者最后一个盒子的下边距,都会作用在父盒子上,这就叫做外边距塌陷
5.2 解决方案
1.给父盒子加padding
2.给父盒子加border
3.父盒子添加css属性 overflow: hidden(推荐)
6.margin合并问题
什么是margin合并:
上边盒子的"下边距" 和下面盒子的"上边距"会合并,如果两个值有大有小则取大值。不论两个值是否相等都不会相加
7.内容溢出处理
如果一个盒子中的内容溢出了盒子内容,可以使用
溢出内容 全部隐藏
overflow: hidden
或者:
溢出内容后会出现滚动条
overflow: auto