前端学习笔记——CSS（三）

一、元素特性

• 元素通常分为三大类：

块元素
行内元素
行内块元素

但是，很多时候我们在布局时会人为的改变元素的特性！CSS通过display属性，可以进行元素特性的转换

display值	显示效果
block	块元素
inline	行内元素
inline-block	行内块元素
none	元素隐藏（直接消失）
flex	弹性盒

与display:none类似，visibility:hidden也能将元素隐藏，区别在于前者直接使元素消失，不再占据文档流中的位置，会影响周围元素的布局，后者只会让元素隐藏，但仍占据位置，不会影响其他元素布局。

二、元素浮动

• 元素可以设置float属性，让一个元素脱离文档流，想起父元素的左侧和右侧移动：

可选值	效果
none	默认值，元素不浮动
left	元素向左浮动
right	元素向右浮动

1. 元素一旦设置浮动后，将会脱离文档流，不再占据文档流中的位置，以至于后续的正常元素会自动向上移动填满空隙。
2. 元素浮动后，会向父元素的左侧或右侧移动，直到接触父元素的边框或另一个浮动元素的边框。
3. 浮动元素默认情况下不会从父元素中脱离。
4. 如果浮动元素前面是一个没有浮动的正常块元素，则浮动元素会停止上移。
5. 如果浮动元素后面是一个没有浮动的正常块元素，则块元素会自动上移。

• 在正常CSS布局中，一般不会给父元素设置具体高度，而是由子元素以及内容将其撑开，实现父元素的高度问题。浮动元素无法撑开父元素，从而造成父元素的高度塌陷。
  解决方式：1.给父元素设置具体高度（不建议）
  2.给父元素开启一个BFC模式（BFC：不会影响上下文的局部块）
  3.给父元素开启浮动（开启BFC）
  4.给父元素开启overflow：hidden（也是开启BFC，影响较小，较为推荐）
  5.display：table

三、元素溢出

当父元素尺寸无法容纳子元素的内容时，子元素就会溢出。

可通过CSS的overflow属性设置元素溢出效果

值	效果
visible	默认，元素溢出可见
scroll	溢出元素隐藏，提供滚动条
hidden	溢出元素隐藏，无滚动条

scroll：

hidden：

• 外边距折叠：给子元素设置一个外边距，父元素也跟着向下移动。本质就是在共享一个外边距，只有垂直方向上才会发生外边距折叠，水平方向不会发生。
  
  解决方式：1.给父元素加一个边框（不推荐）
  2.给父元素加一个内边距（不推荐）
  3.给父元素开启BFC

四、元素定位

• 定位是一种更高级的布局手段，通过定位可以将元素摆放到页面的任意位置。
  通过position为元素设置定位

可选值	效果
static	默认值，没有开启定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘滞定位

• 相对定位
  1.不设置偏移量，元素是不会发生任何的位置变化
  2.参照元素自身在文档流中的位置进行定位
  3.提升元素的层级关系
  4.不会脱离文档流，元素的特性不会被改变
• 绝对定位
  1.不设置偏移量，元素是不会发生任何的位置变化
  2.相对于最近的开启了定位的包含块来定位
  3.元素会脱离文档流，不再占据页面的实际位置
  4.改变元素的性质，不再区分块元素、行内元素、行内块元素。
  5.提高元素的层级
  6.一般会为子元素设置绝对定位，为它的父元素设置相对定位（子绝父相）
• 固定定位
  1.本质上也是一种绝对定位
  2.相对于浏览器视口来进行定位
  3.不会随着浏览器滚动条的滚动而移动位置
• 粘滞定位
  1.默认与相对定位特点给相同
  2.当元素移动超过某个特定位置时，将其固定，变为固定定位
  3.当元素回到变为固定定位之前的位置时会变回相对定位

五、元素背景

相关属性	作用	可选值
background-color	背景颜色	rgb、十六进制、颜色名称
background-image	背景图片	url
background-size	背景图片的大小	cover
		contain
background-repeat	背景图片的重复方式	repeat（沿水平方向和竖直方向）
		no-repeat（不重复）
background-position	背景图片的位置	方位词：top center left
		具体值：20px 30px

六、表格

• 一个标准的表格(table)分为三部分：
  头部：thead
  主题：tbody
  底部：tfoot
• 以上三部分可以省略不写，但浏览器会默认添加tbody
  以<tr>来添加表格的一行
  在一行中以<th>来添加表头元素、以<td>来添加表单数据

    <table >
        <tr>
            <th></th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <th>4</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <th>5</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <th>6</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

• 如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

<table border="1">
        <tr>
            <th></th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <th>4</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <th>5</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <th>6</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
 </table>

• 单元格合并
  水平合并：colspan
  竖直合并：rowspan

<table border="1">
        <tr>
            <th></th>
            <th>1</th>
            <th colspan="2">2</th>
        </tr>
        <tr>
            <th>4</th>
            <td>1</td>
            <td>2</td>
            <td rowspan="3">3</td>
        </tr>
        <tr>
            <th>5</th>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <th>6</th>
            <td>1</td>
            <td>2</td>
        </tr>
</table>

七、表单元素

• 表单（form）：用于提交数据给服务器的容器
  form标签的属性：
  （1） action 表单数据最终提交到的服务器地址
  （2） method 表单数据的提交方式：get、put
• 表单控件

控件名	作用
input	输入框
radio	单选框
checkbox	多选框
textarea	富文本框
button	按钮
select	下拉列表
option	下拉列表项

• 获取表单数据
  利用表单控件都有的两个属性：name，value，产生一个键值对，即可获取对应数据