首页 > 其他 > 详细

盒模型布局相关-基础与语法

时间:2018-11-18 15:49:32      阅读:165      评论:0      收藏:0      [点我收藏+]

布局相关属性

opacity:0; /透明度 1完全显示0 完全隐藏/

1.display :修改元素性质 (display: block)

我们不能为行内元素设置width、height,我们可以通过修改display来修改元素的性质

-block : 设置元素为块元素       在元素后面换行,显示下一个元素 ,多添加一个就会到下一行显示【Div】

-inline : 设置元素为行内元素  多个块可以显示在一行内【span】

-inline-block : 设置元素为行内块元素

-none : 隐藏元素(元素将在页面中完全消失)

内联元素和块级元素转换

<style>
     .display-div{    background-color: red;    width: 200px;/*可定义宽度*/    display: inline;/*转换为内联元素*/}
     .display-span {    background-color: green;    width: 200px;/*无法定义宽度*/    display: block; /*编程块级元素就可以定义宽度了*/}
</style>

 

2.visibility 设置元素是否可见

和display不同,使用visibility隐藏一个元素,隐藏后其在文档中所占的位置会依然保持,不会被其他元素覆盖。

-visible : 可见的

-hidden : 隐藏的

 

3.overflow:控制内容溢出

当标签内容超出样式的宽高时,浏览器就会让内容溢出盒子。通过overflow来控制溢出的情况

-visible : 默认值

-scroll : 添加滚条

-auto : 根据需要添加滚动条

-hidden : 超出盒子内容隐藏

 

4.float 浮动

使元素脱离原来的文本流,在父元素中浮动起来,浮动使用float属性.

- none : 不浮动

- left : 左浮动

- right : 右浮动

①块级元素和行内元素都可以浮动,当一个行内元素浮动以后将会自动变为一个块级元素。

②当一个块级元素浮动以后,宽度默认被内容撑开,所以当浮动一个块级元素时,我们要为其制定一个宽度。

③当元素浮动后,其下方的元素会上移,元素中的内容将会围绕在元素的周围。

④浮动会使元素脱离文本流,即不在文档中占用位置。

⑤元素设置浮动后,会一直向上漂浮直到遇到父元素的边界或者其他浮动元素

⑥元素浮动后完全脱离文档流,这时不再影响父元素的高度,也就是浮动元素不会撑开父元素。

⑦浮动元素默认会变为块元素,即使设置display:inline依然是个快元素。

清除浮动

clear 清除元素周围的浮动对元素的影响。(元素不会因为上方出现了浮动元素而改变位置)

- left 忽略左浮动

- right 忽略右浮动

- both 忽略全部浮动

- none 不忽略浮动,默认值

 

5.position 定位

控制浏览器在何处显示特定的元素。可以使用position属性把一个元素放置到网页中的任何位置。

-static 没有定位

-relative相对定位

-absolute绝对定位

-fixed   根据浏览器窗口进行定位

left ,right ,top ,bottom 离页面顶点的距离

相对定位:relative

每个元素在文档流都有一个自然位置,相对于这个位置对元素进行移动,周围的元素完全不受此影响。

将position属性设置为relative时,则开启了元素的相对定位。

当开启相对定位后,可以使用top、right、bottom、Left四个属性对元素进行定位。

特点:

①如果不设置元素的偏移量,元素位置不会发生改变。

②相对定位不会是元素脱离文本流,元素在文本流中的位置不会改变。

③相对定位不会改变元素原来的属性。

④相对定位使元素的层级提升,使元素可以覆盖文本流中的元素。

绝对定位:absolute

绝对定位使元素相对于离他最近的父级定位元素进行定位。

当开启绝对定位后,可以使用top、right、bottom、Left四个属性对元素进行定位。

特点:

①使元素脱离文本流,不受其他元素的影响和影响其他元素。

②块元素的宽度会被内容撑开。

③使行内元素变为块级元素。

④absolute和relative一般成对使用。

固定定位:fixed

设置后,该元素被锁定在屏幕的某个位置上,滚动网页时,固定元素会在屏幕上保持不动。

同样可以使用top、right、bottom、Left四个属性对元素进行定位。

 

6.z-index 提升定位元素所在的层级,值越大,优先级越高。

 

 

兼容问题及高效开发工具

<!--①兼容性测试工具 : IE Tester 和 Multibrowser-->
<!--②常用的浏览器 Google chrome Firefox opera-->
<!--③高效的开发工具:-->
<!--Notepad + + 、 subline Text 、记事本 轻量级的-->
<!--WebStorm  Dreamweaver 重量级的-->
<!--④网页设计工具:fireworks 、Photoshop-->
<!--⑤判断IE的方法:只有在IE浏览器下才能执行-->
<!--<!—[if 条件版本]> 那么显示 <![endif]—> 条件判断格式-->
<!--除了IE8都可以显示 [if !IE 8]不等于-->
<!--如果IE 浏览器版本小于5.5的显示 [if lt IE 5.5] 小于-->
<!--如果IE浏览器版本大于5的显示   [if gt IE 5] 大于-->
<!--如果IE浏览器版本小于6的显示  [if lte IE 6]  小于或者等于-->
<!--如果IE浏览器版本小于7的显示  [if gte IE 7]  大于或等于-->
<!--如果IE浏览器版本大于IE5小于7的显示  [if (gt IE 5)&(lt IE 7)]  大于和小于之间-->
<!--如果是IE6或者IE7显示  [if (IE 6)|(IE 7)] 或-->
<!--如果是IE8  &lt;!&ndash;[if IE 8]>  仅-->

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

盒模型布局相关-基础与语法

原文:https://www.cnblogs.com/StevenHuSir/p/WebLayout.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!