一、组合选择器

二、复制选择器优先级

三、伪类选择器

四、盒模型

五、盒模型显示区域

六、盒模型布局

一、组合选择器

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>组合选择器</title>
  6.     <style type="text/css">
  7.         /*群组选择器: 同时可以控制多个选择器*/
  8.         /*#dd, div, #a {
  9.  
  10.         }*/
  11.         /*.d { 起相同类名
  12.             color: red;
  13.         }*/
  14.         /*语法: 逗号分隔,控着多个*/
  15.         .d1, .d2, .d3 {
  16.             color: orange
  17.         }
  18.  
  19.         /*子代(后代)选择器: 根据父子结构控着目标子标签*/
  20.         /*明确选择器书写顺序: 目标inner, 再确定修饰词(哪个父亲,多少个父亲)*/
  21.         /*语法: 子代 >连接 */
  22.         .sub > .inner {
  23.             color: tan
  24.         }
  25.         /*语法: 后代 空格连接*/
  26.         .sup .inner {
  27.             color: cyan
  28.         }
  29.         .sup .sub > .inner {
  30.             color: red
  31.         }
  32.  
  33.         /*相邻(兄弟)选择器: 根据兄弟结构控制下方兄弟标签*/
  34.         /*明确目标 => 添加修饰词*/
  35.         /*语法: 相邻 +连结*/
  36.         .ele2 + .ele3 {
  37.             color: blue
  38.         }
  39.         /*语法: 兄弟 ~连接*/
  40.         .ele1 ~ .ele3 {
  41.             color: yellow
  42.         }
  43.  
  44.         /*交集选择器: 一个标签有多种选择器修饰,通过多种修饰找到一个目标标签*/
  45.         section#s.ss {
  46.             color: green
  47.         }
  48.  
  49.         /*注: 每一个选择器位均可以为三个基础选择器中任意一个*/
  50.     </style>
  51. </head>
  52. <body>
  53.     <!-- <div class="d1" id="dd"></div> -->
  54.     <!-- .d${$$$}*3 -->
  55.     <div class="d d1">001</div>
  56.     <div class="d d2">002</div>
  57.     <div class="d d3">003</div>
  58.  
  59.     <!-- .sup>.sub>.inner -->
  60.     <div class="sup">
  61.         <div class="sub">
  62.             <div class="inner">inner</div>
  63.         </div>
  64.     </div>
  65.  
  66.     <!-- .ele${e$}*3 -->
  67.     <div class="ele1">e1</div>
  68.     <div class="ele2">e2</div>
  69.     <div class="ele3">e3</div>
  70.  
  71.     <!-- (section.ss#s{块区域}+section.ss{块区域}+.ss{块区域}) -->
  72.     <section class="ss" id="s">块区域</section>
  73.     <section class="ss">块区域</section>
  74.     <div class="ss">块区域</div>
  75.  
  76. </body>
  77. </html>

二、复制选择器优先级

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         /*两个类名的选择器 > 一个类名的选择器, 与位置无关*/
  8.         .d4 .d5 {
  9.             font-size: 40px;
  10.         }
  11.  
  12.         .d5 {
  13.             font-size: 20px;
  14.         }
  15.         /*了解: 属性选择器*/
  16.         [aa*="b"] {
  17.             font-size: 30px;
  18.         }
  19.  
  20.         /*每个选择器位也可以替换为一个组合选择器*/
  21.         body > .d1 .d3 .d5 {
  22.             font-size: 50px;
  23.         }
  24.         /*.d1 div .d3 .d5 优先级等于 body > .d1 .d3 .d5, 谁在下谁起作用*/
  25.         .d1 div .d3 .d5 {
  26.             font-size: 100px;
  27.         }
  28.  
  29.         #div {
  30.             font-size: 200px;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <!-- 优先级取决于 权重, 其实就是比较个数 -->
  36.     <!-- 1.不同的修饰符(后代/兄弟/交集...)均不影响权重 -->
  37.     <!-- 2.选择器的位置也不会影响权重 -->
  38.     <!-- 3.权重只和个数有关 -->
  39.     <!-- 4.id的权重无限大于class无限大于标签 -->
  40.     <!-- 5.属性选择器的权重与类一样 -->
  41.  
  42.     <!-- 复习: 优先级来源(操作的是同一标签同一属性) -->
  43.     <div class="d1">
  44.         <div class="d2">
  45.             <div class="d3">
  46.                 <div class="d4">
  47.                     <div class="d5" aa="aba" id='div'>12345</div>
  48.                     <div class="d5" aa="AAb">67890</div>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.     </div>
  53. </body>
  54. </html>

三、伪类选择器

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>伪类选择器</title>
  6.     <style type="text/css">
  7.         /*a标签的四大伪类*/
  8.         /*操作的是a,伪类是修饰词,不影响优先级*/
  9.         /*链接的初始状态(未被访问过)*/
  10.         a:link {
  11.             color: green
  12.         }
  13.         /*链接被鼠标悬浮*/
  14.         a:hover {
  15.             color: yellow;
  16.             /*鼠标样式*/
  17.             cursor: pointer;
  18.         }
  19.         /*链接处于激活状态(鼠标按下)*/
  20.         a:active {
  21.             color: red;
  22.         }
  23.         /*链接已被访问过*/
  24.         a:visited {
  25.             color: #ccc
  26.         }
  27.  
  28.         /*设置初始状态*/
  29.         .box {
  30.             width: 200px;
  31.             height: 200px;
  32.             background-color: red
  33.         }
  34.         /*再确定第二状态*/
  35.         .box:hover {
  36.             background-color: yellowgreen;
  37.             cursor: pointer;
  38.         }
  39.         .box:active {
  40.             background-color: greenyellow
  41.         }
  42.     </style>
  43.  
  44.     <style type="text/css">
  45.         section {
  46.             width: 100px;
  47.             height: 100px;
  48.             background-color: orange
  49.         }
  50.  
  51.         /*同一结构下的第几个: 先确定位置再匹配类型*/
  52.         section:nth-child(3), section:nth-child(5) {
  53.             background-color: green
  54.         }
  55.  
  56.         /*同一结构下的某选择器的第几个: 先确定类型再匹配位置*/
  57.         section:nth-of-type(1), section:nth-of-type(3) {
  58.             background-color: cyan
  59.         }
  60.  
  61.         /*取反*/
  62.         section:not(:nth-of-type(2)) {
  63.             background-color: pink
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68.     <!-- 该同一结构: a div section*3 div -->
  69.     <a href="https://www.baidu.com">前往你的家</a>
  70.     <!-- 普通标签均可以使用 :hover :active -->
  71.     <div class="box"></div>
  72.  
  73.     <section></section>
  74.     <section class="ss"></section>
  75.     <section></section>
  76.  
  77.     <div>
  78.         <!-- 该同一结构: a i b -->
  79.         <a href="">123</a>
  80.         <i></i>
  81.         <b></b>
  82.     </div>
  83.  
  84. </body>
  85. </html>

四、盒模型

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>盒模型</title>
  6.     <style type="text/css">
  7.         /*content=width x height, 颜色由背景色填充, 参与盒子显示*/
  8.         .box {
  9.             width: 100px;
  10.             height: 100px;
  11.             background-color: orange
  12.         }
  13.         /*padding, 颜色由背景色填充, 参与盒子显示*/
  14.         .box {
  15.             padding: 20px;
  16.         }
  17.         /*border, 颜色由自身规定, 参与盒子显示*/
  18.         .box {
  19.             /*transparent 透明*/
  20.             border: 10px solid black;
  21.         }
  22.         /*margin, 没有颜色, 不参与盒子显示, 决定盒子布局(位置信息)*/
  23.         .box {
  24.             margin: 200px;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <!-- 什么是盒模型: 通配选择器可以控制的页面标签都是盒模型(一般我们操作的是块级标签) -->
  30.     <!-- 为什么要学盒模型: 页面书写的标签初始状态级别都不能满足显示要求,需要再次修改,修改的就是盒模型的各个属性 -->
  31.     <!-- 盒模型组成部分: margin(外边距) + boder(边框) + padding(内边距) + content(内容) -->
  32.     <!-- 注意点: 1.四部分均具有自身独立区域 2.content=width x height,是子标签或子内容的显示区域  -->
  33.  
  34.     <div class="box">123</div>
  35. </body>
  36. </html>

五、盒模型显示区域

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>盒模型显示区域</title>
  6.     <style type="text/css">
  7.         .box {
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: orange;
  11.         }
  12.         .inner {
  13.             width: 50px;
  14.             height: 50px;
  15.             background-color: red;
  16.         }
  17.  
  18.         /*padding*/
  19.         /*1.第一个方位为上, 顺时针确定赋值顺序 => 上右下左*/
  20.         /*2.少于四个值, 赋值依旧遵循规则1, 无值方位找对边*/
  21.         /*3.一个值时, 控制上下左右*/
  22.         .box {
  23.             /*padding: 10px 20px 30px 40px;*/
  24.             /*padding: 10px 20px;*/
  25.  
  26.             /*将子内容往内挤*/
  27.             padding-top: 75px;
  28.             padding-left: 75px;
  29.             /*还有保证自身显示区域不变 => 手动缩小content*/
  30.             /*calc()做css运算, 需要带上单位*/
  31.             height: calc(200px - 75px);
  32.             width: calc(200px - 75px);
  33.  
  34.         }
  35.         /*box控制位置, inner控制内容*/
  36.         .inner {
  37.             text-align: center;
  38.             line-height: 50px;
  39.         }
  40.  
  41.         /*border: 颜色 宽度 样式 (顺序随意)*/
  42.         .box {
  43.             /*solid dashed*/
  44.             border-style: inset;
  45.             border-color: blue;
  46.             border-width: 50px;
  47.  
  48.             /*整体赋值*/
  49.             border: 30px solid #af3;
  50.  
  51.             /*有些标签默认有边框,如何清除边框*/
  52.             /*border: 0;*/
  53.             border: none;
  54.         }
  55.         .jh {
  56.             /*利用盒模型形成三角形*/
  57.             /*将其他边颜色设置为透明色(transparent)*/
  58.             border-top: 50px solid red;
  59.             /*border-right: 50px solid orange;*/
  60.             border-bottom: 50px solid pink;
  61.             border-left: 50px solid blue;
  62.             width: 0;
  63.             height: 0;
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68.     <!-- content + padding + border -->
  69.     <div class="box">
  70.         <div class="inner">1</div>
  71.     </div>
  72.  
  73.     <div class="jh"></div>
  74. </body>
  75. </html>

六、盒模型布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>盒模型布局</title>
  6.     <style type="text/css">
  7.         /*body默认有margin:8px, 做项目时一定会清除*/
  8.         /*清除系统默认(不喜欢的)样式,该操作称之为 reset 操作*/
  9.         body {
  10.             margin: 0;
  11.         }
  12.         /*a标签的reset操作*/
  13.         a {
  14.             color: black;
  15.             text-decoration: none;
  16.         }
  17.         /*h1标签的reset操作*/
  18.         h1 {
  19.             margin: 0;
  20.         }
  21.  
  22.         /*block盒子, 宽度自适应父级, 高度由子级撑开*/
  23.         .box {
  24.             width: 100px;
  25.             height: 100px;
  26.             background-color: orange;
  27.         }
  28.         .b1 {
  29.             /*margin: 50px;*/
  30.             margin-top: 50px;
  31.             margin-left: 50px;
  32.         }
  33.         /*只有margin-left|top用于完成自身布局*/
  34.         .b2 {
  35.             /*水平居中: 在所在父级水平居中*/
  36.             /*auto自适应剩余空白区域*/
  37.             /*margin-left: auto;*/
  38.             /*margin-right: auto;*/
  39.  
  40.             /*实现居右50px*/
  41.             margin-left: auto;
  42.             margin-right: 50px;
  43.  
  44.             /*b2上移与b1并排*/
  45.             margin-top: -100px;
  46.         }
  47.  
  48.     </style>
  49.     <style type="text/css">
  50.         .up, .down {
  51.             width: 100px;
  52.             height: 100px;
  53.             background-color: red;
  54.             /*display: inline-block;*/
  55.         }
  56.         /*margin-right|bottom影响兄弟布局*/
  57.         .up {
  58.             /*bottom会影响之下的兄弟, 往下挤*/
  59.             /*margin-bottom: 30px;*/
  60.             /*right会影响右方的兄弟, 往右挤*/
  61.             /*margin-right: 30px;*/
  62.  
  63.             margin-bottom: 30px;
  64.         }
  65.         .down {
  66.             /*上下兄弟的距离取大值 => margin-top的坑*/
  67.             margin-top: 30px;
  68.         }
  69.     </style>
  70.     <style type="text/css">
  71.         .sup {
  72.             width: 200px;
  73.             height: 200px;
  74.             background-color: pink;
  75.             margin-top: 50px;
  76.         }
  77.         .sub {
  78.             /*父子top取大值 => margin-top的坑(父级只与第一个子级联动)*/
  79.             width: 100px;
  80.             height: 100px;
  81.             background-color: brown;
  82.             margin-top: 50px;
  83.         }
  84.         /*拆散父子(第一个子)*/
  85.         /*1.设置父级的border-top即可*/
  86.         /*2.或者设置父级的padding-top即可*/
  87.     </style>
  88. </head>
  89. <body>
  90.     <!-- <a href="">123</a> -->
  91.     <!-- <h1>123</h1> -->
  92.     <div class="box b1"></div>
  93.     <div class="box b2"></div>
  94.  
  95.     <div class="up"></div>
  96.     <div class="down"></div>
  97.  
  98.     <div class="sup">
  99.         <div class="sub"></div>
  100.     </div>
  101. </body>
  102. </html>

web开发： css高级与盒模型的更多相关文章

  1. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  2. 浅谈css中的盒模型（框模型）

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

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

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

  4. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

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

  5. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

  6. python全栈开发 * 继承性 层叠性 盒模型 标准文档流 * 180809

    ---恢复内容开始--- 一继承性 1.继承: 给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 2. 可继承: color . font-*(size). text-*(de ...

  7. Python-ccs高级选择器 盒模型

    css高级选择器与盒模型 脱离文档流 ,其中就是产生了BFC 1.组合选择器 - 群组选择器 /* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */ div, #div, . ...

  8. Web开发——CSS基础

    参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...

  9. css 选择器；盒模型

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

随机推荐

  1. Linux下切换用户根目录的指令

    执行 usermod -d /shares/Storage/ ftp 会将用户ftp的根目录(~位置)修改为/shares/Storage/.

  2. Qt——鼠标拖动缩放窗口源码

    #ifndef MOVEWIDGET_H #define MOVEWIDGET_H #include <QWidget> #include <QEvent> class Mov ...

  3. vim中文帮助手册的安装

    1. 下载: 下载页面:http://vimcdoc.sourceforge.net/ 选择“Latest platform independent tarball, including an Lin ...

  4. win10配置Keras及GPU环境

    今天搭建了Keras深度学习的环境 详细记录一下 安装Anaconda3 Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项. Anac ...

  5. HDU-6170 Two strings

    http://acm.hdu.edu.cn/showproblem.php?pid=6170 . 匹配任意字符,x* 匹配任意长度的 x (x 为任意字符,长度可以为 0 ) 正则表达式 #inclu ...

  6. jQuery报错：Uncaught TypeError: _this.attr is not a function

    问题:想通过延时把置灰的按钮再次复原,代码如下: $("#sendEmailCode").on("click", function() { var _this ...

  7. POJ 1742 （单调队列优化多重背包+混合背包）

    (点击此处查看原题) 题意分析 给你n种不同价值的硬币,价值为val[1],val[2]...val[n],每种价值的硬币有num[1],num[2]...num[n]个,问使用这n种硬币可以凑齐[1 ...

  8. Scala学习十三——集合

    一.本章要点 所有集合都扩展自Iterable特质; 集合有三大类,分别为序列,集和映射; 对于几乎所有集合类,Scala都同时提供可变和不可变的版本; Scala列表要么是空的,要么拥有一头一尾,其 ...

  9. linux grep/awk/cut/egrep/echo/经验

    1. 例子 http://www.test.com/atk/pki/test-1.1.tar.gz 过滤出test-1.1.tar.gz t = http://www.test.com/atk/pki ...

  10. linux 打包与解压命令--常用

    一般情况用这俩个就足以了 压缩 tar -czf jpg.tar.gz *.jpg   //将目录里所有jpg文件打包成jpg.tar后,并且将其用gzip压缩,生成一个gzip压缩过的包,命名为jp ...