CSS 知识遗漏汇总

大体结构

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排层级。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值