![CSS3【CSS 三大特性、PxCook的基本使用、盒子模型[盒子模型的介绍、内容区域的宽度和高度、边框（ border ）、内边距（ padding ）、外边距（margin）]】](/uploads/image/0159.jpg)
➢ 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式：（每一级之间不存在进位）
➢ 比较规则：
➢ 注意点：!important如果不是继承，则权重最高，天下第一！
<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>
<style>/* (行内, id, 类, 标签) *//* !important 最高 *//* 继承: 最低 *//* 2 */div div {color: skyblue;} /* 1 */div {color: red;}</style>
</head>
<body><div><div><div>这行文本是什么颜色？</div></div></div>
</body>
<style>/* (行内, id, 类, 标签) */div div div div div div div div div div div div { color: red;}.one { color: pink;}</style>
</head>
<body><div><div><div><div><div><div><div><div><div><div><div><div class="one">这行文字是什么颜色的？</div></div></div></div></div></div></div></div></div></div></div></div>
</body>
<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>
<style>/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 *//* 继承 */div p {color:red;} /* 继承 */.father {color:blue;} </style>
</head>
<body><div class="father"><p class="son"> <span>文字</span>第一个生效</p></div>
</body>
学习路径：
<style>div {width: 280px;height: 280px;background-color: #ffc0cb;border: 10px solid #00f;}</style>
</head>
<body><div></div>
</body>
从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节
<style>.box {height: 40px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}/* 后代: box里面的a */.box a {width: 80px;height: 40px;/* 推荐先加上: 清楚的看到文字在什么位置 *//* background-color: #edeef0; */display: inline-block;text-align: center;line-height: 40px;font-size: 12px;color: #4c4c4c;text-decoration: none;}.box a:hover {background-color: #edeef0;color: #ff8400;}</style><!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body><div class="box"><a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a></div><p><a href="#"></a></p>
</body>
➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名：padding
➢ 常见取值：
➢ 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
➢ 场景：只给盒子的某个方向单独设置内边距
➢ 属性名：padding - 方位名词
➢ 属性值：数字 + px
小结
➢ 给盒子设置四周 20px 的内边距可以通过什么属性设置？
➢ 给盒子设置上下20px、左右30px的内边距可以通过什么属性设置？
➢ 给盒子设置左侧50px的内边距可以通过什么属性设置？
<style>.box {height: 40px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}/* 后代: box里面的a */.box a {padding: 0 16px;/* width: 80px; */height: 40px;/* 推荐先加上: 清楚的看到文字在什么位置 *//* background-color: #edeef0; */display: inline-block;text-align: center;line-height: 40px;font-size: 12px;color: #4c4c4c;text-decoration: none;}.box a:hover {background-color: #edeef0;color: #ff8400;}</style><!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body><div class="box"><a href="#">新浪</a><a href="#">新浪导航新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a></div><p><a href="#"></a></p>
</body>
➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin
➢ 常见取值：
➢ 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
小结
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><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>
本文发布于:2024-01-31 12:25:22，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170667512328495.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
