日度归档:2020年1月8日

CSS 布局 Overflow属性简介说明


摘要:
下文讲述css中overflow属性简介说明,如下所示;

css overflow属性功能:
css overflow属性用于控制内容对溢出元素的处理方式。
overflow属性值简介:

描述
visible

默认值,内容不会被修剪,会呈现在元素框之外
hidden

内容会被修剪,并且其余内容是不可见的
scroll

内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
auto

如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
inherit

规定应该从父元素继承 overflow 属性的值


注意事项:
只有当overflow属性高度高于本身高度时,此属性才起作用

css position(定位)属性简介说明


摘要:
下文讲述position属性简介说明,如下所示:

position 属性简介

static 定位

当position属性值为static时,元素没有默认值,没有定位,按照正常文档流进行显示。
当position属性值为static时,不受top,bottom,left,right定位影响。

fixed 定位

元素位置相对于浏览器的固定定位,fixed属性—-需结合top right left bottom定位值。

注意事项:
fixed属性不占用浏览器的页面空间。
fixed属性可与其它元素重叠


relative 定位

相对定位元素的定位是相对其正常位置。
relative 定位–主要是相对父级元素的定位。

absolute 定位

绝对定位元素,相对于父级元素位置,如父级元素无定位,则相对html定位


sticky 定位

sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动

如何使用css代码控制一个元素(display)显示和Visibility(可见性)呢?


摘要:
下文讲述使用css的display和visibility属性控制元素显示和可见性的方法分享,如下所示:


display属性简介说明

display等于none时,元素将隐藏,并且释放在页面中所占用的空间
display等于block时,元素将显示


visibility属性简介说明

visibility等于hidden时,元素将隐藏,并且不释放页面中所占用空间
visibility等于visible时,元素将显示