前端入门：表格、css引入、选择器、浮动、css样式--第五天

# 一、html -表格

 1、 表单：收集数据

 表格：呈现数据

 2、完整语法：

 <table border="10" width="600px" align="center">

    <thead>

        <tr>

            <th>4</th>

            <th>3</th>



        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>2</td>



        </tr>

        <tr>

            <td>1</td>

            <td>2</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td>1</td>

            <td>2</td>

        </tr>

    </tfoot>

</table>

 ```

 表格可以实现整个网页的布局，但这是一种被淘汰了的布局方式，除非页面上有真正的表示显示数据的内容，否则一般不再使用表格

 4、css写在哪里

    - 外部样式：写在css文件内，需要在html文件中使用link标签引入css文件

        - `<link herf="要引入的css文件路径" rel="stylesheet(引入的什么资源)" type=“text/css（引入的什么类型）”>`

    - 内部样式

        - `<style>`

    - 内联（行内）样式：作为html标签标签自身的属性的属性值存在

        - `<div style="属性值（width：100px；）">`

    - 权重：

        - 行内>内部和外部       内部和外部，后写的权重高           同一种样式，后写的样式权重高

        出售之前一定要在前一天观察好资金净值买卖情况，以及前三天的净值流动情况，要做到冷若冰霜（拔吊无情）

5、css中发imoprt关键字

    -link属于html，import属于css

    - link没有兼容，import有兼容

    - link引入样式可以被js兼容，import引入的样式不能被js控制

    - link只是一种引入方式，import属于css模块化的引入方式

    - link引入的css会与html文件一起加载，import引入的css会等html加载结束侯再加载

# 三、css选择器

1、class/id选择器/*选择器/标签名选择器

2、一个class可以有多个对应元素，反之成立，多对多

3、子选择器parent选择器>child选择器

4、下一个兄弟

 

# 四、css选择器--层叠效果

1、id选择器的权重：100

2、class选择器的权重：10

3、元素选择器权重：1

4、行内（内联）的权重：1000

5、！important权重：最高

6、包含选择器权重：之和

7、伪类元素选择符：10

8、伪类选择符：1

# 五、css的样式  -浮动

1、默认文档流：在文档内，每个元素默认摆放的位置和顺序：自上而下，从左到右，左上角对齐

2、浮动：将元素脱离正常的文档流，浮在正常文档流的上方，形成新的文档流，浮动文档流默认从左到右

    - 当一行放不下所有浮动元素时：1.将要换行的前一个元素是这行的最高，要换行的元素之后会顶到父元素的最左边2.将要换行的前一个元素不是这行的最高，要换行的元素之后会顶到第一个比自身高的元素的边

3、添加浮动：float:left\right\none

4、清除文档流:clear:left/right/both

5、浮动会造成的影响，当一个容器没有写高度时，自身所有元素都浮动，浮动元素撑不开父元素的高度，容器的height为0    解决：1.写高度2.overflow：didden；BFC：