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选择器和盒模型的更多相关文章

  1. css 选择器;盒模型

    一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...

  2. 【Visual C++】游戏开发五十六 浅墨DirectX教程二十三 打造游戏GUI界面(一)

    本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/16384009 作者:毛星云 ...

  3. 第三百五十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点

    第三百五十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy分布式爬虫要点 1.分布式爬虫原理 2.分布式爬虫优点 3.分布式爬虫需要解决的问题

  4. “全栈2019”Java第五十六章:多态与字段详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  5. 《手把手教你》系列技巧篇(五十六)-java+ selenium自动化测试-下载文件-上篇(详细教程)

    1.简介 前边几篇文章讲解完如何上传文件,既然有上传,那么就可能会有下载文件.因此宏哥就接着讲解和分享一下:自动化测试下载文件.可能有的小伙伴或者童鞋们会觉得这不是很简单吗,还用你介绍和讲解啊,不说就 ...

  6. 87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...

  7. 浅谈css中的盒模型(框模型)

    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...

  8. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  9. Abp(net core)+easyui+efcore实现仓储管理系统——出库管理之七(五十六)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统--ABP总体介绍(一) abp(net core)+ ...

随机推荐

  1. linus 下redis守护进程启动

    修改配置文件 sudo vim /usr/src/redis/redis.conf // 具体的安装目录不一样,以安装的时候为准 # 将daemonize 改为yes daemonize yes 重新 ...

  2. hdu 1730 Nim博弈

    题目来源:http://acm.hdu.edu.cn/showproblem.php?pid=1730 Nim博弈为:n堆石子,每个人可以在任意一堆中取任意数量的石子 n个数异或值为0就后手赢,否则先 ...

  3. Linux下查看文件系统磁盘使用

    [root@localhost ~]# df -h 可以查看所有文件系统的磁盘使用情况 du --max-depth=1 -h 可以查看当前目录下各子目录的磁盘使用情况 参考:http://www.2 ...

  4. 解决scrapy报错:ModuleNotFoundError: No module named 'win32api'

    ModuleNotFoundError: No module named 'win32api' 表示win32api未安装 解决办法: 下载对应python版本的win32api,并安装. 下载地址: ...

  5. 从零开始搭建VUE项目

    前言: 此样板面向大型,严肃的项目,并假定您对Webpack和vue-loader有些熟悉. 请务必阅读vue-loader的常见工作流配方的文档. 如果您只想尝试vue-loader或者鞭打一个快速 ...

  6. HTML5经典实例——1基础语法和语义

    1指定DOCTYPE 在页面的最开始处指定HTML5 DOCTYPE DOCTYPE是不区分大小写的.可以任意的使用大小写. <!DOCTYPE html> <html lang=& ...

  7. Hbase的作用

    实时动态增加列 多版本的意思为多个用户地址,多个用户信息,多个用户号码

  8. SOAP-ERROR: Encoding: string … is not a valid utf-8 string

    今天遇到一个错误,看标题就知道是什么错误了.... 最坑爹的是,不是所有的用户会报这个错误.只有少部分.在生产环境又没办法调试. 找了半天都不知道什么原因,字面意思大概是需要一个utf8编码的字符串, ...

  9. Java集合和数组的区别

    参考:Java集合和数组的区别 集合和容器都是Java中的容器. 区别 数组特点:大小固定,只能存储相同数据类型的数据 集合特点:大小可动态扩展,可以存储各种类型的数据   转换 数组转换为集合: A ...

  10. 错误模块名称: KERNELBASE.dll

    部署win服务时,经常会出现类似下面的错误,错误模块名称: KERNELBASE.dll. 日志名称:          Application 来源:            Application ...