HTML&CSS中修改非块级元素宽高的三种方法

1.哪些元素默认可以修改宽高？

    1、 块级元素(display:block)都可以设置 

div,p,h1,h6,ul,ol,li,dl,dt,dd

 

    2、 存在width，height属性的html元素

                    img，table，input

                         

     ex:

图片(display:inline-block)非块级但可以修改宽高:

<img src="..."  width="300px" height="400px"/>

表格(display:table)非块级但可以修改宽高：

<table width="200px;" height="300px">

<tr>

<td></td>

<td></td>

</tr>

</table>

表单控件(input)非块级但可以修改宽高：

<input type="text" name=""  width="200px">

2.常规不能修改宽高的元素有哪些？

大部分的 行内元素:    span,a,i,s,u,b,sup,sub，<input type="radio/checkbox"> 

3.如何修改那些不能设置宽高的元素(大多为行内元素)？

1、浮动

属性：float:left/right

元素一旦浮动起来之后，那么将变成块级元素，尤其对行内元素和行内块元素影响较大

2、修改显示方式

属性：

display

取值

                    1、none

                         没有显示方式，即不显示，隐藏

                         脱离文档流

                         常用场合：隐藏页面的元素。

                    2、block

                         让元素显示的和块级一样

                         常用场合：将行内元素 改变成 块级元素，以便于去修改元素的尺寸。

                    3、inline

                         让元素显示的和行内元素一样

                         注意： 不要将块级元素改变成行内元素。

                    4、inline-block

                         让元素显示的和行内块元素一样

                         行内块：一行内允许显示多个行内块元素，而且允许修改宽和高。

                    5、table

                         让元素表现的和table一样

                         尺寸自适应，独占一行 

3、绝对定位

属性：

position: absolute;

通过 top/bottom/left/right 实现位置移动和初始化

绝对定位的元素会变成块级元素，允许修改 尺寸