CSS的选择器与css的盒子模型

CSS的选择器与css的盒子模型

1.CSS中的选择器

在css中常见的选择器：

id选择器，类选择器。标签选择器，组合选择器，迭代选择器，伪类选择器

选择器的使用：

ele代表：element
att代表：attribute

选择器	例子	例子描述
ele+ele	div+p	选择紧接着<div>后面的所有的p元素
[att]	[target]	选择带有target属性的所有元素
[att=value]	[att=blank]	选择target=“blank"的所有元素
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。
[attribute|=value]	[lang |=en]	选择 lang 属性值以 “en” 开头的所有元素。
:focus	input:focus	选择获得焦点的input元素
:first-letter	p:first-letter	选择每个人<p>元素的首字母
:first-line	p:first-line	选择每个人<p>元素的首行
:first-first-child	p:first-child	选择<p>元素的第一个子元素
:lang(language)	p:lang(it)	选择带有以it开头的lang属性值得p元素
ele~ele	p~ul	选择前面有<p>元素的每个<ul>元素
:only-child	p:only-child	选择父元素的唯一子元素<p>
nth-child(n)	p:nth-child(2)	选择第二个<p>元素

1.1css选择器汇总

[外链图片转存失败(img-5mvXMXYO-1563276594509)(https://gitee.com/qyd_9/nodebook_image/raw/master/小书匠/2.png)]

1.2选择器的优先级（层叠性）

1： 自已写的 > 继承过来的
2： 行内 > 内部 行内 > 外部 内部和外部的优先级一样（就近原则，内部和外部的选择器是一样的）
行内 > 内部=外部（就近原则，选择器要一致）> 默认的
3： ID > class > div
4： 权重 ID：0100 class: 0010 div: 0001 哪个钱多就用哪个
5: important

2.盒子模型

盒子模型

一个标签就是一个盒子，盒子有6大属性

2.1 盒子的6大属性

• width：盒子内容宽度
• height：盒子内容高度
• padding：盒子的内边距（补白），盒子内容与盒子边框之间的距离，上下左右都有padding
• border：盒子的边框 盒子的边框也是有上边框，右边框，下边框，左边框
• margin：盒子的外边距 盒子边框之外的距离，也分上右下左
• background：盒子背景 背景默认情况下会填充内容和padding

2.2盒子模型的注意点

1. 对于行内标签来说，width与heiht设置无效
2. width属性默认值为auto，块元素的贪婪性(与父类等宽)和行内元素的懒惰性(只包裹内容部分)。
3. 对于行内元素而言，其宽度有内容本身决定，而其高度则有font-size决定。
4. 有些标签有默认的padding值，如ul、ol等。*{padding:0}

2.3盒子6大属性详解

2.3.1 margin

margin

盒子与盒子之间的距离，分上，下，左，右四个方向的margin

margin：对于块元素，在四个方向上都有作用
对于行内标签，只在水平方向上起作用，竖直方向是没有作用

---

重点：
margin重叠（塌陷）：
两个前提：块标签，垂直方向
两种塌陷的方式：

1. 兄弟元素之间的重叠：上面盒子的下margin和下面盒子的上margin重叠，中间的margin大小是取大优先

解决方法：

方法1：给块标签变成行内标签
方法2：浮动（浮动元素便不会塌陷）

2. 父子元素之间的重叠：父元素设置margin-top和父中第一个子元素设置的margin-top会重叠或者是父元素设置margin-bottom和父中最后一个子元素设置的margin-bottom会重叠。

解决方法：

方法1：给父元素设置border-top或 border-bottom，可以设置边框透明（transparent）
方法2：给父元素设置paddding-top
方法3：将块标签变成行内标签

---

2.3.2 border

border

设置盒子的边框

border:粗细 线型 颜色 border:1px solid red;

border的其他的应用：
border-top border-right border-bottom border-left
border-width border-style border-color
border-top-width xxx

注意：
border在页面是占空间的
border可以实现小三角

//实现一个尖向下的小三角形
border: 5px solid red transparent;
border-top:5px solid red;

2.3.3 padding

padding

内边距，补白 内容与border之间的距离

有些标签有默认的padding ,使用 *{padding:0;}来清除所有默认的padding的值。

注意：

padding在页面是占空间的

2.3.4 content

内容部分主要有：width和height 两个个属性

• 男标签可以设置宽度和高度，女标签不能设置宽度和高度
• 女标签它的宽度由内容决定，高度由font-size决定
• width和height可以设置百分比，是父元素的百分比。

2.3.5 background

• background-color:设置背景颜色
• background-image:设置背景图片
  1，默认水平和垂直方向都会平铺
  2，如果空间不足，图片也会显示，只是显示不完整
  3，url后面的路径引号可加可不加
  4，背景图片默认会填充border,padding,content
• background-repeat:设置背景是否平铺
  • background-repeat：no-repeat;
• background-position:背景进行定位
  • background-position：-30px -60px;
• background-attactment:设置固定的背景图像
  • background-attactment：fixed;