大体结构
css引入类型
内联样式
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
内部样式
<style>
hr {color:sienna;}
</style>
外部样式
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
优先级
内联)Inline style > (内部)Internal style sheet >(外部)External style sheet > 浏览器默认样式
css结构
#单个
选择器 {
声明(属性:值)
}
#单个子元素
选择器>子选择器
{
声明(属性:值)
}
#相邻
选择器+子选择器
{
声明(属性:值)
}
选择器~后续选择器
{
声明(属性:值)
}
#分组(选择器平级关系,用,分开)
选择器,选择器,选择器 {
声明(属性:值)
}
#嵌套(选择器嵌套关系,用空格分开)
选择器 选择器 选择器 {
声明(属性:值)
}
具体属性
定位
static定位:没有定位,元素出现在正常的流中(默认定位) 参照物流 占位 上下左右无效
fixed 定位:固定定位 参照物浏览器 不占位 上下左右有效
relative 定位:相对定位 参照物原有位置 占位 上下左右有效
absolute 定位:绝对定位 参照物已定位的父容器 不占位 上下左右有效
重叠的元素效果:同一父容器下absolute绝对定位,用 z-index排层级。