web开发： css高级与盒模型
本文目录：
一、组合选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style type="text/css"> /*群组选择器: 同时可以控制多个选择器*/ /*#dd, div, #a { }*/ /*.d { 起相同类名 color: red; }*/ /*语法: 逗号分隔,控着多个*/ .d1, .d2, .d3 { color: orange } /*子代(后代)选择器: 根据父子结构控着目标子标签*/ /*明确选择器书写顺序: 目标inner, 再确定修饰词(哪个父亲,多少个父亲)*/ /*语法: 子代 >连接 */ .sub > .inner { color: tan } /*语法: 后代 空格连接*/ .sup .inner { color: cyan } .sup .sub > .inner { color: red } /*相邻(兄弟)选择器: 根据兄弟结构控制下方兄弟标签*/ /*明确目标 => 添加修饰词*/ /*语法: 相邻 +连结*/ .ele2 + .ele3 { color: blue } /*语法: 兄弟 ~连接*/ .ele1 ~ .ele3 { color: yellow } /*交集选择器: 一个标签有多种选择器修饰,通过多种修饰找到一个目标标签*/ section#s.ss { color: green } /*注: 每一个选择器位均可以为三个基础选择器中任意一个*/ </style> </head> <body> <!-- <div class="d1" id="dd"></div> --> <!-- .d${$$$}*3 --> <div class="d d1">001</div> <div class="d d2">002</div> <div class="d d3">003</div> <!-- .sup>.sub>.inner --> <div class="sup"> <div class="sub"> <div class="inner">inner</div> </div> </div> <!-- .ele${e$}*3 --> <div class="ele1">e1</div> <div class="ele2">e2</div> <div class="ele3">e3</div> <!-- (section.ss#s{块区域}+section.ss{块区域}+.ss{块区域}) --> <section class="ss" id="s">块区域</section> <section class="ss">块区域</section> <div class="ss">块区域</div> </body> </html>
二、复制选择器优先级
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*两个类名的选择器 > 一个类名的选择器, 与位置无关*/ .d4 .d5 { font-size: 40px; } .d5 { font-size: 20px; } /*了解: 属性选择器*/ [aa*="b"] { font-size: 30px; } /*每个选择器位也可以替换为一个组合选择器*/ body > .d1 .d3 .d5 { font-size: 50px; } /*.d1 div .d3 .d5 优先级等于 body > .d1 .d3 .d5, 谁在下谁起作用*/ .d1 div .d3 .d5 { font-size: 100px; } #div { font-size: 200px; } </style> </head> <body> <!-- 优先级取决于 权重, 其实就是比较个数 --> <!-- 1.不同的修饰符(后代/兄弟/交集...)均不影响权重 --> <!-- 2.选择器的位置也不会影响权重 --> <!-- 3.权重只和个数有关 --> <!-- 4.id的权重无限大于class无限大于标签 --> <!-- 5.属性选择器的权重与类一样 --> <!-- 复习: 优先级来源(操作的是同一标签同一属性) --> <div class="d1"> <div class="d2"> <div class="d3"> <div class="d4"> <div class="d5" aa="aba" id='div'>12345</div> <div class="d5" aa="AAb">67890</div> </div> </div> </div> </div> </body> </html>
三、伪类选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> /*a标签的四大伪类*/ /*操作的是a,伪类是修饰词,不影响优先级*/ /*链接的初始状态(未被访问过)*/ a:link { color: green } /*链接被鼠标悬浮*/ a:hover { color: yellow; /*鼠标样式*/ cursor: pointer; } /*链接处于激活状态(鼠标按下)*/ a:active { color: red; } /*链接已被访问过*/ a:visited { color: #ccc } /*设置初始状态*/ .box { width: 200px; height: 200px; background-color: red } /*再确定第二状态*/ .box:hover { background-color: yellowgreen; cursor: pointer; } .box:active { background-color: greenyellow } </style> <style type="text/css"> section { width: 100px; height: 100px; background-color: orange } /*同一结构下的第几个: 先确定位置再匹配类型*/ section:nth-child(3), section:nth-child(5) { background-color: green } /*同一结构下的某选择器的第几个: 先确定类型再匹配位置*/ section:nth-of-type(1), section:nth-of-type(3) { background-color: cyan } /*取反*/ section:not(:nth-of-type(2)) { background-color: pink } </style> </head> <body> <!-- 该同一结构: a div section*3 div --> <a href="https://www.baidu.com">前往你的家</a> <!-- 普通标签均可以使用 :hover :active --> <div class="box"></div> <section></section> <section class="ss"></section> <section></section> <div> <!-- 该同一结构: a i b --> <a href="">123</a> <i></i> <b></b> </div> </body> </html>
四、盒模型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型</title> <style type="text/css"> /*content=width x height, 颜色由背景色填充, 参与盒子显示*/ .box { width: 100px; height: 100px; background-color: orange } /*padding, 颜色由背景色填充, 参与盒子显示*/ .box { padding: 20px; } /*border, 颜色由自身规定, 参与盒子显示*/ .box { /*transparent 透明*/ border: 10px solid black; } /*margin, 没有颜色, 不参与盒子显示, 决定盒子布局(位置信息)*/ .box { margin: 200px; } </style> </head> <body> <!-- 什么是盒模型: 通配选择器可以控制的页面标签都是盒模型(一般我们操作的是块级标签) --> <!-- 为什么要学盒模型: 页面书写的标签初始状态级别都不能满足显示要求,需要再次修改,修改的就是盒模型的各个属性 --> <!-- 盒模型组成部分: margin(外边距) + boder(边框) + padding(内边距) + content(内容) --> <!-- 注意点: 1.四部分均具有自身独立区域 2.content=width x height,是子标签或子内容的显示区域 --> <div class="box">123</div> </body> </html>
五、盒模型显示区域
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型显示区域</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; } .inner { width: 50px; height: 50px; background-color: red; } /*padding*/ /*1.第一个方位为上, 顺时针确定赋值顺序 => 上右下左*/ /*2.少于四个值, 赋值依旧遵循规则1, 无值方位找对边*/ /*3.一个值时, 控制上下左右*/ .box { /*padding: 10px 20px 30px 40px;*/ /*padding: 10px 20px;*/ /*将子内容往内挤*/ padding-top: 75px; padding-left: 75px; /*还有保证自身显示区域不变 => 手动缩小content*/ /*calc()做css运算, 需要带上单位*/ height: calc(200px - 75px); width: calc(200px - 75px); } /*box控制位置, inner控制内容*/ .inner { text-align: center; line-height: 50px; } /*border: 颜色 宽度 样式 (顺序随意)*/ .box { /*solid dashed*/ border-style: inset; border-color: blue; border-width: 50px; /*整体赋值*/ border: 30px solid #af3; /*有些标签默认有边框,如何清除边框*/ /*border: 0;*/ border: none; } .jh { /*利用盒模型形成三角形*/ /*将其他边颜色设置为透明色(transparent)*/ border-top: 50px solid red; /*border-right: 50px solid orange;*/ border-bottom: 50px solid pink; border-left: 50px solid blue; width: 0; height: 0; } </style> </head> <body> <!-- content + padding + border --> <div class="box"> <div class="inner">1</div> </div> <div class="jh"></div> </body> </html>
六、盒模型布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒模型布局</title> <style type="text/css"> /*body默认有margin:8px, 做项目时一定会清除*/ /*清除系统默认(不喜欢的)样式,该操作称之为 reset 操作*/ body { margin: 0; } /*a标签的reset操作*/ a { color: black; text-decoration: none; } /*h1标签的reset操作*/ h1 { margin: 0; } /*block盒子, 宽度自适应父级, 高度由子级撑开*/ .box { width: 100px; height: 100px; background-color: orange; } .b1 { /*margin: 50px;*/ margin-top: 50px; margin-left: 50px; } /*只有margin-left|top用于完成自身布局*/ .b2 { /*水平居中: 在所在父级水平居中*/ /*auto自适应剩余空白区域*/ /*margin-left: auto;*/ /*margin-right: auto;*/ /*实现居右50px*/ margin-left: auto; margin-right: 50px; /*b2上移与b1并排*/ margin-top: -100px; } </style> <style type="text/css"> .up, .down { width: 100px; height: 100px; background-color: red; /*display: inline-block;*/ } /*margin-right|bottom影响兄弟布局*/ .up { /*bottom会影响之下的兄弟, 往下挤*/ /*margin-bottom: 30px;*/ /*right会影响右方的兄弟, 往右挤*/ /*margin-right: 30px;*/ margin-bottom: 30px; } .down { /*上下兄弟的距离取大值 => margin-top的坑*/ margin-top: 30px; } </style> <style type="text/css"> .sup { width: 200px; height: 200px; background-color: pink; margin-top: 50px; } .sub { /*父子top取大值 => margin-top的坑(父级只与第一个子级联动)*/ width: 100px; height: 100px; background-color: brown; margin-top: 50px; } /*拆散父子(第一个子)*/ /*1.设置父级的border-top即可*/ /*2.或者设置父级的padding-top即可*/ </style> </head> <body> <!-- <a href="">123</a> --> <!-- <h1>123</h1> --> <div class="box b1"></div> <div class="box b2"></div> <div class="up"></div> <div class="down"></div> <div class="sup"> <div class="sub"></div> </div> </body> </html>
