css问题点

input框超出form

margin:0;
padding:0;
border: 0;
因为有边框

table 样式问题

设置tr/td 样式，如宽度等 无效怎么办？
tr 块级元素 且指定display:block
才可以设置margin/border/padding/width/height

td 行内元素，不可以设置$宽度$、$外边距$

tr{
display:block; /*转为块级元素,也可以试试inline/inline-block*/

width:50%; /*父元素宽度的 50% ---有效解决*/
}

div container 设置position：fixed后是否影响？不影响
内部子元素也一起脱流
position:fixed;
left:10%; 距离浏览器的边缘
bottom:10%；
width:80%;
height:80%;

案例：

<!-- div block element -->
    <div id="test-table">  
        <span>div block</span>
        <!--  -->
        <table>
            <span>table block</span>
            <tr>
                <td>tr->block td->'inline'</td>
            </tr>
            <tr>
                <td>grid2</td>
            </tr>
            <tr>
                <td>grid3</td>
            </tr>
        </table>
    </div>

<style type="text/css">
/* test table tr td */

/* 消除body 的默认设置 */
body{
    margin:0;
    padding:0;
}

#test-table{  /*div block*/
    background-color:lightblue;
    margin:10px auto;
    padding:0;
    border:solid 1px red;
    width:50%;
    height:50%;

}

#test-table>table{  /*block element   直接设置*/
    background-color:green;
    opacity:.3;
    margin:10px auto;
    padding:0;
    border:dashed 1px rgb(46, 56, 46);
    width:90%;
    
}
#test-table tr{  /*inline element  必须转为block */
    
    display:block;
    margin:10px auto;  /*居中*/
    padding:10px;
    border:solid 1px blue;
    width:60%;
    /*height:50px;   可以设置tr高*/
    text-align:center; /*内容水平居中，若未实现效果，内容是否块级元素？*/
}

#test-table td{
    display:block;
    background-color:orange;
    width:80%;
    margin:5px auto;
    border:solid 5px red;
    padding:1px;
    text-align:center;
    line-height:2em;
}

</style>

块级元素

div / table / p / h1-6 / form / hr/ ul / ol /li 等属于块级元素

1. 块block 元素独占页面一行
2. 外边距、边框、内边距、高度、宽度可以设置----盒子模型
3. 元素的宽度不设置的话默认为父元素的宽度，高度可以设置，也可以由内容撑起
4. 可以包含其他块级元素等

行内元素

span / a / td /button/ label/ input/ br /i/ img/b/

1. 多个元素 共占一行
2. 不能设置 宽高， 由内容撑起
3. 高度可由 line-height 指定
4. 仅仅可以 margin-left/right padding-left/right