web-5
2022-10-20 本文已影响0人
看谷秀
目录
1 CSS三大特性（继承性，层叠性，优先性）
2 PxCook的基本使用
3 盒子模型
4 案例分析
5 问题总结(外边距合并, 塌陷, 行内外边距)
一：CSS 三大特性
<head>
<style>
#box {
color: orange;
}
.box {
color: blue;
}
div {
color: green !important;
}
body {
color: red;
}
/* !important不要给继承的添加, 自己有样式无法继承父级样式 */
</style>
</head>
<body>
<!-- 意义: 当一个标签使用了多个选择器, 样式冲突的时候, 到底谁生效 -->
<div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* (行内, id, 类, 标签) */
/* (0, 1, 0, 1) */
div #one {
color: orange;
}
/* (0, 0, 2, 0) */
.father .son {
color: skyblue;
}
/* 0, 0, 1, 1 */
.father p {
color: purple;
}
/* 0, 0, 0, 2 */
div p {
color: pink;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="one">我是一个标签</p>
</div>
</body>
</html>
<html>
<head>
<style>
/* (行内, id, 类, 标签) */
/* !important 最高 */
/* 继承: 最低 */
/* (0, 2, 0, 0) */
#father #son {
color:blue;
}
/* (0, 1, 1, 1) */
#father p.c2 {
color:black;
}
/* (0, 0, 2, 2) */
div.c1 p.c2 {
color:red;
}
/* 继承, 最低 */
#father {
color:green !important;
}
/* 继承, 最低 */
div#father.c1 {
color: yellow ;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
这行文本是什么颜色的？
</p>
</div>
</body>
</html>
<html lang="en">
<head>
<title>第4题：权重相同此时比较层叠性</title>
<style>
/* (0, 0, 2, 1) */
.c1 .c2 div {
color: blue;
}
/* (0, 1, 0, 1) */
div #box3 {
color:green;
}
/* (0, 1, 0, 1) 权重相同看谁在后面*/
#box1 div {
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
这行文本是什么颜色的？
</div>
</div>
</div>
</body>
</html>
<head>
<title>第5题: 全是继承的特殊情况</title>
<style>
/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */
/* 继承 */
div p {
color:red;
}
/* 继承 */
.father {
color:blue;
}
</style>
</head>
<body>
<div class="father">
<p class="son">
<span>文字</span>
</p>
</div>
</body>
</html>
补充： Chrome调试工具
调错
问题代码处-> 右键-> 检查
二：PxCook的基本使用(像素大厨)
三：盒子模型
1 盒子模型介绍
2 内容的宽度和高度
3 边框（border）- 单个属性
边框（border）- 连写形式
3.3 边框（border）- 单方向设置
小结:
➢ 给盒子设置四周 20像素、实线、蓝色的边框，属性应该如何设置？
• border：20px solid blue；
➢ 给盒子设置上边框 10像素、虚线、黄色的边框，属性应该如何设置？
• border-top：10px dashed yellow；
四: 内边距（padding）- 取值
内边距:（padding）- 单方向设置
➢ 场景：只给盒子的某个方向单独设置内边距
➢ 属性名：padding - 方位名词
➢ 属性值：数字 + px
4.5（拓展）不会撑大盒子的特殊情况
➢ 不会撑大盒子的特殊情况（块级元素）
- 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去
五: 外边距（margin）- 取值
5.2 外边距（margin） - 单方向设置
小结
➢ 给盒子设置四周 20px 的外边距可以通过什么属性设置？
• margin : 20px ;
➢ 给盒子设置上下20px、左右30px的外边距可以通过什么属性设置？
• margin : 20px 30px ;
➢ 给盒子设置左侧50px的外边距可以通过什么属性设置？
• margin-left : 50px ;
5.3 margin单方向设置的应用
5.4 清除默认内外边距
四: 案例分析
<head>
<style>
* {
margin: 0;
padding: 0;
/* 所有的标签都可能添加内边距或border, 都內减模式 */
box-sizing: border-box;
}
.news {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 50px auto;
padding: 42px 30px 0;
}
.news h2 {
border-bottom: 1px solid #ccc;
font-size: 30px;
/* 行高是1倍, 就是字号的大小 */
line-height: 1;
padding-bottom: 9px;
}
/* 去掉列表的符号 */
ul {
list-style: none;
}
/* li {} */
.news li {
height: 50px;
border-bottom: 1px dashed #ccc; // 虚线
padding-left: 28px;
line-height: 50px;
}
.news a {
text-decoration: none;
color: #666;
font-size: 18px;
}
</style>
</head>
<body>
<!-- 从外到内 -->
<div class="news">
<h2>最新文章/New Articles</h2>
<ul>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
</ul>
</div>
</body>
</html>
五: 问题总结
1: 外边距合并显现
html lang="en">
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.one {
/* margin-bottom: 50px; */
margin-bottom: 60px;
}
.two {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="one">11</div>
<div class="two">22</div>
</body>
</html>
2 外边距塌陷现象
<html lang="en">
<head>
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 50px; */
/* 如果设计稿没有border, 不能使用这个解决办法 */
/* border: 1px solid #000; */
/* overflow: hidden; */
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 50px;
display: inline-block;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>
3 行内元素布局, 上下高度设置无效
<html lang="en">
head>
<style>
span {
/* margin: 100px; */
/* padding: 100px; */
line-height: 100px;
}
</style>
</head>
<body>
<!-- 行内元素 内外边距 margin padding -->
<!-- 如果想要通过margin或padding改变行内标签的垂直位置, 无法生效 -->
<!-- 行内标签的margin-top和bottom 不生效 -->
<!-- 行内标签的padding-top或botttom 不生效 -->
<span>span</span>
<span>span</span>
</body>
</html>
