Python-ccs高级选择器 盒模型

Posted 天宝老爹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Python-ccs高级选择器 盒模型相关的知识,希望对你有一定的参考价值。

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重叠取大值




































































































































以上是关于Python-ccs高级选择器 盒模型的主要内容,如果未能解决你的问题,请参考以下文章

关于盒模型的 盒子模型 浮动 定位以及高级选择器的使用

盒模型的属性/display显示(重要)/浮动(重要)

基础选择器,CSS3选择器, 盒模型,浮动

选择器 种类与优先级,颜色与长度,显示方式,嵌套模型,盒模型

层叠和继承的概念,选择器的优先级,盒模型,元素在页面上的定位体系,常规流

CSS基础