首页分享 CSS属性书写顺序，定位，元素的显示与隐藏

CSS属性书写顺序，定位，元素的显示与隐藏

来源：花匠小妙招时间：2024-11-26 07:30

这是我参加朝闻道知识分享大赛的第 8 篇文章

CSS属性书写顺序

布局定位属性：display / position / float / clear /overflow

自身属性：width / height / margin / padding /

文本属性：color / font / text

其他属性：content / cursor /

定位

某个元素可以自由在一个盒子内移动，并且压住其他盒子，固定在屏幕中的某个位置

定位：将盒子定在某一个位置，用来摆放盒子

定位 = 定位模式 + 边偏移

静态定位—static

语法：{position : static ; }

静态定位按照标准流特性摆放位置，没有边偏移

静态定位在布局时很少用到

相对定位—relative

相对于它原来的位置来说的

语法：{position : relative ; }

特定：

移动位置时参照点是自己原来的位置

原来的标准流的位置继续占有，后面的盒子任然以标准流的方式对待她（不脱标）

绝对定位—absolute

相对于它祖先元素来说的

语法：{position : absolute ; }

特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位

如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位的祖先元素为参考点移动位置

绝对定位不再占有原先的位置（脱标）

子绝父相

子级是绝对定位的话，父级要用相对定位

自己绝对定位不会占有位置，可以放到父级元素的上面，也不会影响其他兄弟盒子

父级盒子需要添加一个定位，来限制子级盒子在其中显示

父级盒子需要占有位置

固定工位—fixed

将元素固定于浏览器可视区的位置，主要应用与浏览器页面滚动时元素位置是不变的

语法：{position : fixed; }

特点：

以浏览器的可视窗口为参照点移动元素

跟父元素没有任何关系

不随滚动条滚动

固定定位不占有原先的位置

固定在版心右侧位置

让固定位置的盒子 left: 50%，左侧贴到版心中线位置

让固定定位的盒子 margin-left: 版心宽度的一半

粘性定位—sticky

相对定位与固定定位的混合

语法：{position : sticky; }

特点：

以浏览器的可视窗口为参照点移动元素

占有原先的位置

必须添加 top , left , right , bottom 其中的一个才有效

定位叠放次序—z-index

语法：选择器 { z-index : 1 ;}

是指可以是正整数，负数或0，默认为 auto ，数值越大，盒子越靠上

如果属性值相同，则按照书写顺序，后来者居上

数字后面不加单位

只有定位的盒子才有 a-index 属性

定位拓展

绝对定位的和子居中

加了句对定位的盒子，不能通过 margin: 0 auto;进行水平居中，但可以通过以下步骤实现居中

left : 50%—让盒子左侧贴在父级元素的中线上

margin-left: -100px—让盒子向左移自身盒子宽度的一半

定位的特殊性

行内元素添加绝对定位或相对定位后，可以直接设置高度和宽度

块级元素添加绝对定位或相对定位后，如果不给宽度或高度，默认大小就是盒子内内容的大小

脱标的盒子不会触发外边距塌陷

绝对定位会完全压住盒子

浮动元素，只会压住下面标准流的盒子，但不会压住下面标准流盒子里面的文字或图片（因为浮动产生的目的最初是为了做文字环绕的效果，文字会围绕浮动元素）

但绝对定位会压住下面标准流所有内容

元素的显示与隐藏

display 属性

设定一个元素如何去显示

display : none ; 隐藏元素

隐藏元素后不再占有原来的位置

display : block ; 除了转换为块级元素，还可以表示显示元素

visibility可见的

指定一个元素可见还是隐藏

visibility : visible ; 元素可见

visibility : hidden ; 元素隐藏

元素隐藏后，继续占有原来的位置

overflow 溢出

指定了当盒子中的内容溢出时会发生什么

属性值描述visible不剪切内容也不添加滚动条，完全显示出来hidden不显示超出对象尺寸的内容，超出部分被隐蔽scroll不管超不超出尺寸范围，都会显示滚动条auto超出尺寸时会显示滚动条，没有超出时不显示滚动条

CSS属性书写顺序，定位，元素的显示与隐藏