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选择器汇总

enter description here

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盒子模型的注意点

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

2.3盒子6大属性详解

2.3.1 margin

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

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

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

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

解决方法：

方法1：给块标签变成行内标签方法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;

CSS选择器及盒子模型