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

Posted 2021-01-20 stevenhusir

布局相关属性

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]>  仅-->