CSS3零基础快速入门

复合选择器

1. 后代选择器：选择父级元素的后代元素

ul li {}		//选择 ul下属级别中的所有 li元素。可以多级嵌套： 爷爷级元素 父亲级元素 孙子级元素，每一个层级的元素。
1

2. 子选择器：只能选择作为某元素的最近一级子元素，直接后代，只能选择该元素儿子级的元素

<div class="one">
   <p>儿子</p>
   <a>
      <p>孙子 </p>
   </a>
</div>

div p {}	或者 .one p {}	//后代选择器会选中两个p标签
div>p {}	或者 .one>p {}	//子选择器只会选中儿子p标签
1
2
3
4
5
6
7
8
9

3. 并集选择器：任意形式的选择器只需要用, 一个逗号连接就是并集选择器，用于选择多组目标

4. 链接伪类选择器

a:link	// 选择素有未被访问的链接
a:visited	//选择所有已被访问的链接
a:hover		//选择鼠标指针位于其上的链接
a:active		//选择活动链接（鼠标按下未弹起的链接）
// 一般按照 link visited hover active 的顺序书写代码
1
2
3
4
5

5. :focus伪类选择器：选取获取焦点的表单元素。一般指 input 类的标签

input:focus {}		//把获取焦点的输入框选取出来
1

6. 属性选择器：根据某个元素是否包含某种属性选择

<input type="text" value="请输入用户名">
<input type="text">

input[value] {}	//属性选择器： input标签中包含value属性的那个
1
2
3
4

7. 结构伪类选择器

• E:nth-child(n) 公式用法

ul li:nth-child(2n)  // n 从0自增，2n表示选出偶数li
ul li:nth-child(n+5)  // n 从0自增，n+5 表示从第6个选中到最后
1
2

• type 和 child 的不同：

    <div>
        <h3>光头强</h3>
        <p>熊大</p>
        <p>熊二</p>
    </div>

div p:first-child {}   //这样选不到 熊大，因为该选择器的执行步骤是：1.先去找div中的第n个孩子  2.再把这第n个孩子拿去和p匹配一下看能否匹配成功

div p:first-of-type {}	//这样就可以选中。因为这个选择器的执行步骤是：1.先把 div中的所有p选出来排序 2.再去找第n个 p 
1
2
3
4
5
6
7
8
9

元素显示模式

元素显示模式就是元素(标签)以什么方式进行显示，比如 div 独占一行，比如一行可以放多个span

1. 块元素

• 独占一行

• 高度，宽度，margin，padding都可以控制

• 宽度默认是父级元素的100%

• 可以存放行内元素或块元素

注意： 文字类元素内不能使用块元素

2. 行内元素

• 一行可以显示多个
• 高度，宽度直接设置是无效的
• 默认宽度就是本身内容的宽度，所以内容越多，它会自己加大宽度
• 行内元素只能容纳文本或其他行内元素

注意： 链接里不能再放其他链接 ，但是链接里有时可以放块级元素，需要将链接转换一下模式

3. 行内块元素 同时具有行内元素和块元素的特点

• 和相邻行内元素，行内块元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个
• 默认宽度就是它本身内容的宽度
• 高度，宽度，margin，padding都可以控制

4. 显示模式转换

display: block;	//转换为块元素
display: inline;	//转换为行内元素 
display: inline-block	//转换为行内块元素  
1
2
3

CSS没有给我们提供直接的文字垂直居中的方法，但是我们可以通过让文字的行高等于盒子高度就可以了。

背景样式

background-color:	red;
background-image: none或者 url(图片路径);			//常用于页面大logo，或者装饰性小图片，优点是便于控制位置
background-repeat: 						//背景图片的平铺
background-position:						//背景图片在盒子里的位置
background-attachment:	scroll | fixed		//设置背景图像是否固定或者随着页面的其余部分滚动
background:  rgba()		//设置背景颜色和透明度
1
2
3
4
5
6

复合写法

background: 背景颜色	背景图片	背景平铺	背景图像滚动	背景图片位置
1

三大特性

• 层叠性：
• 继承性：子标签会继承父标签的某些样式，如text- font- line- 相关的属性
• 优先级：当一个元素被多个不同的选择器选中时就会有优先级的产生。选择器相同则执行层叠性，选择器不同则根据选择器权重执行。复合选择器会有权重叠加

行内样式 > ID选择器 > (类选择器=伪类选择器) > 元素选择器 > 继承或者*

盒子模型

• border：当指定了div的宽高时是默认不算border的，单独设置border会使原先的div尺寸变化。就是说：如果已经给div设置了宽度和高度，再设置border会撑大盒子。

border-style | border-width | border-color
border: 1px solid red		//简写格式，三者之间没有顺序
1
2

• padding：内边距，和border一样都会影响盒子大小

padding: 5px;		//1个值表示上下左右都是
padding: 5px 5px;		//2个值表示 上下 左右
padding: 5px 8px 10px;		//3个值表示 上 左右 下
padding: 5px 2px 7px 10px;		//4个值表示 上右下左
1
2
3
4

• margin：外边距。

//margin可以让块级盒子水平居中，但必须满足两个条件：
//1.盒子必须指定了宽度；2.盒子左右的margin都设置为 auto
//margin的简写规则和 padding 一模一样
1
2
3

