跳到主要内容

链接伪类、背景、行高、盒子模型、浮动

一、链接伪类​

CSS 伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。

语法： 伪类由冒号（:）后跟着伪类名称组成（例如，:hover）

a:link{属性:值;}       /*链接默认状态    ( a{属性:值}效果是一样的。)*/ 
a:visited{属性:值;}     /*链接访问之后的状态*/
a:hover{属性:值;}      /*鼠标放到链接上显示的状态*/
a:active{属性:值;}      /*链接激活的状态*/
a:focus{属性:值；}     /*获取焦点*/

注意： 1.a:visited之后要想回到之前的状态，需要清除缓存。 2.写的顺序要按照link,visited,hover,active的顺序来写，否则可能不显示。

  • 文本修饰
text-decoration:  none | underline | line-through | ...... /* 链接下划线/删除线/...... */

二、背景属性​

  • background-color： （背景颜色）

  • background-image： （背景图片）

  • background-repeat： repeat(默认) | no-repeat | repeat-x | repeat-y （背景平铺）

  • background-position： left | right | center（默认） | top | bottom （背景定位）

  • background-attachment

    • scroll: 背景图的位置是基于盒子（假如是div）的范围进行显示
    • fixed：背景图的位置是基于整个浏览器body的范围进行显示，如果背景图定义在div里面，而显示的位置在浏览器范围内但是不在div的范围内的话，背景图无法显示。

  • background-clip:

    • background-clip: border-box; 背景占据边框
    • background-clip: padding-box; 背景不占据边框，但是占据 padding
    • background-clip: content-box; 背景不占据边框，也不占据 padding，只占据内容区域
    • background-clip: text; 背景不占据边框，也不占据 padding，也不占据内容区域，只占据文字区域（作为文字的背景色

  • background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域。

    • background-origin: border-box 背景图片的摆放以 border 区域为参考
    • background-origin: padding-box 背景图片的摆放以 padding 区域为参考
    • background-origin: content-box 背景图片的摆放以 content 内容区域为参考

  • background-position

    • background-position: right; // 方位值只写一个的时候，另外一个值默认居中。
    • background-position: right bottom // 写2个方位值的时候，顺序没有要求
    • background-position: 20px 30px // 写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向

  • background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

    • background-size: cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
    • background-size: contain 缩放背景图片以完全装入背景区，可能背景区部分空白。
    • background-size: 50% 一个值，指定图片的宽度，图片的高度隐式的为 auto
    • background-size: 50% 50% 第一个值指定图片的宽度，第二个值指定图片的高度

1、背景属性连写​

background: red url("1.png") no-repeat 30px 40px scroll;

PS：连写的时候没有顺序要求，url为必写项

三、行高​

行高：是基线与基线之间的距离 = 文字高度+上下边距

1、行高的单位​

单位除了像素以外，行高都是与文字大小与前面数值的乘积。

行高单位父元素文字大小（定义了行高）子元素文字大小（子元素未定义行高时）行高
40px20px30px40px
2em20px30px40px
150%20px30px30px
220px30px60px

总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。

四、盒子模型​

1、border（边框）​

border-style:  solid   /*实线*/
                    dotted  /*点线*/
                    dashed  /*虚线*/
                        none /*无边框*/
border-color   /*边框颜色*/
border-width   /*边框粗细*/
  • 边框属性的连写
border: 1px solid #fff;

PS: 没有顺序要求，线型为必写项

  • 边框合并（细线边框，一般在 table 上使用）
border-collapse:collapse;

2、获取焦点​

  • 点击label也可以选择文本框：label for id 获取光标焦点
<label for="username">用户名：</label>
<input type="text" class="username" id="username"></input>

3、padding（内边距）​

语法：

padding-left |  right |  top  |  bottom
  • padding连写
padding: 20px;   /*上右下左内边距都是20px*/
padding: 20px 30px;   /*上下20px   左右30px*/
padding: 20px  30px  40px;  /* 上内边距为20px  左右内边距为30px   下内边距为40px*/
padding: 20px  30px   40px  50px;   /*上20px 右30px  下40px  左  50px*/
  • 内边距撑大盒子的问题

盒子的宽度 = 定义的宽度 + 边框宽度 + 左右内边距

如果不想盒子宽度背撑大，可以设置：

box-sizing: border-box;

4、margin（外边距）​

margin-left   | right  |  top  |  bottom
  • 外边距连写
margin: 20px;    /*上下左右外边距20PX*/
margin: 20px 30px;   /*上下20px  左右30px*/
margin: 20px  30px  40px;     /*上20px  左右30px   下40px*/
margin: 20px  30px   40px  50px; /*上20px   右30px   下40px  左50px*/

注意：

1、垂直方向外边距合并（取最大值）

两个盒子垂直布局，一个设置上外边距，一个设置下外边距，取的设置较大的值，而不是相加。

2、嵌套的盒子外边距塌陷

嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距的塌陷（父盒子跟着移动）

解决方法:

1.给父盒子设置边框

2.给父盒子overflow:hidden;

add 20180904：

注意：当父元素没有border-top或者padding-top再或者没有浮动的时候，子元素的margin-top会传递到父元素上面 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        .a {
            width: 300px;
            height: 100px;
            background-color: red;
            margin-bottom: 140px;
        }

        .b {
            width: 100px;
            height: 40px;
            background-color: blue;
            margin-top: 50px;
        }

        .c {
            width: 300px;
            height: 100px;
            background-color: yellow;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <!--当父元素没有border-top或者padding-top再或者没有浮动的时候，子元素的margin-top会传递到父元素上面-->
    <div class="a">
        <div class="b"></div>
    </div>
    <div class="c"></div>
</body>

</html>

解决办法：

  • 给父元素加overflow:hidden;
  • 给父元素加透明边框：border-top: 1px solid transparent;

五、浮动​

1、文档流（标准流）​

元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。

2、浮动布局​

float:  left   |   right /*浮动方向*/

特点： 1.元素浮动之后不占据原来的位置（脱标） 2.浮动的盒子在一行上显示

3、浮动的作用​

  • 文本绕图

  • 制作导航（经常使用）

把无序列表 ul li 浮动起来做成的导航。

  • 网页布局

4、清除浮动​

清除浮动不是不用浮动，清除浮动产生的问题。

问题：当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误（占据父盒子的位置）。

方法一​

额外标签法：在最后一个浮动元素后添加标签。

clear: left  |  right  | both  /*用的最多的是clear:both;*/

方法二​

给浮动元素的父集元素使用overflow:hidden;

注意：如果有内容出了盒子，不能使用这个方法。

方法三（推荐使用）​

伪元素清除浮动。

: after 相当于在当前盒子后加了一个盒子。

清除浮动总结​

  • 给父元素高度，缺点：高度无法自适应
  • 父元素加 overflow:hidden; 缺点：超出会被隐藏
  • 父元素加定位，absolute/fixed，缺点：脱离文档流。
  • 父元素加浮动，缺点：可能父元素的父元素继续塌陷
  • 父元素加inline-block，缺点：行内块的缺点。
  • 浮动元素的最后加一个额外标签，标签使用clear:both; 缺点：结果冗余
  • 万能清除法，伪元素清除浮动。
content: ".";
display: block;
height: 0;
visibility: hidden;
clear:both;
overflow: hidden;