第三天 标签 样式
标签
标签的划分
- 块级元素：h1-h6 、p、 div、ul、ol、li、dl、dt、dd
- 写宽、高可以起作用
- 独占一行
- 排列方式：上下
- 注意：文字类的元素内不能使用块级元素。 p 标签主要用来存放文字，因此p里面不能放块级元素。
- 行内元素：span、a、b、strong、em、i、del、s、u、ins
- 写宽、高不起作用，它的大小是由自身内容决定的
- 可共占一行
- 排列方式：左右
- 行内块元素：img、video、audio
- 写宽、高可以起作用
- 可共占一行
- 排列方式：左右
标签汇总
- 标题：h1-h6
- 段落：p
- 大盒子：div
- 小盒子：span
- 图片：img
- 超链接：a
- 格式化标签：b、strong、em、i、del、s、u、ins
- 列表:ul、ol、li、dl、dt、dd
- 音视频：audio、video
display的几个值
- inline ：转换成行内元素 （一般不用，如果需要直接用行内元素即可）
- block：转换成块级元素
- inline-block: 转换成行内块
- none：消失
面试题：让一个元素消失有几种办法？
- display：none
- visibility：hidden；通过改变可见性
- opacity：0 ；通过改变透明度，取值范围：0~1
- 定位的元素通过层级来控制（z-index）
- 可以通过给元素设置margin负值调到屏幕一侧
- 宽高等于0
面试题：display和visibility、opacity都可以让元素消失，有啥区别？
display：none 是彻底的消失，不占位置，但是visibility：hidden;和opacity:0;虽然看不见了，但是位置还在。
清除列表默认格式
- *是通配符选择器，代表选中页面中所有的元素，下面代码的意思就是，把页面中所有元素默认自带的margin值和padding值都归为0.
*{
margin:0;
padding:0;
}
- 清除列表前面默认的样式
ul,ol{
list-style: none;
}
- 清除a标签下划线
a{
text-decoration: none;
}
- 表示一个元素的宽度（width） 高度（height）背景颜色：background-color
<style>
div{
width:200px;
height:200px;
background-color:red;
}
</style>
- 文字缩进：text-indent
- text-indent后面可以跟具体的像素值，也可以跟em，如果是2em的时候代表缩进2个字的距离。
<style>
p{
/* text-indent: 10px; */
text-indent:2em;
}
</style>
- 文字大小：font-size
p{
font-size:26px;
}
- 文字颜色：color
- 文字字体：font-family
如果是中文字体，或者是英文字体由多个单词组成需要加单引号或者双引号 font-family:"宋体","Times New Roman",Georgia,Serif;
- 控制文字粗细：font-weight
- 400 正常粗细===normal
- 700 ===bold
- 900 ===bolder 如果用了b、strong，不想让文字加粗，font-weight：normal(400);
<style>
p{
font-weight: bold;
}
b{
font-weight: normal;
}
</style>
- 控制文字倾斜 :font-style
- font-style:italic; 让文字倾斜
- font-style:normal; 让文字正常
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span{
font-style: italic;
}
i{
font-style:normal;
}
</style>
</head>
<body>
<span>span</span>
<i>斜体</i>
</body>
</html>
- 让块级元素水平居中：margin:0 auto;
div{
width:100px;
height:100px;
background:green;
margin:0 auto;
}
- 行高：line-height
- 让文字垂直居中：height的值和line-height的值相等
li{
height:35px;
line-height:35px;
}
- 边框：border
- dashed：虚线
- solid：实线
<style>
div{
width:200px;
height:200px;
/* border:2px solid darkturquoise; */
border:2px dashed darkturquoise;
}
</style>
