首页 > 编程知识 正文

css定位方式,css3特性

时间:2023-05-05 13:19:59 阅读:46740 作者:361

CSS属性书写顺序布局属性: display/position/float/clear/visibility/overflow自身属性: width/height/margin/padding/overflow 文本对齐/垂直对齐/写入空间/断开其他属性: content/cursor/border-radius/book

导航栏注意事项:

在实际的开发中,使用的不是链接a,而是用li包含的方法

无序列表dl dt dd

写了两个晚上才写完这个

因为要将定位盒定位在某个位置,所以定位要排列盒,按照定位移动盒

定位=定位模式的边缘偏移

定位模式通过CSS的位置值设定

值语义静态静态相对位置relative相对位置absolute绝对位置fixed固定位置边偏移边偏移属性示例说明toptop:80px刀尖偏移,位置元素距父元素上边的距离bottombottom:80px底偏移位置元素相对于父元素下边的距离leftleft:80px左偏移、位置元素相对于父元素的左边线的距离rightright:80px右偏移、位置元素相对于父元素的右边线的距离相对位置是元素移动时相对于原始位置的位置

选择器{position:relative; }

绝对移动时,对其祖先的元素

选择器{position:absolute; }

三个特点:

如果没有祖先元素或祖先元素未定位,且祖先元素相对于浏览器对齐,则相对于最近级别的对齐祖先元素,将位置移动到不占用绝对对齐原始位置的子绝对父元素,并将其与子元素绝对对齐

如果不放置父框,则子元素的放置以浏览器页面为准

锚点固定在浏览器的显示区域,而与父元素无关

定位:固定;

学成在线案例

版心右侧:先left:50%;固定定位的盒子margin-left:版心宽度的一半; 滑动到有粘性定位的位置时,箱子会被固定

position:sticky; top:10px; 特点:

使用浏览器窗口作为参照点移动元素

粘性定位占原位

必须添加边偏移才能启用

重叠顺序根据z-index的值决定哪个在上面

数值越大,箱子越靠上,既可以是正的也可以是负的

{z-index:2; }绝对位置框中心的绝对位置框不能在边距中居中

固定到版心

先进行父元素宽度的一半,再向左进行箱子宽度的一半水平

一半高度下降到箱子高度的一半垂直

可以在行内元素设置绝对或固定位置,以便直接为高度和宽度块级元素设置绝对或固定位置。 如果不设置宽度和高度,默认大小为内容大小,浮动元素不会抑制标准流动字符。 绝对位置控制所有内容本月是考试月。 学习进度慢了很多。 寒假期间再冲吧,加油吧。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。