`

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:部分支持透明,需要额外处理

分享到:
评论

相关推荐

    雅虎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 {...

    跟我学HTML+CSS答案

    &lt;input type="text" id="name" name="name"&gt; &lt;br&gt; &lt;input type="submit" value="提交"&gt; &lt;/form&gt; ``` ### 第9章:框架与框架集 #### 框架集 - `&lt;frameset&gt;`: 定义一组框架。 - `rows` 和 `cols`: 定义每个框架的...

    三星9305收索

    --STATUS OK--&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="content-type" content="text/html;charset=utf-8"&gt;&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;&lt;link rel="dns-prefetch" href="//s1.bdstatic.com"/&gt;...

    html测试题

    - B.`&lt;input type="checkbox" checked/&gt;` 正确,但是不符合题目的四个选项。 - C.`&lt;img src="title.jpg" alt="Welcome"&gt;` 错误,`&lt;img&gt;` 标签应为自闭合形式。 - D.`&lt;hr/&gt;` 正确,符合XHTML规范。 **4. 下面...

    HTML标签大全

    - **`&lt;input&gt;`**: 输入字段标签,如文本框、按钮等。 - **`&lt;select&gt;`**: 下拉列表标签。 - **`&lt;button&gt;`**: 按钮标签。 - **`&lt;textarea&gt;`**: 多行文本输入区域标签。 - **`&lt;iframe&gt;`**: 内联框架标签,用于在页面中...

    出现问题a is defined高手帮忙

    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;&lt;/link&gt; &lt;script src="http://ditu.google.com/maps?file=api&amp;v=2&amp; key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ- i1...

    CSS通用样式基本文档

    - **作用**:隐藏元素,但不占用空间(`visibility:hidden`)或完全移出文档流(`display:none`)。 - **应用场景**:动态控制元素的可见性。 #### 十、高度控制 ```css .DivH5,.DivH10,.DivH15,.DivH20,.DivH25,....

    css公共样式

    ### CSS公共样式的知识点概述 本篇文档介绍了一套较为全面的CSS公共样式规则,旨在通过预定义的样式规范来简化网页开发流程、提高代码复用性并保持页面设计的一致性。以下将对这些样式规则进行详细解读,并探讨它们...

    前端关键字(打字练习)共1347个字符.docx

    - `head`: 存放元数据,如`&lt;title&gt;`和`&lt;meta&gt;`标签。 - `body`: HTML文档的主要内容区域。 - `title`: 页面标题。 - `br`: 换行。 - `hr`: 水平线。 - `font`: 设置文本字体属性(已过时,推荐使用CSS替代)。...

    HTML与CSS面试题.docx

    也可以使用visibility:hidden将元素隐藏,但是元素不放弃自己的位置。 7. 清除浮动的方式: 可以使用四种方法来清除浮动:① 让父盒子形成BFC,设置overflow:hidden属性;② 给后面的父盒子上设置clear:both属性,...

    css面试题.docx

    隐藏元素的方法有很多,如display:none、visibility:hidden、opacity:0等。 12. 实现一个三角形 可以使用CSS的border属性实现一个三角形。 13. 2d、动画、3d 知识点 CSS中的动画可以使用transition、animation...

    jquery需要的所有js文件

    a(b).parents().andSelf().filter(function(){return a.curCSS(this,"visibility")==="hidden"||a.expr.filters.hidden(this)}).length}function c(b,c){var e=b.nodeName.toLowerCase();if("area"===e){var f=b....

    前端面试题

    - **行内元素**:`&lt;a&gt;`, `&lt;span&gt;`, `&lt;img&gt;`, `&lt;input&gt;`, `&lt;button&gt;`等。 - **块级元素**:`&lt;div&gt;`, `&lt;p&gt;`, `&lt;ul&gt;`, `&lt;ol&gt;`, `&lt;table&gt;`等。 - **空(void)元素**:`&lt;br&gt;`, `&lt;hr&gt;`, `&lt;meta&gt;`, `&lt;link&gt;`等。这类元素没有...

    css常用样式

    visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0; } .clearfix { *zoom: 1; } ``` 7. **其他元素重置**:如图片 (`img`) 边框、字体样式等。 ```css img { ...

    尚硅谷_前端_面试题

    创建BFC的方式有:`float`属性、`position: absolute/fixed`、`display: inline-block/inline-table/table-caption/table/table-cell/table-column/table-column-group`、`overflow: hidden/auto/scroll`、`display:...

    前端面试宝典V4.0--2022.1.pdf

    10. **display:none与visibility:hidden**:`display:none`隐藏元素并移除其在布局中的空间,而`visibility:hidden`元素仍保留其空间,只是不可见。 11. **position属性**:`position`属性有static(默认值,不改变...

    css布局模型全面了解

    CSS布局模型是实现网页布局的基石,涉及如何使用CSS的属性和规则来安排网页中的元素。下面详细阐述一些主要的CSS布局模型。 流动模型是CSS中最基本的布局方式。在流动布局中,元素按照他们在HTML文档中的顺序流动...

Global site tag (gtag.js) - Google Analytics