- 表格相关属性：
- 1、边框相关属性：
- border：像素大小，颜色，形状
- 2、表格独有属性：
- table-layout：控制表格列宽
- border-spacing：控制单元格间距
- border-collapse：合并相邻单元格的边框
- empty-cells：控制是否隐藏没有内容的单元格
- caption-side：设置表格标题的位置
- 1、边框相关属性：
- 背景相关属性：
- background-color：设置背景颜色
- background-image：url() ：设置背景图片
- background-repeat：设置背景的重复方式
- background-position：控制背景图片的位置
- 1、水平垂直的位置名
- 2、具体像素值控制
- background：复合属性
- 鼠标相关属性：
- cursor：
- 鼠标形状：move（移动）、wait（等待）、crossshair（十字架）、help（帮助）、pointer（手）、cursor：url()（自定义鼠标形状）
- cursor：
- CSS长度单位：
- px（具体像素值）
- em（字体大小的倍数）
- rem（根元素字体大小的倍数）
- %（相对其父元素的百分比）
- 元素的显示模式：
- 块元素：独占一行，不会与任何元素共用一行，从上到下排列，宽度撑满整个父元素。 高度由内容撑开。
- 主题结构标签：html、body
- 排版标签：h1~h6、hr、p、pre、div
- 列表标签：ul、ol、li、dl、dt、dd
- 表格相关标签：table、caption、tbody、thead、tfoot、tr
- form、option
- 行内元素：不独占一行，宽高由内容撑开。无法设置宽高。
- 文本标签：br、em、strong、sup、sub、del、ins、span
- a、label
- 行内块元素：不独占一行，宽高由内容撑开。可以设置宽高。
- 图片：img
- 单元格：td、th
- 表单控件：input、textarea、select、button
- 框架标签：iframe
- 块元素：独占一行，不会与任何元素共用一行，从上到下排列，宽度撑满整个父元素。 高度由内容撑开。
- 修改元素的显示模式：
- display：修改元素的默认显示模式
- block/inline-block/inline/none
- display：修改元素的默认显示模式
- 盒子模型：
- 内容：content
- height/width/min-width/max-width/min-height/max-width
- 注意：盒子模型默认宽度=父元素的content宽度 - 自身左右的margin
- 内容溢出问题：
- overflow ： hidden/scroll/visible/auto
- 内边距：padding
- 单独设置：padding/padding-left/padding-right/padding-top/padding-bottom
- 复合属性：padding：上下，左右（两个值）。上，左右，下（三个值）。上、右、下、左（四个值）。
- 注意：行内元素padding不单独占位置，可能会与其他紧邻元素产生重叠。
- 边框：border
- 单独设置：border-width、border-color、border-style(每一条边框还可以单独设置，指定上下左右位置即可，例如border-left-width)
- 复合属性：border：像素大小、颜色、形状（每一条边框可以单独设置，指定上下左右位置即可，例如border-left）
- 外边距：margin
- 单独设置：margin-left、magin-right、magin-top、magin-bottom
- 复合属性：margin
- 注意：1、子元素的magin是根据父元素的content来计算的；2、块元素或行内块元素设置上、左margin影响自身位置，下、右margin影响兄弟元素位置；3、行类元素设置上下margin不起作用，可以设置左右margin。4、margin左右值设置为auto，可实现元素在其父元素的水平居中。5、margin值可以为负值
- margin塌陷问题：给第一个子元素的上margin和最后一个子元素的下margin会作用给父元素。可以通过给父元素设置不为0的padding或border来解决，也可以使用overflow：hidden解决。
- margin合并问题：上下margin可以合并（取margin最大值），左右margin不行。
- 隐藏元素的两种方式：
- 1、display：none 隐藏了且不占位
- 2、visibility：hidden 隐藏了但仍占位
- 样式的继承：
- 继承属性：字体属性、文本属性（除了vertical-align）等
- 不会继承：边框、背景、内边距、外边距、宽高、溢出方式等。
- 元素的默认样式：
- 元素一般都有默认的样式，例如：
- 1、<a>：下划线、字体颜色、鼠标形状
- 2、<h1>-<h6>：文字加粗、字体大小、上下外边距
- 3、<p>元素：上下外边距
- 4、<ul>、<ol>：左内边距
- 5、<body>：8px外边距
- 优先级：元素的默认样式 > 继承的样式
- 元素一般都有默认的样式，例如：
- 布局技巧：
- 1、行内元素、行内块元素，可以被父元素当作文本处理：可以处理行内元素、行内块元素在父元素中的对齐。例如：text-align/line-height/text-indent等。
- 2、让子元素在父元素中水平居中：
- 若子元素为块元素：给父元素加上margin：0 auto；
- 若子元素为行内元素/行内块元素：给父元素加上text-align：center。
- 3、让子元素在父元素中垂直居中：
- 若子元素为块元素：给子元素加上margin-top：（值为父元素content - 子元素盒子总高）/ 2
- 若子元素为行内元素、行内块元素：让父元素的height = line-height，父元素font-size设置为0。每个子元素加上vertical-align：middle。
- 元素之间的空白问题：行内元素、行内块元素，彼此之间的换行会被解析为一个空白字符。
- 1、去掉换行和空格（不推荐）
- 2、给父元素设置font-size：0，再给需要显示文字的元素，单独设置字体大小。
- 行内块的幽灵空白问题：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
- 1、给行内块设置vertical-align：bottom/top/middle。
- 2、若父元素中只有一张图片，则设置图片为块元素，display：block。
- 3、给父元素设置为font-size = 0。如果该行内块内部还有文本，则还需单独设置需要显示文本的font-size。
- 内容：content
- 浮动：早期用来实现文字环绕图片效果，现在是主流的页面布局方式之一。
- 元素浮动的特点：
- 1、脱离文档流
- 2、浮动后默认宽高都由内容撑开，而且可以设置宽高
- 3、不会独占一行
- 4、不会margin合并，也不会margin塌陷
- 5、不会像行内块一样被当作文本处理（没有行内块的空白问题）
- 浮动后的影响：
- 对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
- 对父元素的影响：不能撑起父元素的高度，导致父元素的高度塌陷；但父元素的宽度依然束缚浮动的元素。
- 解决浮动后的影响：
- 父元素高度塌陷问题：
- 1、给父元素设置高度
- 2、父元素浮动
- 3、overflow：hidden
- 4、clear
- 5、::after{content:'' ； display:block； clear:both}
- 父元素高度塌陷问题：
- 浮动进行页面布局：（待续）
- 元素浮动的特点：