CSSBasic Day04
2017-01-22 18:18:07 0 举报AI智能生成
在CSS基础课程的第四天，我们深入探讨了CSS的核心概念和技巧。学习了如何使用选择器来精确地定位网页元素，以及如何利用属性和值来修改元素的样式。我们还了解了层叠和继承的概念，以及如何通过优先级规则来确定哪个样式将应用于特定的元素。此外，我们还学习了如何使用媒体查询来创建适应不同设备和屏幕尺寸的响应式设计。通过今天的学习，你已经掌握了基本的CSS技能，可以开始创建更加丰富和个性化的网页设计了。
作者其他创作
大纲/内容
显示
显示方式
属性：display
none
让生成的元素没有框,即隐藏
脱离文档流
block
块级元素
inline
行内
inline-block
行内块
位置与行内元素一样
允许修改宽和高
显示效果
显示/隐藏
属性：visibility
visible ： 可见的
hidden ：隐藏的
collapse ： 删除表格一行或一列时，表格整体布局不变
透明度
属性：opacity
0~1之间的数字(小数)
数字越小 透明度越高
opacity：0.1；若隐若现
垂直居中对齐
属性：vertical-align
行内块元素
单元格
img
取值
top
middle
bottom
baseline
光标
cursor
default
pointer
crosshair
text
wait
help
列表
列表项标志
list-style-type
none
disc
... ...
列表项图像
list-style-image
url(图像路径)
列表项位置
list-style-position
outside
inside
列表属性
list-style
type url() position;
常用：list-style:none;
浮动
定位概述
所谓定位指的就是元素出现在网页的位置
定位的分类
普通流定位
浮动定位
相对定位
绝对定位
固定定位
普通流定位
普通流定位，又称为文档流定位，是页面元素的默认定位方式
页面中的块级元素：从上到下的方式一个接一个的排列
页面中的行内元素：从左到右的方式一个接一个的排列
浮动定位
概述（特征）
将元素排除在文档流之外即脱离文档流，元素不再占据页面空间（但依然会显示），但其他未浮动元素要上前补位
元素只会在当前行浮动
浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上
浮动元素依然会在包含框内
浮动元素能够让多个块级元素在一行内显示
属性
float
none
默认值，没有任何的浮动效果
left
左浮动，让该元素停靠在父元素的左边，或停靠在左侧已有的浮动元素边缘上
right
右浮动，让该元素停靠在父元素的右边，或停靠在右侧已有的浮动元素边缘上
浮动带来的特殊效果
一行内，显示不下所有的已浮动元素时，最后一个将换行（有可能被卡住）
元素一旦浮动起来之后，那么宽度将变成自适应(宽度由内容决定)
元素一旦浮动起来之后，那么就将变成块级元素,尤其对行内元素，影响最大
文本，行内元素，行内块元素时采用环绕的方式来排列的，是不会被浮动元素压在底下的，会巧妙的避开浮动元素
清除浮动
作用
清除当前元素前面元素浮动所带来的影响
语法
属性
clear
取值
none
默认值，不做任何清除浮动的操作
left
清除前面元素左浮动带来的影响
right
清除前面元素右浮动带来的影响
both
清除前面元素所有浮动带来的影响
浮动元素对父元素的影响
影响
由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0
解决方案
直接设置父元素的高度
设置父元素浮动
为父元素设置overflow属性
hidden
auto
父元素中，追加空子元素，并设置其clear属性为both
定位
定位属性
position
static
relative
absolute
fixed
作用：实现元素的特殊定位方式
取值为非static时，被称为已定位元素
偏移属性
top属性
上下移动元素
+ ：下移动
- ：上移动
bottom属性
上下移动
+ ： 上移动
- ：下移动
left 属性
左右移动
+ ： 右移动
- ： 左移动
right 属性
左右移动
+ ： 左移动
- ：右移动
z-index
堆叠顺序
只针对已定位元素有效
相对定位
what？
元素框会相对于它原来的位置偏移某个距离
位置微调
属性 & 值
position:relative;
配合偏移属性实现位置移动
测试：对一个已定位元素实现 四个偏移属性值
使用场合
自身元素的位置微调
配合着 绝对定位 来使用
绝对定位
what ？
脱离文档流-不占据页面空间
会相对于最近的已定位祖先元素去实现定位
如果没有已定位的祖先元素，那么就相对于最初的包含块
属性 & 值
position:absolute;
注意
绝对定位的元素 都将 变成块级元素
margin的处理，除了 auto外，其他数值均正常显示
可以调整堆叠顺序
堆叠顺序
属性：z-index
注意：
父子之间的堆叠效果永远都是子压父
固定定位
what
将元素固定在页面的某个位置处
不会随着滚动条的滚动而发生位置的变化
脱离文档流，不占据页面空间
属性 & 值
position:fixed
注意
固定定位元素永远都是相对于body实现位置定位
0 条评论
下一页
