样式初始化，省略号，选择器权重，外边距合并，行高
样式初始化，省略号，选择器权重，外边距合并
样式初始化
为何要样式初始化？
1.浏览器兼容性（不同的浏览器给标签的默认样式有细微的区别）
2.页面会出现差异/错乱
如何初始化才好？那个标签需要初始化，就给那个。
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
margin:0;
padding:0;
}
/*div,li默认无marging和padding，ul的padding-left默认有40px,把ul中的padding去掉，也就没有了，但其list-style仍然在
body标签默认有margin:8px;
p标签默认有margin:16px 0 16px 0;
h1-h6默认有着不同的margin（上下）
ul默认有margin:16px 0 16px 0;
padding-left:40px;
ol与ul一样
dl默认默认有magin：16px 0 16px 0;
dt默认无margin和padding
dd有margin-left:40px;
*/
ul,ol{
list-style:none;
}
a{
color:#000;
text-decoration: none;
}
style>
省略号
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html+css">
<meta name="description" content="">
<title>title>
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
a{
color:#000;
text-decoration: none;
}
div{
width: 200px;
height: 100px;
/* 省略号三步走 缺一不可 */
overflow: hidden;
/* 文本不换行 */
/* white-space:nowrap; */
/*文本溢出显示省略号*/
text-overflow:ellipsis;
/*下面这三行代码是设置在第几行出现省略号*/
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
border:1px solid red;
}
/*
text-overflow:
clip --不显示省略号标记
ellipsis ---文本溢出显示省略号
把 文本限制在一行( white-space:nowrap; ) 这一行是有限制宽度(width),并且溢出部分
要隐藏起来 ( overflow: hidden; ) 然后出现省略号 ( text-overflow:ellipsis; )
*/
style>
head>
<body>
<div>
阿三大啊飒飒的打撒飒飒大苏打大大大啊啊啊啊啊啊呃呃呃呃呃呃呃呃呃呃呃呃嗯嗯嗯嗯嗯嗯分四十三的手动定
div>
body>
html>
选择器权重问题
<style>
/*
id > class > 标签选择器
id数: id数越多 权重越大
id数一样: 看class数 越多 权重越大
class数一样 : 标签选择器 越多 权重越大
*/
style>
外边距合并（上下）
外边距合并的两种情况:
1.相邻：谁的外边距大就显示谁的外边距值，一样就合并（就仅显示一个值）
解决方法：中间加一个元素设置border:1px solid transparent;
然后就各显各的
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html+css">
<meta name="description" content="">
<title>title>
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
a{
color:#000;
text-decoration: none;
}
.stu{
width:100px;
heigth:100px;
margin-bottom:50px;
background-color:pink;
}
.stu1{
border:1px solid transparent;/*如果不设置这一步，坤与菜十二
的margin会合并，相邻只有50px，而不是100px。但是设置之后总相邻距离为102px*/
}
p{
width:100px;
height:100px;
margin-top:50px;
background-color:skyblue;
}
style>
head>
<body>
<div class="stu">坤div>
<div class="stu1">div>
<p>菜十二p>
body>
2.嵌套：谁的外边距大就显示谁的外边距值
解决问题方案:
1.给父亲添加边框线 : border:1px solid red;
2. 给父亲添加padding；
3.给父亲添加 overflow:hidden;
然后就各显示各的
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html+css">
<meta name="description" content="">
<title>title>
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
a{
color:#000;
text-decoration: none;
}
.stu{
overflow:hidden;
width: 200px;
height: 200px;
margin-top:50px;
/* padding:10px; */
background-color: pink;
/* border:1px solid red; */
}
p{
width: 100px;
height: 100px;
margin-top:60px;
background-color:skyblue;
}
style>
head>
<body>
<div class="stu">
<p>菜十二p>
div>
body>
html>
行高
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="html+css">
<meta name="description" content="">
<title>title>
<style>
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd{
margin:0;
padding:0;
}
ul,ol{
list-style:none;
}
a{
color:#000;
text-decoration: none;
}
body{
font: 16px/1.5;/*整体行高设置*/
}
/*
浏览器默认字体大小 -- 16px
浏览器默认字体最小的大小--12px
行高: 一行文字的最小高度
line-height
目的: 设置文字 行与行 之间的距离
行间距: 两行文字之间的距离
半行间距:1/2的 行间距(行间距的一半)
如何计算: 行高 = 字体大小 + 行间距
***
行高--整体设置---统一
在需要修改行高的地方单独设置行高
怎么重置行高?
整行文字的高度(新的行高) = 字体大小 * 行高倍数值
文字垂直居中
行高的大小和我们的盒子高度一致
*/
.stu1{
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: pink;
}
.stu2{
background-color:yellow;
}
div{
width:100px;
font-size:30px;
/* line-height: 30px; */
}
style>
head>
<body>
<p class="stu1">南相p>
<p class="stu2">白菜p>
<div>一行文字的高度div>
body>
html>