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高级选择器 盒模型的更多相关文章
- css高级选择器&盒模型
css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...
- web开发: css高级与盒模型
一.组合选择器 二.复制选择器优先级 三.伪类选择器 四.盒模型 五.盒模型显示区域 六.盒模型布局 一.组合选择器 <!DOCTYPE html> <html> <he ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- python全栈开发day39-CSS继承性和层叠性、权重问题、盒模型和其属性、文本级标签和块级标签、浮动
一.上次内容回顾 1.CSS的三种引入方式: 行内式 内接式 外接式 链接式 导入式 2.基础选择器和高级选择器 1)标签选择器 p{} 2) id选择器 #nva{} 3) 类选择器 .nva{} ...
- python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器
一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...
- 选择器(&伪)/盒模型
一.选择器高级 1.组合选择器: /*群主选择器 : 同时可以控制多个选择器*/ /*#dd,div,#a{}*/ /* d{ 起相同类名 color: red; }*/ 举例: .d1,.d2,.d ...
- css 选择器;盒模型
一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...
- 任务二:1、选择器 2、连接集中状态的顺序 3、浮动的用发和原理 4、盒模型在IE和Google等不同浏览器的区别与联系
1.选择器类型 标签选择器,类选择器,ID选择器,组合选择器,伪类和伪元素,属性选择器,子选择器,同胞选择器, :not()选择器 1.同胞选择器 相邻同胞标签: h2 + p{ color:red; ...
- 【CSS】盒模型+选择器(你选择的要操作的对象)
盒模型 转http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 1.w3c标准的盒模型和ie的盒模型主要差别在于content的w ...
随机推荐
- Java使用SFTP和FTP两种连接方式实现对服务器的上传下载 【我改】
[]如何区分是需要使用SFTP还是FTP? []我觉得: 1.看是否已知私钥. SFTP 和 FTP 最主要的区别就是 SFTP 有私钥,也就是在创建连接对象时,SFTP 除了用户名和密码外还需要知道 ...
- 关于setvbuf()函数的详解
为什么要使用setvbuf函数 如果你的内存足够大,可以把文件IO的BUF设置大一些,这样每次你用fopen/fread/fwrite/fscanf/fprintf语句的时候,都会在内存里操作,减少内 ...
- XMind 入门教程
选自:http://www.xmindchina.net/ XMind 是一款非常实用的商业思维导图软件,应用全球最先进的Eclipse RCP 软件架构,全力打造易用.高效的可视化思维软件.对于新手 ...
- Harbor镜像迁移
目录 背景说明 方案实现 背景说明 在早期生产环境尝试使用docker的时候,虽然使用了harbor作为镜像仓库,但是并没有做好相关存储规划,所有的镜像都直接存储到了harbor本地.随着业务发展,本 ...
- CodeForces834D DP + 线段树
http://codeforces.com/problemset/problem/834/D 将一个长度为n的序列分为k段 使得总价值最大一段区间的价值表示为区间内不同数字的个数 n<=3500 ...
- brctl创建虚拟网卡详解
brctl创建虚拟网卡详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 很久之前我分享过一篇关于搭建Openvpn的笔记,在笔记的最后我分享了一个脚本,是用来创建虚拟网卡的,今天 ...
- python自动化运维之路~DAY3
python自动化运维之路~DAY3 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.函数 1.函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不 ...
- 学习windows编程 day4 之视口和窗口
LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) { HDC hdc; PAINTSTRU ...
- Jupyter 魔术命令(magic commands)
自动重新加载更改的模块 命令参数如下所示: %autoreload: 自动重载%aimport排除的模块之外的所有模块. %autoreload 0: 禁用自动重载 %autoreload 1: 自动 ...
- Kruskal算法:最小生成树
//Kruskal算法按照边的权值从小到大查看一遍,如果不产生圈(重边等也算在内),就把当前这条表加入到生成树中. //如果判断是否产生圈.假设现在要把连接顶点u和顶点v的边e加入生成树中.如果加入之 ...