【前端】课前预习第三次

一、高级选择器

又名复合选择器。

1、后代选择器

又名包含选择器。
元素1 元素2 {}，但只改变2的样式。

2、子选择器

元素1>元素2 {}。

后代选择器和子选择器区别在于，子选择器只选择元素1的子标签，但后代选择器会选择子元素的子标签。

3、并集选择器

多组标签均可选择，格式为 元素1，元素2 {}。

4、伪类选择器

目的是为了添加特殊效果。

1、链接伪类

• a:link 未被访问链接
  

• a:visited 已被访问的链接
  

• a:hover 鼠标位于其上时
  

• a:active 鼠标按下未弹起时
  

四者之间有顺序，不能改变。
其中，link和visited只能用于超链接。

2、focus伪类

是指光标所在处，只针对input。

二、背景

1、背景颜色

background-color:transparent/颜色
不写即为透明。

2、背景图片

background-image：none或url（地址）

3、背景平铺

background-repeat：repeat平铺/no-repeat不平铺/repeat-x/y在横向纵向平铺


添加background-size:cover;可以让照片填充。

4、背景图片位置

background-position：x y；

• x,y为方位名词：top/center/bottom/left/right。

x,y可交换顺序。 如果只写一个，则另一个居中对齐。

• x,y为精确单位

省略则为垂直居中。 两者顺序不可变。

• x,y为混合单位

两者有顺序。

5、背景图像固定

background-attachment:scroll(背景随内容图像滚动)/fixed（固定）。

复合写法：颜色 地址 平铺 固定 位置
背景色半透明：background：rgba（0，0，0，0.3）

三、圆角边框

border-radius：length；
写四个值为顺时针，写三个值为左上，右上左下，右下，写两个值为对角线，或者设置成border-top-left-radius，顺序不可改变。

四、阴影

1、盒子阴影

box-shadow：h-shadow和v-shadow必需。

2、文字阴影

text-shadow：

五、盒子模型

1、边框border

border-width border-style border-color
style有solid实线，dotted点线，dashed虚线。

复合使用时，无顺序。且可分开写。

相邻边框合并：border-collapse:collapse ;使边框变细。
但会影响盒子大小。

2、内边距padding

是指边框与内容间距，会影响盒子大小。
不指定宽度时，padding不会撑开盒子宽度。
子标签不写width，与父同宽，padding也不撑开宽。

当写1个值时，是上下左右均为该值；
2个值时，为上下和左右；
3个值为上，左右，下；
4个值为上右下左。

3、外边距margin

margin的简写与padding同。也会影响盒子大小。

1. 外边距可以让盒子水平居中
   条件：
          a.盒子必须有宽度；
          b.盒子左右边距都设为auto；
             margin：0 auto；
   

2. 外边距合并
   a.相邻块元素垂直外边距的合并
    上下相邻块元素相遇时，上有bottom，下有top，不是相加而是取其最大值 。

解决方法为只定义一个。

        b.嵌套块元素垂直外边距的塌陷
          对于父子关系的块元素，父有上外边距，子也有上外边距，此时父元素塌陷较大值外边距。

解决方法为：
1.为父元素定义上边框或上内边距
2.父元素加overflow：hidden；

4、清除内外边距

* {
       padding: 0;
       margin: 0;
}

可以让盒子与页面不留边距。