CSS基础操作(七)-CSS三大特性(继承性、层叠性、优先级)、元素定位方式(static、relative、absolute、fixed、float)
5 CSS三大特性
5.1 继承性
元素可以继承上级元素的文本相关样式,元素自带效果不受继承影响,比如:超链接a标签的字体颜色、h1-h6字体大小,除非单独对此标签进行设置。
5.2 层叠性
多个选择器有可能选择到同一个元素,如果作用的样式不同,则全部层叠生效;如果作用的样式相同,则由优先级决定。
5.3 优先级
作用范围越小,优先级越高(就近原则):id>class>标签名>继承(继承属于间接选中)
6 元素定位方式
6.1 静态定位 static(文档流定位)
格式:position:static(默认)
显示特点:块级元素从上往下排列,行内元素从左向右排列
如何移动元素:通过外边距
测试代码:
显示效果:
6.2 相对定位 relative
格式:position:relative
显示特点:元素不脱离文档流(不管元素移动到哪里,仍然占着原来的位置)
如何移动元素:通过top/bottom/left/right让元素相对于初始位置做位置偏移
测试代码:
显示效果:
6.3 绝对定位 absolute
格式:position:absolute
显示特点:元素脱离文档流(只要元素修改成绝对定位,则它所占的位置立马让出)
如何移动元素:通过top/bottom/left/right让元素相对于窗口(默认)或某一个上级元素(需要在上级元素中做相对定位)做位置偏移
测试代码:
显示效果:
absolute测试:
测试代码:
显示效果:
6.4 固定定位 fixed
格式:position:fixed
显示特点:脱离文档流,元素会固定在窗口的某个位置,不会随着内容改变而改变
如何移动元素:通过left/right/top/bottom相对于窗口做位置偏移
测试代码:
显示效果:
6.5 浮动定位 float
格式:float:left/right;
显示特点:脱离文档流,元素从当前行向左或者向右浮动,当撞到上级元素边框或其它浮动元素时停止。如果一行显示不下就自动换行,换行时有可能卡住。如果元素的所有子元素全部浮动,则自动识别的高度为0,通过给元素添加:overflow:hidden解决。
如何移动元素:通过外边距
测试代码
显示效果:调整窗口大小时,自动出现在前一元素后,不足空间时换行,存在卡住问题(div5应该到新一行)
div块级元素高度为零:
设置overflow: hidden;自动匹配块级元素高度:但调整窗口大小时,元素不再进行换行
浮动定位练习:
测试代码:
显示效果: