第五十六 css选择器和盒模型
1.组合选择器
群组选择器
#每个选择为可以位三种基础选择器任意一个,用逗号隔开,控制多个。
div,#div,.div{
color:red
}
后代(子代)选择器
.sup .sub{
后代
}
.sup .sub{
后代
}
.sup > .sub{
子代
}
兄弟(相邻)选择器
.up~.down{
兄弟
}
.up + .down{
相邻
}
交集选择器
section.ss#s{
标签类名id名综合修饰
}
2.复杂选择器的优先级
1.与修饰符位置无关
2.属性选择器与类选择器权重相同
3.id 无限大于 类[属性] 无限大于 标签
4.权重只与个数相关,个数(类型)均相同时,最后由位置决定
3.伪类选择器
链接标签四大伪类
:hover(悬浮)| :active(点击)
:link | visited
位置相关
:nth-child() | :last-child 先确定位置再匹配类型
:nth-of-type() 先匹配类型再确定位置
取反
选择器:not(修饰词) | div:not(:nth-child(2))
4.盒类型
margin + border + padding +content(width x height)
都具有自身区域
marigin参与布局,不参与盒子显示,其他都参与盒子显示
border颜色自身定义,padding和content颜色都由背景色填充
#整体设置
padding:上 右 下 左(无边取值对边)
#分开设置
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
#整体设置
border: 10px solid black;
# 分开设置
border-top: 10px solid black;
border-reght: 10px solid black;
border-bottom: 10px solid black;
border-left: 10px solid black;
如何要保证显示区域大小不变,增加padding和border,可以相应减小content的区别域
5.盒模型布局
完成自身布局:margin-left | margin-top
下移|右移: top取正值|left取正值
上移|左移: top取负值|left取负值
作为兄弟,上盒子的垂直布局会影响下盒子的垂直方位,上盒子的结数为为下盒子的开始位置。
第五十六 css选择器和盒模型的更多相关文章
- css 选择器;盒模型
一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...
- 【Visual C++】游戏开发五十六 浅墨DirectX教程二十三 打造游戏GUI界面(一)
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/16384009 作者:毛星云 ...
- 第三百五十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点
第三百五十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点 1.分布式爬虫原理 2.分布式爬虫优点 3.分布式爬虫需要解决的问题
- “全栈2019”Java第五十六章:多态与字段详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 《手把手教你》系列技巧篇(五十六)-java+ selenium自动化测试-下载文件-上篇(详细教程)
1.简介 前边几篇文章讲解完如何上传文件,既然有上传,那么就可能会有下载文件.因此宏哥就接着讲解和分享一下:自动化测试下载文件.可能有的小伙伴或者童鞋们会觉得这不是很简单吗,还用你介绍和讲解啊,不说就 ...
- 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- 浅谈css中的盒模型(框模型)
css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
- Abp(net core)+easyui+efcore实现仓储管理系统——出库管理之七(五十六)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统--ABP总体介绍(一) abp(net core)+ ...
随机推荐
- linus 下redis守护进程启动
修改配置文件 sudo vim /usr/src/redis/redis.conf // 具体的安装目录不一样,以安装的时候为准 # 将daemonize 改为yes daemonize yes 重新 ...
- hdu 1730 Nim博弈
题目来源:http://acm.hdu.edu.cn/showproblem.php?pid=1730 Nim博弈为:n堆石子,每个人可以在任意一堆中取任意数量的石子 n个数异或值为0就后手赢,否则先 ...
- Linux下查看文件系统磁盘使用
[root@localhost ~]# df -h 可以查看所有文件系统的磁盘使用情况 du --max-depth=1 -h 可以查看当前目录下各子目录的磁盘使用情况 参考:http://www.2 ...
- 解决scrapy报错:ModuleNotFoundError: No module named 'win32api'
ModuleNotFoundError: No module named 'win32api' 表示win32api未安装 解决办法: 下载对应python版本的win32api,并安装. 下载地址: ...
- 从零开始搭建VUE项目
前言: 此样板面向大型,严肃的项目,并假定您对Webpack和vue-loader有些熟悉. 请务必阅读vue-loader的常见工作流配方的文档. 如果您只想尝试vue-loader或者鞭打一个快速 ...
- HTML5经典实例——1基础语法和语义
1指定DOCTYPE 在页面的最开始处指定HTML5 DOCTYPE DOCTYPE是不区分大小写的.可以任意的使用大小写. <!DOCTYPE html> <html lang=& ...
- Hbase的作用
实时动态增加列 多版本的意思为多个用户地址,多个用户信息,多个用户号码
- SOAP-ERROR: Encoding: string … is not a valid utf-8 string
今天遇到一个错误,看标题就知道是什么错误了.... 最坑爹的是,不是所有的用户会报这个错误.只有少部分.在生产环境又没办法调试. 找了半天都不知道什么原因,字面意思大概是需要一个utf8编码的字符串, ...
- Java集合和数组的区别
参考:Java集合和数组的区别 集合和容器都是Java中的容器. 区别 数组特点:大小固定,只能存储相同数据类型的数据 集合特点:大小可动态扩展,可以存储各种类型的数据 转换 数组转换为集合: A ...
- 错误模块名称: KERNELBASE.dll
部署win服务时,经常会出现类似下面的错误,错误模块名称: KERNELBASE.dll. 日志名称: Application 来源: Application ...