正文
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>
