1、CSS中margin和padding的区别如下
1, margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。 2, padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离
2,iine-height行高
“行高“指一行文子的高度,具体来说是指两行文子间基线间的距离。在CSS,line-height被用来控制行与行之间的垂直距离。line-height 属性会影响行框的布局。
在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。所有浏览器都支持 line-height 属性。
line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比> | inherit 说明: line-height 属性设置行间的距离(行高),不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差(行距)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
<!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css" > span { padding:0px; line-height:1.5; } </style> </head> <body> <div class="test"> <div style="background-color:#ccc;"> <span style="font-size:3em;background-color:#999;">中文English</span> <span style="font-size:3em;background-color:#999;">English中文</span> </div> </div> </body> <html>
3、向上移动图片,为防图片被隐藏,可以给图片加浮动
position:relative; 图片位置定位,让图片浮动
margin: -39px auto; 调整图片的上下距离及作用距离(auto,代表水平居中)
4、displayd ,这个属性用于定义建立布局时元素生成的显示框类型
<html> <head> <style type="text/css"> p {display: inline} div {display: none} </style> </head> <body> <p>本例中的样式表把段落元素设置为内联元素。</p> <p>而 div 元素不会显示出来!</p> <div>div 元素的内容不会显示出来!</div> </body> </html>
none 此元素不会被显示。 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素,元素前后没有换行符。 inline-block 行内块元素。(CSS2.1 新增的值) list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS 中有值 compact,由于缺乏广泛支持,已经从 CSS2.1 中删除。 marker CSS 中有值 marker,由于缺乏广泛支持,已经从 CSS2.1 中删除。 table 此元素会作为块级表格显示(类似 <table>),表格前后带换行符。 inline-table 此元素会作为内联表格显示(类似 <table>),表格前后没换行符。 table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。 table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 table-row 此元素会作为一个表格行显示(类似 <tr>)。 table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 table-column 此元素会作为一个单元格列显示(类似 <col>) table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) table-caption 此元素会作为一个表格标题显示(类似 <caption>) inherit 规定应该从父元素继承 display 属性的值
Javascript display 属性还允许作者显示或隐藏一个元素。与 visibility 属性类似。然而,如果您设置 display:none,将隐藏整个元素,如果您设置 visibility:hidden,
元素的内容将不可见,但元素保持原来的位置和大小。 <html> <head> <script> functiondisplayResult() { document.getElementById("p1").style.display="none"; } </script> </head> <body> <pid="p1">Thisissometext.</p> <inputtype="button"onclick="displayResult()"value="Donotdisplayparagraph"> </body> </html>