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:部分支持透明,需要额外处理
相关推荐
<style type="text/css"> body {background: #fff;font-family: "Lucida Grande", Helvetica, Arial, sans-serif;font-size: 12px;} p {line-height:140%} #info {height:500px; position:relative;} #adsie {...
<input type="text" id="name" name="name"> <br> <input type="submit" value="提交"> </form> ``` ### 第9章:框架与框架集 #### 框架集 - `<frameset>`: 定义一组框架。 - `rows` 和 `cols`: 定义每个框架的...
--STATUS OK--><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><link rel="dns-prefetch" href="//s1.bdstatic.com"/>...
- B.`<input type="checkbox" checked/>` 正确,但是不符合题目的四个选项。 - C.`<img src="title.jpg" alt="Welcome">` 错误,`<img>` 标签应为自闭合形式。 - D.`<hr/>` 正确,符合XHTML规范。 **4. 下面...
- **`<input>`**: 输入字段标签,如文本框、按钮等。 - **`<select>`**: 下拉列表标签。 - **`<button>`**: 按钮标签。 - **`<textarea>`**: 多行文本输入区域标签。 - **`<iframe>`**: 内联框架标签,用于在页面中...
<link rel="stylesheet" type="text/css" href="style.css"></link> <script src="http://ditu.google.com/maps?file=api&v=2& key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ- i1...
- **作用**:隐藏元素,但不占用空间(`visibility:hidden`)或完全移出文档流(`display:none`)。 - **应用场景**:动态控制元素的可见性。 #### 十、高度控制 ```css .DivH5,.DivH10,.DivH15,.DivH20,.DivH25,....
### CSS公共样式的知识点概述 本篇文档介绍了一套较为全面的CSS公共样式规则,旨在通过预定义的样式规范来简化网页开发流程、提高代码复用性并保持页面设计的一致性。以下将对这些样式规则进行详细解读,并探讨它们...
- `head`: 存放元数据,如`<title>`和`<meta>`标签。 - `body`: HTML文档的主要内容区域。 - `title`: 页面标题。 - `br`: 换行。 - `hr`: 水平线。 - `font`: 设置文本字体属性(已过时,推荐使用CSS替代)。...
也可以使用visibility:hidden将元素隐藏,但是元素不放弃自己的位置。 7. 清除浮动的方式: 可以使用四种方法来清除浮动:① 让父盒子形成BFC,设置overflow:hidden属性;② 给后面的父盒子上设置clear:both属性,...
隐藏元素的方法有很多,如display:none、visibility:hidden、opacity:0等。 12. 实现一个三角形 可以使用CSS的border属性实现一个三角形。 13. 2d、动画、3d 知识点 CSS中的动画可以使用transition、animation...
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....
- **行内元素**:`<a>`, `<span>`, `<img>`, `<input>`, `<button>`等。 - **块级元素**:`<div>`, `<p>`, `<ul>`, `<ol>`, `<table>`等。 - **空(void)元素**:`<br>`, `<hr>`, `<meta>`, `<link>`等。这类元素没有...
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:...
10. **display:none与visibility:hidden**:`display:none`隐藏元素并移除其在布局中的空间,而`visibility:hidden`元素仍保留其空间,只是不可见。 11. **position属性**:`position`属性有static(默认值,不改变...
CSS布局模型是实现网页布局的基石,涉及如何使用CSS的属性和规则来安排网页中的元素。下面详细阐述一些主要的CSS布局模型。 流动模型是CSS中最基本的布局方式。在流动布局中,元素按照他们在HTML文档中的顺序流动...