css高级选择器与盒模型
脱离文档流 ,其中就是产生了BFC
1.组合选择器 - 群组选择器 /* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */ div, #div, .div {color: red}
- 后代(子代)选择器 .sup .sub { 后代,sup一定是sub的父代(不一定是父集,sub就是被sup直接嵌套) } .sup > .sub {子代}
- 兄弟(相邻) 选择器 .up ~ .down {兄弟} .up + .down {相邻}
- 交集选择器 section.ss#s {标签类名id名综合修饰}
2.复杂选择器的优先级 1.与修饰符位置无关 2.属性选择器与类选择器权重相同 3.id 无限大于 类[属性] 无效大于 标签 4.权重只与个数相关,个数(类型)均相同时,最后由位置决定
3.伪类选择器 a链接标签四大伪类 :link 初始状态 :hover(鼠标悬浮!!!!!!) :active(鼠标点击中) :visited
位置相关 :nth-child() | :last-child |:first-child先确定位置再匹配类型 :nth-of-type() 先匹配类型再确定位置
取反 选择器:not(修饰词) | div:not(:nth-child(2))
:before (盒子渲染前) :after (盒子渲染后) :focus (表单标签获取焦点) :blur
4 精灵图: <head> <style type="text/css"> .lt1 { width: 155px; height: 48px; background: url(‘img/bg.png‘) no-repeat; background-position:0 0; } .lt1:hover { cursor: pointer; background: url(‘img/bg.png‘) no-repeat 0 -48px; } /*1.显示区域一定要与精灵图目标小图大小一致*/ /*2.通过背景图片定位方式将目标小图移至显示位置*/ background-position里通常是写负值 </style> </head> <body> <!-- 精灵图: 各种小图拼接起来的一张大图 --> <!-- 为什么使用精灵图: 减少请求次数, 降低性能的消耗, 二次加载图片资源时极为迅速(不在需要发送请求) --> <div class="box"></div> <div class="lt1"></div> </body>
5.盒模型 盒子的四个组成部分: margin + border + padding + content(width x height) display:inline,block,inline-block 都具有自身区域: content 提供给内容(文本,图片,子标签整个盒子)的显示区域 padding 介于border与content之间的区域 可以撑开border与content之间的距离,没有自身颜色(透出背景颜色),只有区域 注意:padding-top可以将自身与自身第一个子级分离
border 边框,宽度 颜色自身定义,padding和content颜色有背景色填充 margin 控制盒子位置==>盒模型布局,不参与盒子显示,其他都参与盒子显示
# 整体设置 padding: 上 右 下 左 (无值边取对边) # 分开设置 padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;
# 整体设置 border: 10px solid black; # 分开设置 border-top: 10px solid black; border-right: 10px solid black; border-bottom: 10px solid black; border-left: 10px solid black;
如何要保证显示区域大小不变,增加了padding和border,可以相应减小content的区域
边界圆角: border-radius:20px;(最大只能到盒子的一半) border-radius:50%; border-radius:10px 20px 30px ;顺序:左上 右上 右下 左下(没有的值取对边) border-radius:10px / 20px; 横向都取10px,纵向都取20px
6.盒模型margin布局 完成自身布局: 上移|左移margin-left | margin-top
影响兄弟布局:下移|右移: margin-top取正值|margin-left取正值 (上移|左移: top取负值|left取负值)
作为兄弟,上盒子的垂直布局会影响下盒子垂直方位, 上盒子的结束位置为下盒子的开始位置
坑1:父子联动; 解决方案1:子级里放个浮动 ,后再margin布局 float:left; margin-top:30px; 解决方案2:position:relative; top:30px;坑2:上兄弟下margin和下兄弟上margin重叠取大值
原文地址：https://www.cnblogs.com/du-jun/p/10170995.html
时间： 2024-08-28 16:53:03