目录
认识css
层叠样式表（Cascading Style Sheets，简写CSS），一种用来为HTML文档添加样式（字体、间距、位置、颜色、角度等显示效果）的计算机语言。
CSS样式：
行内样式(内联样式)、内部样式、外部样式
行内样式：在开始标签的内部可以设置一个叫做style的属性，属性的双引号内存放该元素代码的CSS样式。
内联样式：写在head标签的style标签中，style标签内部存放的就是网页文件中的CSS代码，CSS中的代码注释格式采用的是：/* 注释文字 */
外联样式：在head标签中间新建一个link标签，通过href属性设置外部CSS文件地址。rel是relationship的缩写（指定当前文档与被链接文档的关系），rel=“stylesheet”表示我们引用的是一个样式表（CSS）文件。
选择器参考：https://blog.csdn.net/JBY2020/article/details/109633720
元素类型
类型
块元素（block）：排列顺序是从上至下，可以设置高度，如div，p，from，ul，li，ol，dl，address，fieldset，hr，menu，table
特征：1. 独占一行； 2. 高度由里面的元素撑开； 3. 宽度默认100%(继承父元素宽度) ；4. 可以设置外边距/内边距；5. 可以包裹其他任意元素；6. p标签不可包裹块级元素(只存放文本)
行内元素（inline）：排列顺序是从左至右，不能设置宽高，如span，strong，em，br，img，input，label，select，textarea，cite，可以设置左右内外边距，但不能设置上下内外边距，设置上下内外边距是无效的。
特征：1. 和其他行内元素处于同一行； 2. 不支持宽高；3. 上下外边距无效,auto无效(不支持auto居中)；4. 内边距只对内联元素产生影响.无视块元素；5. 标签之间的空格解析； 6. a标签能包裹块级元素(特殊,区域链接)
行内块元素（inline-block）：排列顺序从左到右，可以设置宽高
特征：1. 本质上是行内元素,具有行内元素的性质；2. 支持宽高；3. 上下外边距有效,auto无效(不支持auto居中) ；4. 内边距只对内联元素产生影响.无视块元素； 5. 标签之间的空格解析；6. img标签不是行内块元素(是行内元素,但是可以设置宽高)
可以在开发者工具栏中查看当前元素属于那种类型：
块元素
content box 内容区：块级元素的width和height值在标准盒模型下，定义了一个块级元素能够存放内容的区域大小，元素的内容从width和height的左上角原点开始排列内容。
border box 边框区：块级元素的border的作用是在元素的内容区外加上一个边框线。边框样式设置参考：https://blog.csdn.net/JBY2020/article/details/109710962
padding box 内边距区：块级元素的padding的作用是在元素的内容区与边框线之间加一个内部间距,用来隔开元素内容和边框线, 使得元素内容更加突出明显, 默认情况下, padding区域的颜色和内容区的颜色保持一致padding也可以单独设置四个方向不同的值, 具体的概念与border相似。
标准盒模型与怪异盒模型
1、标准盒模型
块元素在网页内容中实际占据空间的大小是（/* 外边距:元素与其他元素以及元素与浏览器边缘之间的间距*/）：
实际占据宽度=width+左padding+右padding+左border+右border （标准盒模型的内容区宽尺寸=width）
实际占据高度=height+上padding+下padding+上border+下border
2、怪异盒模型
怪异盒模型不会因为内边距撑开盒子
怪异盒模型的内容区宽尺寸=width-左border-右border-左padding-右padding
怪异盒模型的实际宽尺寸=width
设置怪异盒模型：box-sizing: border-box;
父子元素外边距合并现象
父子元素外边距合并解决方案(给父元素加一个边框或是padding)，但这种方法存在瑕疵，最好的解决方法就是隐藏溢出。
<!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;
}
div{
width: 400px;
height: 400px;
background-color: aqua;
overflow: hidden; /* 隐藏溢出 */
}
h1{
margin: 50px;
}
</style>
</head>
<body>
<div class="t1">
<h1>你好！！！</h1>
</div>
</body>
</html>行内元素
行内盒模型
行间距line-height：行间距指的是上下两行文字内容区之间的间距，行高指的是上下两行文字的文本基线之间的最小间距，行高与行间距之差就是行间距(line-height – font-size)。
line-height取值分两类：1、px，直接定义固定值；2、倍数，一当前字体大小为基数设置倍数，比如line-height:1.5,那么实际行高的值就为16*1.5=24px；
行内元素没有高，但可以设置行高。如果想通过设置行高让行内元素垂直居中的话，行内元素的行高要和所在的div盒子同高度，否则不能垂直居中。
文本文字样式设置参考：https://blog.csdn.net/JBY2020/article/details/109689440
文字大小样式font-size：文字大小的值常用有两类1、px；2、em（例：1.5em、2em，含义为该文字的大小是父元素文字大小的1.5倍，2倍）
文本垂直对齐（垂直对齐不影响块级元素中内容的对齐）：
vertical-align：baseline（使元素的基线与父元素的基线对齐）；middle（使元素的中部与父元素的中线对齐）；top（使元素及其后代元素的顶部与整行的顶部对齐）；bottom（使元素及其后代元素的底部与整行的底部对齐）
文本缩进样式（注意：缩进要对其元素设置，是一个相对的位置，给当前元素设置无效）：
text-indent：1em；/*文本首行缩进一个字符*/
text-indent：20px；/*文本首行缩进20px*/
文本对齐格式text-align：
text-align：left;/*左对齐*/ 默认为左对齐
ext-align：center;/*居中对齐*/
text-align：right;/*右对齐*/
text-align:justify;/*两端对齐*/
文本装饰text-decoration：
text-decoration:underline;/*下划线*/
text-decoration:overline;/*上划线*/
text-decoration:line-through;/*贯穿线*/
text-decoration:none;/*取消装饰线，多用于a标签*/
补充
1、行内空白符问题：形成原因是行内元素之间会解析空格回车,形成间距;
解决办法：（1）. 给行内块元素父级设置字体大小为零,行内块元素字体大小重新设置；（2）. 删除标签之间空格
2、元素的显示与隐藏 display：none
display: block为显示，display: none;隐藏不显示
特点：（1）. 不占据空间（如同消失一般）,无法点击交互 ； （2）. 内部子元素也不会显示 ；（3）. display为none的元素浏览器不会渲染
3、设置元素居中的时使用auto会自动根据相对对象居中，设置的margin的值即可，一般设置设置为0 atuo，这样更加方便浏览器解析，提高性能
573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
