交集选择器与并集选择器:
在企业开发中都不怎么经常用。
1.
交集选择器:格式中标签与标签之间没用任何东西,
交集选择器选择出符合和满足各个标签属性的标签:如:标签1标签2标签3{属性:值;} 最终找到同时满足标签1,标签2,标签3的标签。
2.
并集选择器:格式中中,分隔开。格式:标签1,标签2{属性:值;}
并集选择器是用来找出所有的满足和符合标签1或标签2的标签。如:标签2,标签2,标签3{ 属性:值;},最终系统找出所有的 满足标签1或标签2或标签3的标签。满足标签1的标签数量+满足标签2的标签数量+满足标签3的标签数量=系统选出的标签数量。
交集选择器:
数学中:
区域一和区域二共同拥有的部分为区域三,则区域三就为区域一和区域二的交集。
css中:
标签一和标签二相同的部分就为交集选择器。系统所找到的标签必须满足:既有标签一的特点,也有标签二的特点。
<style>
标签一标签二{
属性:值;
}
</style>
系统找到的标签为:
1、<标签一 id="标签二">
或 2、<标签一 class="标签二">
或 3、<标签 id="标签一" class="标签二">
格式:
标签1标签2{
属性;值;
}
标签1与标签2之间什么也没有。
特例:
标签1标签2标签3{
color:red;
}
先找到所有的标签1代码,再从所有的标签1代码中找到所有的符合标签2特性的标签代码,再从所有的既符合标签1又符合标签2的标签中找到所有再次符合标签3的标签代码。
(也就是最后找到的标签里面的属性:标签1、标签2、标签3、标签4的特性都要符合,标签1是标签名,标签2是id名,标签3是class名,那么最后的标签就为:<标签1 id="标签2" class="标签3"></标签1>)
并集选择器
数学中:
区域一与区域二并在一起就是区域三。(区域一+区域二=区域三)
css中:
并集选择器就是选择所有的满足标签1,或者满足标签2的标签,然后对其进行修饰。
格式:
标签1,标签2{
属性:值;
}
(标签1与标签2使用,分开的)
意思是:系统先找到所有的标签1,再找到所有的标签2,然后将所有的标签1和标签2集中做修饰。
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度,你需要知道的盒模型是如何工作的。
元素的宽度和高度
重要: 当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。.
下面的例子中的元素的总宽度为300px:
实例
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
让我们自己算算:
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px
试想一下,你只有250像素的空间。让我们设置总宽度为250像素的元素:
实例
div {
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距