WEB Basic基础-06

1、浮动


1、清除浮动


元素一旦浮动起来之后，后面的元素要上前占位，有可能被浮动元素压在底下。如果元素不想被压在底下的话，则可以通过清除浮动影响的方式来解决问题。


1、语法


属性：clear


取值：


1、none


默认值，不做任何清除浮动的操作


2、left


清除当前元素前面元素左浮动所带来的影响，即不会被前面元素左浮动而压在底下


3、right


清除当前元素前面元素右浮动所带来的影响，即不会被前面元素右浮动而压在底下


4、both


清除当前元素前面元素任何一种浮动方式所带来的影响


2、浮动元素对父元素高度的影响


由于浮动元素会脱离文档流，所以是不占据页面空间的，那么也就不占父元素的空间。那么父元素的高度是以未浮动的子元素的高度为准的。


解决父元素的高度：


1、为父元素设置高度


弊端：不一定每次都清楚的知道父元素的高度


2、设置父元素也浮动


弊端：会对父元素后面的元素产生位置的影响


3、设置父元素的 overflow 为 hidden 或 auto


弊端：如果有溢出要显示的元素，也一同被隐藏了


4、在父元素中追加空块级元素，并设置其clear属性为both


2、其他定位


1、相关属性


1、定位方式


属性：position


取值：


1、static - 静态的，默认值


2、relative - 相对定位


3、absolute - 绝对定位


4、fixed - 固定定位


注意：将元素的position设置为relative/absolute/fixed任意一种的话，那么该元素就称为"已定位元素"


2、偏移属性(共4个)


作用：配合着已定位元素实现位置的移动


属性：top / right / bottom /left


取值：以 px 为单位的数值


top:以元素的上边为基准边移动元素


right:以元素的右边为基准边移动元素


bottom:以元素的下边为基准边移动元素


left:以元素的左边为基准边移动元素


2、定位方式 - 相对定位


1、什么是相对定位


元素会相对于它原来的位置偏移某个距离


2、场合


元素位置微调时使用相对定位


3、语法


属性：position


取值：relative


配合着 偏移属性 实现位置的移动






练习：


创建一个网页 03-position-relative.html


创建一个ul以及四个li


每个li 100*30，背景颜色，左浮动，10px右外边距


1、使用相对定位


当鼠标悬停在li上时，li向左上偏移10px


2、使用margin 完成上述操作


3、定位方式 - 绝对定位(难点)


1、什么是绝对定位 & 特点


1、绝对定位的元素会脱离文档流-不占页面空间


2、绝对定位的元素会相对于离它最近的，已定位的，祖先元素去实现位置的初始化


3、如果元素没有已定位的祖先元素，那么元素将相对于body去实现位置的初始化


2、语法


属性：position


取值：absolute


配合着 偏移属性 实现位置的定位


3、注意


绝对定位的元素会变为块级元素


(任何元素变成绝对定位的话，就可以直接修改尺寸)


4、堆叠顺序


1、什么是堆叠顺序


已定位元素们堆叠在一起的排列顺序


2、语法


属性：z-index


取值：无单位的数字，数字越大元素越靠上，默认值为 0


3、注意


1、如果堆叠顺序相同的话，则后来者居上


2、只有已定位的元素才能使用z-index


relative/absolute/fixed


3、父子元素之间，永远都是子压在父上，是不受堆叠顺序影响的


5、定位方式 - 固定定位


1、什么是固定定位


让元素固定在浏览器窗口的某个位置处，不会随着滚动条的滚动而发生位置的改变


2、语法


属性：position


取值：fixed


配合着 偏移属性 实现元素位置的固定


3、注意


1、固定定位的元素永远都是相对于body实现位置初始化的


2、固定定位元素会变成块级元素


3、显示


1、显示方式


1、什么是显示方式


决定了元素是以什么样的方式显示在网页中（块级/行内/行内块）


2、语法


属性：display


取值：


1、none


让元素不显示 - 隐藏


脱离文档流 - 不占据页面空间


2、block


将元素变为块级元素


3、inline


将元素变为行内元素


4、inline-block


将元素变为行内块元素


特点：


1、多个元素能够在一行内显示 - 行内


2、允许修改尺寸 - 块级


2、显示效果


1、可见性属性


属性：visibility


取值：


1、visible


默认值，可见的


2、hidden


隐藏的，未脱离文档流，所以还占据着页面空间


面试：


visibility:hidden和display:none的区别


visibility:hidden 未脱离文档流


display:none 脱离文档流，不占空间


2、透明度属性


属性：opacity


取值：0(完全透明) ~ 1(完全不透明)


测试：


网页中创建两个h1标记，


第一个h1，使用rgba设置红色背景，0.5透明度


第二个h1，设置红色背景，并设置元素的透明度为 0.5


3、垂直方向对齐方式


属性：vertical-align


取值：top / middle / bottom / baseline






1、放在td中


相当于是valign的作用


取值：top / middle / bottom,middle是默认值


2、图片 和 行内块元素中


设置元素两端的文本相对于元素的垂直对齐方式


取值：top / middle / bottom / baseline，baseline是默认值


3、光标


作用：改变鼠标悬停在元素上时鼠标的样子


属性：cursor


取值：


1、default


2、pointer - 小手


3、text - I


4、crosshair - +


5、wait - 等待


6、help - 帮助






#main{


cursor:pointer;


}