锐客网

  1. 首页 > it技术 > >

前端学习笔记之--CSS(4)

定位 视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
常规流浮动：float定位：position
定位：手动控制元素在包含块中的精准位置
涉及的CSS属性：position
position 属性
默认值：static，静态定位（不定位）
relative：相对定位
absolute：绝对定位
fixed：固定定位
一个元素，只要position的取值不是static，认为该元素是一个定位元素。
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
文档流中的元素摆放时，会忽略脱离了文档流的元素
【前端学习笔记之--CSS(4)】文档流中元素计算自动高度时，会忽略脱离了文档流的元素
相对定位 不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。
可以通过四个CSS属性对设置其位置：
leftrighttopbottom
盒子的偏移不会对其他盒子造成任何影响。
绝对定位 宽高为auto，适应内容
包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）
固定定位 其他情况和绝对定位完全一样。
包含块不同：固定为视口（浏览器的可视窗口）
定位下的居中
某个方向居中：
定宽（高）
将左右（上下）距离设置为0
将左右（上下）margin设置为auto
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖
补充 绝对定位、固定定位元素一定是块盒
绝对定位、固定定位元素一定不是浮动
没有外边距合并
透明度 opacity，它设置的是整个元素的透明，它的取值是0 ~ 1
在颜色位置设置alpha通道(rgba )
鼠标
使用cursor设置
盒子隐藏
display:none，不生成盒子
visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。
背景图
和img元素的区别img元素是属于HTML的概念背景图属于css的概念
1.当图片属于网页内容时，必须使用img元素
2. 当图片仅用于美化页面时，必须使用背景图
涉及的css属性
1.background-image
2.background-repeat
默认情况下，背景图会在横坐标和纵坐标中进行重复
3.background-size
预设值：contain、cover，类似于object-fit 数值或百分比
4.background-position
设置背景图的位置。
预设值：left、bottom、right、top、center
数值或百分比
雪碧图（精灵图）（spirit）
5.background-attachment
通常用它控制背景图是否固定。
6.背景图和背景颜色混用

    推荐阅读


    上一篇：一把螺丝刀引发的“革命”

    下一篇：《商君书》新解（二）（原创）