笔记整理和知识重点梳理
01行高：
实际案例
div{
height: 100px;
background-color: green;
}
p{
text-align: center;
line-height: 100px;
}
</style>
<div><p>大威天龙=</p></div>
</body>
***重点注释***： 什么是行高？
一行文字实际占用的高度。
取值方式：px，百分比。
百分比：按照默认的字体大小取值。
特殊用法：
要让一行文字垂直居中，可以将行高设置为盒子高。（多行文字失效
行高，字号一般都是偶数。谷歌浏览器最小可以设置12px，默认是16px
-->
## 02字号字体：
```css
p{
border: 1px solid red;
font:italic bold 48px/60px "Consolas";
```}
<div>
<p>hello,css!三十功名尘与土</p>
</div>
*******重点注释*****
/* font-size: 48px;
font-family: "宋体";
line-height: 60px; */
/* font:24px/60px "华文彩云","华文行楷"; */
/* 网页中，中文主要使用的字体：微软雅黑，宋体，黑体。
英文：Arial，Consola
英文在前，中文在后。
微软雅黑：Microsoft Yahei
宋体：SimSun
黑体：SimHei
*/
/* 取值方式：数字，单词
数字：100-900；
单词：lighter normal,bold,bolder
fwb:font-weight: bold;
fw:font-weight: normal;
*/
/* italic :跟字体样式有关系，oblique斜体 */
/* font: 30px/60px "Consolas"; */
border: 1px solid red;
font:italic bold 48px/60px "Consolas";
/* 必须写的两个值 字号 字体 */
}
/* .italic{
font-style: italic;
}
.oblique{
font-style: oblique;
} */
# 03 字体大小：
格式：
/* 取值：单词，em，px，百分比 */
/* font-size: xx-small; */
/* font-size: xx-large; */
/* font-size: 48px; */
/* font-size: 1em; */
# 04段落：
div{
background-color: pink;
}
p{
text-align: left;
text-indent: 2em;
color: green;
text-transform: lowercase;
}
**重点注释：**
/* width: 800px; */
/* 设置文本居中方式 */
/* 首行文本缩进 em px 百分比 *
/* 文本修饰
none，正常，默认值。
underline:下划线。
overline:上划线。
line-through:中划线。
*/
/* text-decoration: line-through; */
/* 单词间间距： 中文无效。 */
/* word-spacing: 48px; */
/* 单个字母间的间距 */
/* letter-spacing: 48px; */
/* 大小写转换 */
## 基线：
```css
*{
margin: 0;
padding: 0;
}
div{
border: 1px solid red;
}
img{
/* 基线对齐 */
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
<img src="img/hb.jpg" alt="">xxxxyyy
06合模型： div{
width: 400px;
height: 400px;
padding: 50px;
background-color: pink;
}
标准盒模型
什么叫盒子？
一个元素在页面中真实占据的位置。
五个部分：内容的宽，内容的高，内边距，边框，外边距。
宽：width px；
高：height px；
定义的内容的宽和高。
padding:
内容和边框之间的距离。
内边距是可以被背景色渲染的
07 padding: padding:
内容和边框之间的距离。
内边距是可以被背景色渲染的。
可以给单边设置内边距:
padding-left: 50px;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 60px;
四值法：
单值：上下左右。
双值：上下 左右。
三值：上 左右 下
四值：上 右 下 左 顺时针。
-08边框：/* border: 5px solid red; */
/* border-width: 10px;
border-style: solid;
border-color: red; */
/* border-left: 5px solid red;
border-right: 5px dashed green;
border-top: 5px dotted blue; */
/* border:5px double red; */
/* 三要素写法：
宽度，样式，颜色
*/
/* 单一方向设置
倒三角： <style>
div{
width: 0px;
height: 0px;
border: 20px solid white;
border-bottom: none;
border-top-color: green;
}
/* 1.设置边框，然后将内容宽高设置为0
2.取消底部边框。
3.将左右边框的颜色改为white。（透明色）
*/
</style>
000margin：
/* 外边距
两个盒子之间的距离。
*/
div{
width: 200px;
height: 200px;
}
.div1{
background-color: teal;
margin-bottom: 20px;
}
.div2{
background-color: pink;
}
</style>
补充：
/* p,ul{
margin: 0;
padding: 0;
} */
div{
width: 200px;
height: 200px;
/* background-color: pink; */
/* 水平居中（必须有宽度） */
/* margin: 0 auto; */
overflow: hidden;
border: 5px solid red;
/* css：层叠特效 */
/* border-bottom: 10px dashed green; */
}
.div1{
}
.div2{
margin: 20px;
width: 100px;
height: 100px;
/* background-color: green; */
border: 5px solid green;
/* margin-top: -30px; */
}
</style>
</head>
<body>
-假如有一个padding/border/margin 与其他的三条边不同，其他三条边一样，这个时候我们设置总体样式，再单独去设置它的样式
<!-- 有一些标签会有默认的样式，比如默认的margin。
*{
margin: 0;
padding: 0;
<div class="div1">
<div class="div2"> </div>
</div
<!-- <p>人面不知何处去，桃花依旧笑春风</p>
</body>
</html>
父子盒模型
<style>
.div1{
width: 300px;
height: 300px;
border: 2px solid red;
}
.div2{
width: 300px;
height: 200px;
border: 10px solid green;
}
</style>
# 补充项
## 1.技巧
假如有一个padding/border/margin 与其他的三条边不同，其他三条边一样，这个时候我们设置总体样式，再单独去设置它的样式。
```css
border: 5px solid red;
/* css：层叠特效 */
border-bottom: 10px dashed green;
2.清除默认样式
有一些标签会有默认的样式，比如默认的margin。
我们可以使用：
*{
margin: 0;
padding: 0;
}
4.高度
我们一般是不设置高度的，而是用内容去撑开盒子的高。
内容的多少不是由咱们决定的，使用自适应可以避免大片留白和内容溢出。
5.溢出内容隐藏
overflow: hidden;
6.外边距塌陷
垂直方向上相邻的两个盒子，如果都有外边距，则外边距相交的地方会出现外边距重合现象，也叫作外边距塌陷。
取值：margin相遇的部分，并不是两个margin值的和，而是为最大值。
如果两个margin值为负数，取值为绝对值最大的。
如果一正一负，结果为两者之和。
7.居中方法
文字居中：
水平居中：
text-align:center
垂直居中：
- 单行文本 line-height等于盒子的高。
盒子居中
水平居中：
margin: 0 auto;
垂直居中
给盒子添加一个上下一样的padding。
8.父子盒模型
真实的宽：内容的宽+左padding+左border+右padding+右border
真实的高：内容的高+上padding+下padding+上border+下border
子盒子的宽度若不设置默认为父盒子的内容的宽。
若设置了边框和内边距，父盒子的内容宽减去边框和内边距的大小，剩下的就是子盒子的宽度。
961
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
