一、CSS基本样式
1、font-size：设置元素的字体大小。单位：px，像素。
2、text-align：设置文本在元素内水平方向的位置。
值：
center：水平居中
left/start：水平居左
right/end：水平居右
3、font—weight：设置字体加粗。
值：
normal：定义标准字体。默认值。
bold：定义粗细文本。
bolder：特粗体，相当于strong和b的作用
lighter：定义细体文本。
100-900：定义字符的粗细，400等同于默认值，700等同于粗体文本bold。
4、text-detoration：文本装饰。
值：
none：去除文本装饰，比如a标签的下划线。
line-through：添加删除线。
underline:添加下划线。
overline：添加顶部线。
5、text-indent：设置段落首行缩进的距离。
单位：em：相当于当前元素的字体大小。
6、font-family：设置字体类型;字体家族。
写法：font-family: "黑体";
7、font-style：设置元素字体的风格。
值：
normal：默认值，标准的字体样式。
italic：定义斜体文本。
inherit: 规定当前元素继承父元素的字体样式。
oblique：文本为倾斜的状态。
8、width：宽度；
单位：px，像素。
百分比：%，占父元素宽度的百分之多少。
注意：当元素没有设置宽度时，块元素的宽度是父元素的100%，行内元素的宽度靠文本内容撑出。
9、height：高度；
单位：px，像素。
百分比：%，占父元素高度的百分之多少（前提是父元素有固定高度）
注意：当元素没有设置高度时，靠内容撑出高度，内容是浮动元素/绝对定位/固定定位除外。
10、background-color：设置元素背景颜色。
11、line-height：设置行高，行间距。
作用：让文本在行间距中垂直居中，不能用负值。（等于块元素的高度）
值：
normal：设置合理的行间距。
number：设置数字，此数字会和字体大小相乘来设置行间距。
百分比：相当于当前文字大小的百分比进行行间距。
12、letter-spacing：字间距，设置字符和字符之间的间距。
13、text-transform：文本转换
值：
uppercase：大写英文
lowercase：小写英文
capitalize： 单词首字母大写
二、CSS颜色的取值
1.使用颜色名（如red之类）
不建议大规模的使用，避免有些颜色不被浏览器解析，不同的浏览器对颜色的解析有差异。
2.使用百分比
rgb：3种颜色。
三个值都为最大值显示白色
三个值都为最小值显示黑色
三个值都相等显示为灰色
.class {
color: rgb(60%, 20%, 50%);
}3.使用数值
取值范围：0~255
.number {
color: rgb(55, 255, 230);
}4.十六进制：最常用的方法
.system {
color: #f00;
color: #666;
}5.rgba：最后一个值控制颜色透明度
a的取值范围：0~1，0为完全透视，1为完全不透视。
.box {
height: 400px;
background-color: rgba(5, 10, 50, 0.4);
}三、盒子模型
1.盒子模型：盒子模型（Box Model）就是把元素本身看成一个矩形盒子，每个矩形都是由内容（content）、内边距（padding）、边框（border）、外边距（margin），每个盒子除了有自己的大小之外。还会影响其它盒子的位置。
2.盒子模型的特性：每个盒子都有：内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。每个属性都包括 4 部分：上下左右。
3.标准盒子和怪异盒子模型的表现效果的区别：
a.标准盒子中的 width 指的是内容区域 content 的宽度，高指的是内容区域 content 的高度 。
-标准盒子模型的大小 = content + padding + border + margin。
b.怪异盒子模型中的 width 指的是内容 content+内边距 padding+边框 border。
-怪异盒子模型大小=width (content + padding + border ) + margin。
四、内边距和外边距
padding：内边距
作用：能撑大盒子，调整元素内容的位置。
距离：从元素的边框（border）开始到内部的内容（content）之间的距离。
语法结构：
一、属性为padding，通过值来控制不同边的内边距。
1.一个值：同时设置四个边的内边框
2.两个值：分别表示上下、左右内边距
3.三个值：分别表示上、左右、下内边距
4.四个值：分别表示上、右、下、左内边距
二、通过padding—方向控制四个边的内边距，设置单方向内边距。
padding-top: 20px;
padding-right: 40px;
padding-bottom: 80px;
padding-left: 120px;
padding: 20px;
padding: 20px 40px;
padding: 20px 40px 80px;
padding: 20px 40px 80px 120px;
padding-top: 20px;
padding-right: 40px;
padding-bottom: 80px;
padding-left: 120px;margin：外边距
作用：元素添加外边距后会移动元素的位置，调整元素和元素之间的距离。
距离：从自身的边框开始，到另一个元素边框之间的距离。
语法结构：
一、属性为margin，通过值来控制不同边的内边距。
1.一个值：同时设置四个边的内边框
2.两个值：分别表示上下、左右内边距
3.三个值：分别表示上、左右、下内边距
4.四个值：分别表示上、右、下、左内边距
二、通过padding—方向控制四个边的内边距，设置单方向内边距。
margin-top: 20px;
margin-right: 40px;
margin-bottom: 80px;
margin-left: 120px;n
五、margin合并的解决方法
1、margin的合并：
块级元素的上外边距和下外边距有时候会进行合并。
margin的合并只发生在块级元素之间（浮动元素/绝对定位/固定定位除外）
margin合并的几种情况：
1.相邻兄弟之间margin的合并
2.父级元素中的第一个子元素和最后一个子元素外边距会穿透父元素，表现为父元素的外边距，称为父盒子塌陷（子元素设置margin-top父元素跟着一起动）
解决方法：
1）.给父元素添加边框
2.）给父元素设置padding（值不能小于等于0）
3）.给父元素添加overflow:hidden;。溢出部分元素隐藏
3.空盒子div的合并
margin合并的计算规则：正正取最大，负负最小值，正负值相加。
1、margin-top合并的解决方法：
1.父元素设置为块状格式化上下文；
2.父元素设置border-top；
3.父元素设置padding-top；
4.父元素和第一个子元素之间添加内联元素进行分割。
2、margin-bottom合并解决方法：
1.父元素设置为块状格式化上下文；
2.父元素设置border-bottom；
3.父元素设置padding-bottom；
4.父元素和第一个子元素之间添加内联元素进行分割。
5.父元素设置height
3、不让空div合并的方法：
1.设置垂直方向的border
2.设置垂直方向的padding
3.在元素内部添加内联元素
4.设置height
块状格式化上下文：BFC
如果一个元素符合BFC的条件，该元素会成为一个独立的容器，元素内部的元素会垂直的沿 着父元素的边框排列，和外部的元素互不干扰。
触发BFC的条件：
1.浮动元素，float除none以外的值
2.绝对定位和固定定位，position：absolute/fixed；
3.display为以下任何一个值inline-block等，除块元素之外
4.overflow除visible以外的值（hidden，auto，scroll）
六、元素盒子模型
box-sizing：盒子模型尺寸的计算：
值：
content-box：默认值，按照标准盒子进行计算。
border-box：计算宽高时，按照IE盒模型进行计算。
如果边框超出页面范围，出现滚动条时用 box-sizing: border-box
section {
width: 100%;
height: 50px;
border: 5px solid red;
box-sizing: border-box;
}七、元素转换
display：改变元素布局方式
值：
block：将元素转换为块元素
inline：将元素转换为行元素
inline-block：将元素转换为行内块元素
none：隐藏一个元素，隐藏后不会显示。
html标签按照布局方式可以分为3类：块元素，行元素，行内块元素。
块元素特点：
1.独占一行
2.可以设置宽高
3.如果不给它设置宽高，则显示默认宽高，如果没有默认宽高，则显示为内容的宽高。
布局方式默认为块元素的标签：
1、address：地址，主要用来定义文档作者或者所有者的联系信息。
2、blockquote：块引用，主要用来定义摘自另一个源的块引用。
3、center：居中对齐块，主要用来对其所包括的文本进行水平居中。
4、dir：主要用来定义目录列表，在HTML5不支持。
5、div：常用块级元素，主要用来定义HTML文档中的一个分隔区块或者一个区域部分。
6、dl：主要用来定义一个描述列表。
7、fieldset：主要用来将表单内的相关元素进行分组。
8、form：交互表单，主要用于创建供用户输入的HTML表单。
9、h1–h6：主要用来定义HTML标题。
10、hr：水平分隔线，主要用来分隔HTML页面中的内容。
11、menu：菜单列表，通常用来实现文本菜单、工具条和命令列表选项。
12、noframes：frames可选内容，（对于不支持frame的浏览器显示此区块内容）。
13、noscript：可选脚本内容（对于不支持script的浏览器显示此内容）。
14、ol：主要用来定义一个有序列表，列表排序以数字来显示。
15、p：主要用来定义段落。
16、pre：主要用来定义预格式化的文本。
17、table：主要用来定义HTML表格。
18、ul：主要用来定义无序列表，与<li>标签一起使用，创建无序列表。
行元素特点：
1.不独占一行
2.不能设置宽高，宽高取决于自身内容；
3.多个行元素之间左右排列，一行到最后显示不下时会自动换行。
布局方式默认为行元素的标签：
1、a - 锚点；
2、cronym - 首字；
3、big - 大字体；
4、cite - 引用；
5、i - 斜体；
6、label - 表格标签；
7、q - 短引用；
8、select - 项目选择；
9、small - 小字体文本；
10、span - 常用内联容器，定义文本内区块；
11、strike - 中划线；
12、strong - 粗体强调；
13、sub - 下标；
14、sup - 上标；
15、u - 下划线；
16、var - 定义变量。
行内块元素特点：
1.不独占一行
2.可以设置宽高
3.多个行内块元素左右排列，一行到最后显示不下时会自动换行。
布局方式默认为行内块：
1、img，用于定义HTML页面中的图像；
2、textarea，用于定义一个多行的文本输入控件；
3、input，用于规定用户可以在其中输入数据的输入字段。
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
74
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
