块元素和行内元素

特征

• 块元素的特征，如div： 独占一行 (没有给宽度的时候，宽度是auto，100% 撑满 【父级】的宽度)

• 行内元素的特征：
  • 特点1：宽高是auto，是内容撑开的 （不支持设置width， height）
  • 特点2： 所有的行内元素，都会在一行显示 （代码换行会解析成一个空格） 代码这样写在一行两个中间就没有空
  • 特点3： 不支持上下的margin 和padding(虽然会把尺寸撑开，但只是表面的，实际上下个元素占位是在本身后面开始)

区分方法

设置一个样式后,然后占一行的就是块

body * {border:1px solid #f00}

块元素： div h1-h6 p ul li ol dt dd 行内元素： a span strong em mark img,

块元素与行内元素转化

• 块元素转成行内元素 ， 用 display:inline (就变成【行内】了， width height不生效等特征)
• 行内元素转块元素， 用 display:block
• display:inlne-block (行内块 - 理解成支持设置宽高的 行内 （和行内会处于一行）)-ie6 7 不太兼容（建议不用）
  • 可以设置宽高 的 ，与其他行内展示在一行
    • 不给宽时，它有有行内特征，由内容撑开
    • 代码换行也会被解析成空格
    • 作用：可以让块元素和行内元素处在一行

标签嵌套基本规则

• 1.行内标签不能嵌套块标签。。。
• 2 h1-h6 dt这些标题 ，p 也不能嵌套【块级】
• 固定嵌套 ul和li ol 和 li dt 和dd

表格

表格标签

• table
• thead 表头行
  • th 表头中的单元格
• tbody 表格主体
  • tr 一行
    • td 表格主体中单元格

表格样式

表格样式重置(这样，单元格之间无空隙，字体在单元格中也没有padding的空隙)

        table{
            border-collapse: collapse;
            /* 原始样式单元格之间有空隙，用这改为无空隙 */
        }
        th, td {
           
            padding: 0;      /* 原始样式是有padding的 */
        }

其他

加边框

th,td{
            border: 4px solid #f00;
        }

表格居中、设宽度

        table {
            margin: 0 auto;
            width: 500px ;   /*设置后，它会自动分配内容*/
            height: 300px;   /*一般高度，不用设置了，设置单元格字体的高度*/
        }

单元格内字体居中、以及设置字体大小高度

     th,td {
            text-align: center;
            font-size: 20px;
            line-height: 50px;
            /* font:20px/50px "微软雅黑" */    /*整体设置*/
        }

单元格合并

rowspan 合并多行 colspan 合并多列

表单

• 外层是一个form
• type 属性指定了表单元素的类型，submit 类型的表单元素表示提交按钮
• 当用户填写完表单并点击提交按钮时，表单数据会以 username=xxx&password=xxx 的格式发送到 /login 这个地址，由后端程序进行处理

<form action="/login" method="post">
  用户名：<input type="text" name="username"><br>
  密码：<input type="password" name="password"><br>
  <input type="submit" value="登录">
</form>