`

CSS - display,float,clear,overflow,visibility,<input type="hidden">

 
阅读更多

display属性:block/inline/none/inline-block

         display:block(作用是把行属性标签显示成块属性标签,可以设置宽高,前后有回车独立一行) ;

         display:inline(作用是把块属性标签显示成行属性标签,这时块属性标签就不能设置宽高啦);

         display:none(作用是使所控制的标签不显示)

         visibility:hidden(是设置元素的框的不可见,但是在布局中的位置是不变的) 它和display:none的区别就在于后者不会占用那个位置,下一个元素会直接覆盖它,而前者是会占用那个布局,只是不显示内容,是 一片空白;并且下载的时候对于display:none就不会把不显示的元素给下载下来,而visibility:hidden则会把不显示的元素给下 载下来;

float(浮动,照样受文档流的限制)行标签float之后就可以设置它的宽高

float:none/left/right    

           none : 对象不浮动

           left : 左浮动

           right : 右浮动

clear(清除浮动)

clear:both/none/left/right

             none : 允许两边都可以有浮动对象

             both : 不允许有浮动对象

             left : 不允许左边有浮动对象

             right : 不允许右边有浮动对象

overflow(超出)

overflow:visible/auto/hidden/scroll

                 visible : 不剪切内容也不添加滚动条

                 auto : 默认属性

                 hidden : 隐藏超出内容

                 scroll : 总是显示滚动条

visibility(可视)

visibility : inherit/visible/hidden

                inherit :  继承上一个父对象的可见性

                visible :  对象可视

                hidden :  对象隐藏

几种图片格式的差别:

gif:不支持半透明

jpg:支持透明

png:部分支持透明,需要额外处理

分享到:
评论

相关推荐

    js 框架之一

    --&lt;br&gt; &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;&lt;br&gt; --&gt;&lt;br&gt; &lt;script&gt;&lt;br&gt; function showcpst(){&lt;br&gt; document.getElementById("cpst").style.display="block";&lt;br&gt; }&lt;br&gt; &lt;/script&gt;&lt;br&gt; &lt;/...

    基于客房管理系统代码 开发者 刘尧涛

    &lt;style type="text/css"&gt; &lt;!-- .spanstyle { COLOR: #339900; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible } DIV.liu{font-family:"方正舒体"; font-size=35px; ...

    好看的下拉菜单

    &lt;style type="text/css"&gt; /* common styling */ .menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a...

    雅虎TAB效果代码 Javascript实现

    &lt;style type="text/css"&gt; body {background: #fff;font-family: "Lucida Grande", Helvetica, Arial, sans-serif;font-size: 12px;} p {line-height:140%} #info {height:500px; position:relative;} #adsie {...

    搜索引擎名次查询.net版源码下载

    &lt;link href="iwbuy.css" rel="stylesheet" type="text/css"&gt; &lt;script LANGUAGE="JavaScript"&gt; function check()//表单判断 { var str=""; var j=0; var el=document.form1.getElementsByTagName(...

    点击选择框出现下拉模块信息,点击信息到选择框中

    点击选择框出现下拉&lt;div class="close" id="close"&gt;&lt;a onclick="document.getElementById('titt').style.visibility='hidden'"&gt;选择&lt;/a&gt;&lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;ul&gt; &lt;li&gt;&lt;a onclick="addValue('el...

    跨年烟花代码,兔年吉祥,大吉大利~

    &lt;img src="img/moon.png" alt="" id="moon" style="visibility: hidden;"/&gt; &lt;div style="display:none"&gt; &lt;div class="shape"&gt;兔年吉祥&lt;/div&gt; &lt;div class="shape"&gt;突飞猛进&lt;/div&gt; &lt;div class="shape"&gt;阖家幸福...

    跨年烟花代码html 可修改

    &lt;img src="moon.png" alt="" id="moon" style="visibility: hidden;"/&gt; &lt;div style="display:none"&gt; &lt;div class="shape"&gt;2023新年快乐&lt;/div&gt; &lt;div class="shape"&gt;虎岁扬威兴骏业&lt;/div&gt; &lt;div class="shape"&gt;兔毫着...

    html个人网站xp界面

    共有&lt;span class="font14B"&gt;&lt;%=rs.recordcount%&gt;&lt;/span&gt;条留言 | 共&lt;span class="font14B"&gt;&lt;%=rs.pagecount%&gt;&lt;/span&gt;页 | 当前为第&lt;span class="font14B"&gt;&lt;%=rs.AbsolutePage%&gt;&lt;/span&gt;页&lt;/td&gt; &lt;/tr&gt; ...

    HTML页面布局

    &lt;a href="#" class="a_sy" onMouseOver="document.all.one.style.visibility='' "onMouseOut="document.all.one.style.visibility='hidden'"&gt;&lt;b&gt;商城首页&lt;/b&gt;&lt;/a&gt; &lt;a href="#" class="a_qb" onMouseOver=...

    js仿携程网机票城市选择器代码

    &lt;input id="cityid" name="cityid" type="hidden" value="{$cityid}" /&gt; &lt;/div&gt; &lt;div&gt; 目的地: &lt;input type="text" value="" size="15" id="getcity_name" name="getcity_name" mod="address|notice" mod...

    WPF模拟迅雷界面+360界面【网上整理】

    &lt;Path x:Name="path" Data="M87.399999,0 L174.8,44.596669 L-5.0876247E-07,44.596669 z" Fill="White" Height="Auto" Margin="0,9.667,-1.583,9.667" Stretch="Fill" StrokeThickness="0" Width="11.466" ...

    网页浮动广告窗口

    border-bottom-width:1px'&gt;&lt;TR bgcolor=#2E6287&gt;&lt;TD height=20&gt; 推荐↓&lt;/TD&gt;&lt;TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30&gt;关 闭&lt;/TD&gt;&lt;/TR&gt;&lt;/TABLE&gt;&lt;table border='1' width='...

    javascript小技巧

    &lt;style type="text/css"&gt; &lt;!-- body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px} A { COLOR: black; FONT-SIZE: 11pt; FONT-WEIGHT: 400; TEXT-DECORATION: ...

    网络考试系统

    &gt; &lt;/p&gt; &lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt;&lt;/table&gt;&lt;/center&gt;&lt;/div&gt;&lt;div align=&quot;center&quot;&gt;&lt;center&gt;&lt;table width=&quot;113&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot...

    经典网购网站模板

    visibility:hidden;LEFT:220px;POSITION:absolute;TOP:98px"&gt; &lt;table border="0" cellpadding="0" cellspacing="0" height="32"&gt; &lt;tr&gt; &lt;td align="center" background="images/list_menu_left.gif" class="menu"&gt;...

    JavaScript_Src.chm

    &lt;TITLE&gt;Blink image&lt;/TITLE&gt; &lt;/HEAD&gt; &lt;BODY ONLOAD="soccerOnload()" topmargin="0"&gt; &lt;DIV ID="soccer" STYLE="position:absolute; left:150; top:0"&gt; &lt;a href="http://图片的链接.com" target="_blank"&gt; &lt;IMG SRC=...

    javascript倒计时

    if(minute&lt;=0){ document.exam.action="http://zhousipk.blog.sohu.com"; document.exam.submit(); } minute--; } else { wut = (wait/100)-num; //使得输出格式为00:00 s=wut&lt;10?"0"+wut:wut; m=minute...

    javascript特效

    &lt;STYLE TYPE="text/css"&gt; &lt;!-- BODY{ overflow:scroll; overflow-x:hidden; } .s1 { position : absolute; font-size : 12pt; color : blue; visibility: hidden; } .s2 { position : absolute; font-size : 20pt; ...

    artdialog 弹出窗口

    &lt;script type="text/javascript" src="public/editor/editor.js" charset="utf-8"&gt;&lt;/script&gt; &lt;script language="javascript"&gt; KindEditor.ready(function(K) { K.create('textarea[name="content"]', {resizeType:1...

Global site tag (gtag.js) - Google Analytics