让块级元素水平居中只需要设置其左右 margin 为 auto如果想让行内元素或者行内块元素水平居中，只需要给其父元素添加 text-align:center 即可

盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;  //前两个必选，后四个可选
1

盒子阴影不占用盒子空间，不会影响排列。

float 可以让多个块级元素在一行内显示

网页布局第一准则：多个块级元素纵向排列找标准流(就是之前学的那些行内元素，块元素)，多个块级元素横向排列找浮动。

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

选择器 {float: 属性值;}			// none. left	right
1

1. 浮动特性

• 浮动元素会脱离标准流，并且移动到指定位置，原先位置不保留
• 浮动的元素会一行内显示并且元素顶部对齐
• 浮动元素会具有行内块元素的特性

如果是正常标准流，两个div应该显示如下：

如果给粉色的那个div增加浮动属性：float:left;，则显示效果如下：

1. 浮动了之后，粉色div的位置就不保留了，而且粉色的也不属于标准流了，但是蓝色的还是，所以粉色原先那个位置其实是空闲了，粉色漂浮在上面，于是蓝色就填补上去了。

2. 而且浮动的元素是互相紧贴在一起的，没有缝隙。如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

3. 任何元素都可以浮动，不管原先是什么显示模式的元素，添加浮动之后具有行内块元素的特性。

4. 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，他的大小根据内容来决定。

为了约束浮动元素的位置，我们网页布局一般采取的策略是：

先用标准的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流 举个例子：

三个标准流的div应该显示如下：

1. 如果将将绿色设为float，结果会怎么样？ 显示效果如下：

红色是标准流的，一经把一整行都霸占住了别人都不能用。绿色浮动后，其位置就空出了，下面蓝色的标准流就往上填补。

2. 如果还是刚刚 的三个标准流，现在将红色和蓝色改为浮动，只有中间的绿色为标准流，那结果会怎么样？

清除浮动

由于父级盒子很多情况下，不方便给出高度，但是浮动盒子又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

清除浮动的本质是清除浮动元素造成的影响，如果父盒子本身有高度，则不需要清除浮动。语法：

选择器 {clear: left | right | both}
1

清除浮动方法

• 额外标签法(推荐)

• 父级添加overflow属性

• 父级添加after伪元素

• 父级添加双伪元素

定位

将盒子定在某一个位置，比浮动更灵活。 定位 = 定位模式 + 边偏移

• 定位模式：static relative absolute fixed 静态 相对 绝对 固定 四种定位方式
• 边偏移：就是距离 top left right bottom 四条边的距离。eg： top: 50px

relative 相对定位

• 相对该元素当前位置进行的位置偏移。
• 即使位置移动了，但是原先的位置依然保留，其他元素不会进行填补。

absolute 绝对定位

元素在移动位置的时候，是相对于它的祖先元素来说的

• 如果某个元素无父级元素，那么就以浏览器可视窗口作为父级元素。
• 如果某个元素有父级元素，但是其父级元素没有申明定位，那么该元素还是以浏览器作为父级元素进行定位
• 如果某个元素的父级元素有定位(相对，绝对，固定)，则该元素以最近一级的有定位的祖先元素为参考点定位。
• 绝对定位不再占有原先位置 （脱标）

平常用的最多的就是：子绝父相

fixed 固定定位

让元素固定于浏览器可视区的位置；主要适用场景：可以在浏览器页面滚动时元素的位置不会改变。

• 以浏览器可视窗口为参照点移动元素

窗口不是全屏，可视窗口的大小也会变化。上图红色区域就是可视窗口

• 跟父级元素没有任何关系
• 固定定位和绝对定位一样，不占有原先的位置

sticky 粘性定位

可以看作是相对定位和固定定位 的混合

• 以浏览器的可视窗口为参照点移动元素 固定定位特点
• 粘性定位占有原先位置 相对定位特点
• 必须添加 top，right，left，bottom 其中一个才有效

定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以用z-index 来控制盒子的前后次序。只有定位的元素才有z-index 属性

选择器 {z-index:1;}  //数值可以是正负整数，0，默认是auto，数值越大，盒子越靠上 
1

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin: 0 auto 水平居中，但是可以通过一下方法实现水平和垂直居中。

1. 先用定位移动到窗口的一半位置。 position: absolute left:50%
2. 再向左移动半个元素的宽度。 垂直居中思路类似

定位的一些特性

1. 行内元素如果设置了绝对定位或者固定定位，就可以直接设置宽高，不需要再转换显示模式为inline-block
2. 块级元素添加绝对定位或者固定定位后，如果不设置宽高，则默认为内容大小
3. 脱标的盒子不回触发外边距塌陷
4. 之前说浮动时说过，浮动会漂浮起来，下面的盒子会填补上去，被浮动的盒子盖住。但是下面盒子里的内容是不会被盖住的，如下图：

<div class="div"></div>
<p>wdjawodsndasofasjfsfas</p>

.div {
            float: left;
            width: 300px;
            height: 200px;
            background-color: pink;
        }
1
2
3
4
5
6
7
8
9

可以看到，p标签已经被压住了，但是其中的文字自动往外移，以免被盖住

5. 但是绝对定位和固定定位都会压住下面标准流的所有内容包括文字