CSS核心样式

CSS常用样式

字体属性

粗细font-weight

  • 作用：设置文字是否加粗显示
  • 属性名：font-weight，属于font属性的一个单一属性
  • 属性值有两种方式：单词类型，数字类型

单词类型

属性值与说明

数字类型

  • 整百数字：100-900
  • 数字越大，文字越粗
  • 注意：400=normal，700=bold。

字体风格font-style

  • 作用：设置文字是否斜体显示
  • 属性名：font-style，font属性的单一属性
  • 属性值：单词
    属性值与说明

    要注意，italic与oblique的区别，在日常工作中我们通常使用italic去实现斜体效果
    显示效果

注明：i标签也可以实现斜体效果,且内部的样式为italic

i标签的内部font-style属性

行高line-height

  • 作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的

  • 属性值：line-height，font属性的单一属性


    属性值与说明
 div {
      font-size: 16px;
      line-height: 26px;

    }
设置行高为26px

行高的数值是通过设计图获取的，量取数值时需要使用一些辅助软件工具，比如fireworks
如果设计师没有提交具体数据，就需要进行测量
步骤：

  • 第一步：确定文字字号与字体。使用文字工具，书写与文本内容相同的文字，调整文字字号与字体，直到两个文字完全重合，就得到了我们需要的字号和字体数据，颜色差异要大才好分辨。

  • 第二步：书写两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到文字两行都对齐了，就得到了行高值。


    大概效果是这样的

字体综合

字体，字号，行高，加粗，斜体都是font综合属性的单一属性
font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔

写法一

font进行综合书写时，有要字号与字体的参与（必须），而且必须字号在前，字体在后，不能颠倒顺序。

font: 14px "宋体";

写法二

font属性值经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号与行高之间要用/进行分隔

font: 14px/28px "宋体";

写法三

如果要设置加粗字体，或者斜体，两个属性值只能写在最前面，两个值之间可以互换位置。后面的字号、行高、字体不能改变位置

font: bold italic 14px/28px "宋体";
font: italic bold 14px/28px "宋体";

以上两行代码都是等效的

文本属性

水平对齐text-align

  • 作用：文本水平方向的对齐
  • 盒子中，单行或者多行，都会对应方向对齐

  • 属性值：三个方向的单词


    属性值与说明

文本修饰text-decoration

  • 作用：设置文本整体是否有线条修饰的效果


    属性值与说明
演示效果

如上

缩进text-indent

  • 作用：设置段落首行是否进行缩进
    属性值与说明

    实际工作中，常用的是em为单位的属性值，注意百分比：父级标签的width属性值，比如p标签是body的子级标签，50%就是向右缩进到正中间
    属性值区分正负，正数表示向右缩进，负数表示向左缩进

盒模型属性

盒模型又叫做框模型，有五个用来描述盒子位置，尺寸的属性，分别是：width，height，padding（内边距）、border（边框）、margin（外边距）

盒模型

content中，宽高就是width与height

常见盒模型区域

1.书写元素内容区域：width+height
2.可以实体化的区域：width+height+padding+border
3.实际盒占位的区域：width+height+padding+border+margin

通常，网站控制台是可以看到盒模型图的

F12开发者工具内的盒模型

宽度width

  • 作用：设置可以添加元素内容的区域的宽度


    属性值与说明

    特殊用途：

  • 若是一个元素没有添加width属性，默认为auto，不同的元素浏览器会根据它的特点进行自动计算，得出实际宽度，比如：<div>等独自占了一行的，它的width属性的值就会自动填满父元素的width区域，若是<span>等不需要占一行的，width属性的值是内部元素内容自动撑开的宽度。
  • <body>比较特殊，不需要设置width属性，宽度自动适应浏览器窗口的宽度。

高度height

  • 作用：设置可以添加元素内容的区域的高度


    属性值与说明

    特殊用途：

  • 一个元素不添加height属性，默认值为auto，浏览器会自动计算出高度，也就是说内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度

内边距padding

  • 设置的是元素的边框内部到宽高区域之间的距离
  • 可以去加载背景，不能书写嵌套的内容
  • padding是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性

单一属性

书写规律：上右下左（顺时针）

p {
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px;
        }

简写

四值法：上右下左
      p {
            padding: 10px 20px 30px 40px;
        }
四值法
三值法：上，左右，下
 p {
            padding: 10px 20px 30px;
        }
三值法
二值法：上下，左右
 p {
            padding: 10px 20px;
        }
二值法
单值法：分配方向为上右下左，四边相同
 p {
            padding: 10px;
        }
单值法

案例

三边框内边距相同，一边不同
方法1.四值法，三值法，进行属性值设置
方法2.利用层叠：

 padding: 10px;
 padding-right: 20px;

方法二会更加灵活，推荐使用，注意书写顺序，单一属性要放在后面

边框border

  • 作用：设置的是内边框外面的边界区域，作为盒子的实体化的最外层
  • 属性值：线的宽度，线的形状，线的颜色
  • border属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式。
p {
  border: 10px solid #f00
}

线宽border-width

  • 作用：边框线的宽度
  • 属性值：常用px形式的数值，四个方向都有边框，属性值类似于padding，也有四种值的写法
p {
    border-width:10px 20px 30px 40px;
}

线型border-style

  • 作用：设置边框的线条形状

  • 属性值：形状的单词，类似于padding的综合属性写法
    属性值的单词：


    只需要记住前三个

边框颜色border-color

  • 作用：设置边框的颜色
  • 属性值：颜色名或颜色值，整体类似padding综合属性写法
p {
    border-color: #ff0 #0f0 # 00f #ff0;
}
代码

结果

根据边框的方向划分

上右下左：border-top，border-right，border-bottom，border-left
每个单一属性必须与复合属性border一致，设置三个属性值

p {
    border-top: 10px solid #ff0;
    border-right: 20px solid #0f0;
}

根据方向和类型，进一步细分

类似border-top的单一方向属性，也可以根据属性值类型继续进行单一属性划分。
单一属性写法：boder-方向-类型
细分时必须要先写方向划分再写类型划分，否则属性名错误

p {
    border-right-color: #0f0;
    border-right-style: dash;
}

外边距margin

  • 作用：设置的是盒子与盒子之间的距离
  • 特点：不能渲染背景
    属性值：常用px为单位的数值
    外边距的设置方式与内边距padding一模一样的

单一属性

margin-top: 20px;
margin-right:20px;
margin-left:20px;
margin-bottom:10px;

复合属性的四种值的写法

margin :10px 20px 30px 40px;（上右下左）
margin:10px 20px 30px;（上，左右，下）
margin:10px 20px;（上下，左右）
margin:10px;（全部一样）

盒模型扩展应用

清除默认样式

  • 大部分标签都有默认加载样式，会对布局有影响。避免影响，需要清除默认样式。
  • 盒模型属性中内外边距：大部分容器级标签，有默认边距，要么用标签选择器的并集方式，要么通配符
  • <ul>、<ol>两种列表，有默认的列表前缀：清除list-style属性
  • <a>标签的默认样式，顺带设置页面中常用的a的公共样式：设置color和text-decoration

  • 清除默认加粗效果：设置font-weight


    设置清除默认样式

还可以给<body>标签设置整体文字样式，让大部分后代标签全部去继承

body {
    color : #ff0;
    font-size:18px;
    font-famliy: "宋体";
}

height应用

  • 根据不同的需求，高度属性可以设置可以不设置
  • 若设置了高度：盒子占有的高度位置就确定了，后面的同级元素会紧紧挨着加载
  • 若没设置高度：会根据标签内部内容高度自动撑开
  • 以<div>标签为例，根据不同选择是否设置高度

必须设置高度的情况

设计图中盒子高度是固定的，后面同级的元素在高度下面加载，自身盒子内部内容过多会溢出

溢出

overflow属性
设置了高度的盒子出现了上图的情况，可以通过一个溢出的属性overflow，进行溢出部分内容的显示效果设置
属性值与说明

必须不设置高度

要求盒子高度必须自适应内部的高度
或者设置height的属性值是自动的

div {
    height: auto;
}

居中

文本水平居中

  • 水平居中：text-align属性
  • 不论单行还是多行都能设置
div {
    text-align:center;
}

文本垂直居中

  • 单行文本垂直居中：让文本行高line-height等于盒子高度height


    代码

    效果

  • 多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同


    代码，高度自适应，内边距上下相同

    效果

元素垂直居中

一个元素内部嵌套的子元素，在父元素中居中
垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距


代码

设置padding上下边距，高度自适应，可以实现垂直的居中

效果图

元素水平居中

针对类似于<div>样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度宽度，可以设置子盒子的margin值，水平方向值都设置为auto
解释：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中

代码

效果图

注释：上下有空隙是因为设置了padding内边距，30px

父子盒模型

一般情况下，一个父元素内部可以放一个或者多个子元素，多个子元素要排成一排显示，必须要保证父元素的宽度要够，需要一个规律：所有子元素的宽度加在一起不能大于父元素的width
也就是说：父元素的width≥所有子元素的width+padding+margin+border
如果没能满足这个条件：
1.多余的子元素掉下来不能在一排
2.溢出
怎么解决？
计算或者取尺寸的时候要计算准确，一个像素都不能偏差

特殊情况：盒模型自动内减

父子盒模型中，只有一个子元素，且子元素是类似 <div> 标签必须占一行的。 不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。 如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减，子元素的 width 会自动收缩尺寸。
高度不会出现这种情况
子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。

margin塌陷现象

margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。

同级塌陷

代码

如果所述：box1盒子的下边距是50px，box2的上边距是100px，但是实际情况是两者的边距只有100px，而没有150px
效果图

这就是塌陷现象

父子元素塌陷

父子元素之间也会出现margin塌陷，父元素和子元素都设置了同方向的的margin-top的值，两个元素之间没有其他内容的隔离，导致两个属性相遇了，并且发生了margin塌陷现象


代码

子元素被压在了父元素内

另外：
如果本身父元素与上一个元素的距离是0，但是子元素设置了上边距，那么就会把父元素也一起掉下来。


例图

解决办法：

1.同级元素：只设置给一个元素间距，不要拆分，设置一个方向的，比如就是margin-bottom，而不是第一个有bottom第二个还有top
2.父子元素：让两个边距不要相遇，中间可以使用父元素border或者padding将边距分隔开来；更常用的方法是父子盒模型之间的距离就用父元素的padding就好

水平方向的margin没有塌陷现象

标准文档流

  • 标准文档流，指的是元素排版布局过程中，元素会默认自动从左到右，从上往下的流式排列方式。前面内容发生了变化，后面的位置也会发生变化
  • HTML就是一种标准文档流文件
  • HTML中的标准文档流特点通过两种方式体现：微观现象和元素等级

微观现象

1.空白折叠现象
2.文字类的元素如果排在一行会出现一种高低不齐，底边对齐的效果
3.自动换行，元素内一行内容写满元素的width时会自动换行

元素等级

  • 在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素等。
  • 块级元素：大部分容器级标签包括p标签都是块级元素，比如 <div> 、<h1> 等。
  • 行内元素：大部分的文本级标签，比如 <span>、<a>、<b> 等。
  • 行内块元素：比如 <img>、<input> 等。
  • 各种等级的元素有自己的加载特点。

块级元素

1.块级元素可以设置宽高，在浏览器中正常加载
2.块级元素必须独占一行 ，不能与其他的任何标签并排一行
3.块级元素如果不设置宽高，会自动撑满父级的width；高度不设置，会被内容自动撑开高度

行内元素

1.行内元素不能正常加载宽度和高度，其他的盒模型虽能设置，但是容易出现加载问题
2.行内元素可以与其他的行内元素或者行内块元素并排一行显示
3.行内元素不论是否设置宽高，高度和宽带都只能被内容自动撑开

行内块元素

1.行内块元素可以设置宽度和高度
2.行内块元素可以与其他的行内块或者行内并排一行显示
3.行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容自动撑开。
4.行内块依旧具有标准流的微观性质，例如空白折叠现象


img标签与input

显示模式

显示模式display

  • 可以通过display属性更改一个标签的显示模式

  • 属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点


    属性值与说明

    代码

    效果图

脱离标准流

display属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制

标签元素脱离标准流包括：浮动、绝对定位、固定定位

浮动

浮动定义

  • 浮动是一种非常重要的布局属性。
  • 属性名：float，漂流、浮动的意思。
  • 属性值：
    left 左浮动
    right 右浮动

  • 作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。


    上图是左浮动，下图是右浮动

浮动性质

1.浮动的元素脱离标准流：

脱离了标准流的控制，具备行快二象性，浮动的元素可以设置宽高，还可以排成一行，不会有空白折叠现象，若是不设置宽高，则会被元素内容自动撑开

2.浮动的元素依次贴边

  • 浮动属性值：left，right
  • 浮动方向设置不同，进行布局时，加载位置方向不同
  • 举例：left
  • 前提：父元素宽度足够。则贴边顺序大概是：父元素 左边←子元素1←子元素2← 子元素3←子元素4。

  • 父元素宽度如果不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。


    例子

  • 如果子元素4在跳过子元素3向更前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。


    例子

  • 如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4会受前面子元素3高度影响，不会出现钻空现象。


    例子

  • 如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，如果子元素4的宽度超过了父元素，只会出现溢出现象。


    例子

  • 右浮动与左浮动贴边效果是一致的，只是贴边方向不同。按照 HTML 书写顺序依次 向右向上一个元素贴边，第一个元素贴父元素的右边。


    例图
<style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 400px;
      height: 400px;
      border: 10px solid #000;
    }
    .box p {
      /* float: left; */
      float: right;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .box .ps1 {
      height: 200px;
      background-color: #f00;
    }
    .box .ps2 {
      width: 180px;
      height: 50px;
      background-color: #0f0;
    }
    .box .ps3 {
      background-color: #00f;
    }
    .box .ps4 {
      width: 450px;
      background-color: #ff0;
    }
  </style>
  • 注意：同一个盒子中，可以有左浮动和右浮动的子盒子共存，子盒子会根据浮动方向，向上一个同方向的子盒子贴边，空间不够的话会出现依次贴边的情况
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
      width: 600px;
      height: 126px;
      padding-top: 2px;
      padding-left: 2px;
      background-color: #ccc;
    }
    ul li {
      float: left;
      width: 100px;
      height: 40px;
      margin-right: 2px;
      margin-bottom: 2px;
      background-color: skyblue;
    }
    .fr {
      float: right;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="fr">4</li>
    <li>5</li>
    <li class="fr">6</li>
    <li class="fr">7</li>
    <li>8</li>
    <li class="fr">9</li>
    <li>10</li>
    <li class="fr">11</li>
    <li>12</li>
  </ul>
</body>
</html>

上述代码的展示结果为：


效果图
贴边性质应用
  • 利用浮动的这个依次贴边性质，可以完成多种网页布局效果
    ①.上面的表格效果
    ②.导航栏效果
    ③.电商或企业网站布局

练习

练习题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            float: left;
        }
        .box1 {
            border: 1px solid #000;
            width: 940px;
            height: 440px;
            margin: 10px;
            padding: 10px;
        }
        .box2 {
            width: 300px;
            height: 260px;
            background-color: #E968A1;

        }
        .box3 {
            width: 300px;
            height: 180px;
            background-color: #99BFFD;
        }
        .box4 {
            width: 240px;
            height: 260px;
            background-color: #80CEF5;
        }
        .box5 {
            width: 200px;
            height: 130px;
            background-color: #FEF898;
        }
        .box6 {
            width: 200px;
            height: 130px;
            background-color: #89C995;
        }
        .box7 {
            width: 160px;
            height: 180px;
            background-color: #D798FF;
        }
        .box8 {
            width: 160px;
            height: 180px;
            background-color: #B4FE9B;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box6"></div>
        <div class="box5"></div>
        <div class="box3"></div>
        <div class="box7"></div>
        <div class="box8"></div>
        <div class="box7"></div>
        <div class="box8"></div>
    </div>
</body>
</html>
实现效果

3.浮动的元素没有margin塌陷

  • margin塌陷现象出现在标准流中的，浮动元素已经脱离了标准流，所以不再有塌陷现象
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 200px;
      height: 400px;
      /* border: 1px solid #000; */
      background-color: pink;
    }
    .ps1 {
      float: left;
      width: 100px;
      height: 100px;
      margin: 50px;
      background-color: skyblue;
    }
    .ps2 {
      float: left;
      width: 100px;
      height: 100px;
      margin: 50px;
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="box">
    <p class="ps1">1</p>
    <p class="ps2">2</p>
  </div>
</body>
</html>
效果如上，两个盒模型的间距为50+50

4.浮动的元素让出标准流位置

  • 元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面的一个同级元素
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    .ps1 {
      float: left;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
    .ps2 {
      /*float: left;*/
      width: 200px;
      height: 200px;
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
  <div class="box">
    <p class="ps1">1</p>
    <p class="ps2">2</p>
  </div>
</body>
</html>

取消ps2的浮动，出现的效果为

如上

  • 在IE6、7浏览器中，有兼容问题：


    在IE7中有兼容性问题
  • 因为兼容性问题的存在，压盖效果一般使用后期学习的定位制作。
  • 没有特殊需求的前提下，不允许一个父元素的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动

5.字围现象

  • 同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝色盒子会压住粉色盒子的一部分，文字内容又不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它加载

  • 这种效果我们一般称之为字围现象


    字围效果代码

    效果图

浮动的问题

1.如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。


问题体现图

2.父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box {
      width: 1000px;
      border: 10px solid #f00;
    }
    .box p {
      float: left;
      width: 100px;
      height: 100px;
      margin-right: 10px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>
问题

解决办法：清除浮动

清除浮动一：height

  • 给标准流父元素强制加一个合适的高度
 .box {
      width: 1000px;
      height: 100px;/*添加一行高度*/
      border: 10px solid #f00;
    }

  • 解决：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边


    解决问题

  • 问题：父元素高度不是自适应，子元素高度一变化就会再次出现问题

.box p {
      float: left;
      width: 100px;
      height: 200px;/*更改为200px*/
      margin-right: 10px;
      background-color: skyblue;
    }
出现问题

清除浮动二： clear

  • clear，清除。
  • 作用：清除标签元素自身受到的前面的浮动元素的影响。
  • 属性值：
    left 清除前面左浮动带来的影响
    right 清除前面右浮动带来的影响
    both 清除前面所有浮动带来的影响
    给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置
  .box {
      width: 1000px;
      border: 10px solid #f00;
      clear: both; /*新加clear：both 清除浮动*/
    }
清除浮动clear
  • 解决：浮动元素影响后面元素标准流位置和贴边。
  • 问题：父元素不能高度自适应，两个父元素之间如果有margin效果不正确。

清除浮动三：隔墙法

外墙法：在两个大的父盒子之间，添加一个空的<div>标签，标签上带有clear:both属性。

.cl {
     clear: both;
   }

  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div class="cl"></div>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>

解决了浮动影响后面元素标准流位置和贴边，模拟父元素间的距离
换汤不换药，父元素没有高度自适应

内墙法：在父元素内部，所有的浮动子元素后面添加一个空的 <div> 元素，标签高度为 0，添加 clear 属性。

<body>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="cl"></div>
  </div>
  <!-- <div class="cl"></div> -->
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="cl"></div>
  </div>
</body>
  • 解决：父元素高度自适应，浮动影响后面的元素位置和贴边。
  • 缺点：浮动是 css 样式属性带来的问题，内墙法使用 HTML 结构去辅助解决问题， 如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成 HTML 结构的冗余

清除浮动四：伪类

  • 本质是使用伪类方法利用css代码书写一堵内墙。
  • 伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。
  • :after：这个伪类表示选中的是某个标签内部的最后的位置。
  • 书写方法：前面必须加普通的选择器，后面连续书写伪类名称。
  • 将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一 个clearfix的类名。
    .clearfix::after {
      content: "1";       /*添加一个文字内容*/
      display: block;     /*将文字内容转换为块级元素*/
      height: 0;          /*将盒子的高度固定为0，避免影响父盒子高度*/
      clear: both;        /*清除前面浮动影响*/
      visibility: hidden; /*将创建的元素占位置隐藏*/
    }

  • 解决：父元素高度自适应，浮动影响后面的元素位置和贴边


    效果

清除浮动五：溢出隐藏

偏方：给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性，可以解决浮动的所有问题

  • 补充：overflow属性
  • 元素高度设置之后，overflow：hidden，效果是将超过高度的部分直接隐藏
  • 元素高度没有设置之后，如果元素同时设置了overflow：hidden，元素会自适应内容的高度
  • 高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
  • 浮动影响后面的元素：父元素有了高度之后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。

总结：

1.如果父元素高度固定，使用height属性解决浮动问题
2.如果父元素高度自适应，使用overflow属性解决浮动问题

CSS伪类选择器

概念

  • 伪类与类有明显的区别
  • 普通的类：必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器上
  • 伪类：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须要搭配其他选择器使用，后面添加的样式不一定立即加载，需要触发某种行为才能加载
  • 伪类选择器的权重和普通类选择器相同
  • 写法：普通选择器：伪类名

<a>标签的伪类

  • 根据用户的行为不同，划分为四种状态，用户触发了对应的行为就会加载对应的样式
      a:link {            /*点击之前的样式*/
            color: red;
        }
        a:visited {         /*点击后的样式*/
            color: royalblue;
        }
        a:hover {           /*鼠标悬浮在上面时的样式*/
            color:green   
        }
        a:active {          /*鼠标点击时的样式*/
            color: yellow;
        }

a标签的伪类书写顺序

  • 可能会有2-3个同时触发的状态，每个状态的属性都会进行加载，相同的属性会发生层叠
  • 伪类书写顺序非常重要
  • 要是想要每一个伪类都进行正常的加载，书写顺序是link->visited->hover->active

记忆小技巧：love hate （爱恨准则）link，visited，hover，active

  • 一般来说访问前访问后应该设置为一样的效果，保证了页面的统一性。
  a:link,a:visited {
      color:red;
}
  • 有一种更加常用的做法是使用a标签选择器，同时选中四种状态，然后声明需要修改的属性对应修改就行了，节省了代码量
 a {
            display: block;
            width: 150px;
            height: 150px;
            background-color: skyblue;
            font: bold 20px/50px "宋体";
            text-align: center;
            color: #fff;
            text-decoration: none;
        }
        a:hover {
            background-color: red;
        }

其他的标签也可以设置:hover伪类

背景属性

background-color

 background-color: skyblue;

background-image

background-image: url(images/meng.jpg);

注意：

1.加载范围：默认的加载到边框及以内部分。后期图片不重复加载的话，从border以内开始加载
2.颜色和图片可以同时设置，图片会压住背景颜色，没压住的部分显示设置的背景色

background-repeat

  • 作用：是否要在盒子内重复进行加载
    属性值 作用
    repeat 重复，默认属性值，表示图片会重复加载填满整个盒子区域
    no-repeat 不重复，不论背景图是否大于盒子范围，都只加载一次图片
    repeat-x 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
    repeat-y 垂直重复，使用背景图片垂直重复加载铺满第一行，水平方向不重复 
background-repeat: repeat-x;

background-position

  • 作用：设置不重复的图片在背景区域的加载开始位置
  • 三种写法，但是都有两个属性值，并且是一个意思：第一个表示水平方向的位置，第二个表示垂直方向的位置

第一种写法：单词表示法

  • 水平方向：center，right，left
  • 垂直方向：top，center，bottom
background-position: right bottom;

图片的位置就在右下角：


右下角

第二种写法：像素表示法

  • 第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离。
  • 第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离
background-position: 100px 50px;
右移100px，向下50px
  • 注意：区分正负
  • 正数：向右，向下
  • 负数：向左，向上
    可以使用fw软件进行尺寸的测量

第三种写法：百分比表示法

100%代表的数值：

  • 水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。
  • 垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
background-position: 100% 100%；
效果

background-attachment

  • 作用：设置背景图片是否要随着页面或者盒子的滚动而滚动
  • 属性值与说明：
    属性值 说明
    scroll 滚动的，表示背景图片与盒子保持相对位置不对，随着页面滚动而滚动
    fixed 固定的，背景图的定位的参考点从盒子的border以内的左上角顶点变成了浏览器窗口的左上顶点，页面滚动时是不会改变的，导致了背景图固定在浏览器窗口的某个位置，不会随着页面的滚动而滚动

综合写法

   background: url(images/bg4.jpg) no-repeat center top scroll lightblue;

注意

1.如果属性没有一次性写全，那么其他没有设置的属性会按照默认值进行加载
2.如果想去掉综合属性的一部分，其他的不变，建议使用单一属性写法进行层叠

      background: url(images/bg4.jpg) no-repeat center top scroll lightblue;
      background-attachment: fixed;

背景应用

一、场景替换图

  • <h1> 标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片、最大的标题等。
  • 另外 <h1> 内部的文字，可以帮助提高 SEO 搜索排名。 在设置的是 logo 图片时，如果使用插入图，就不能书写搜索关键字。
    所有我们为了解决SEO问题，可以在HTML内把插入图换成文字，使用CSS添加背景图给a标签或者h1标签 
    h1 {
      width: 146px;
      height: 58px;
      margin: 0 auto;
    }
    h1 a {
      display: block;
      width: 146px;
      height: 58px;
      background: url(images/logo.png) no-repeat;
      /* font-size: 0; */
      text-indent: -15em;
      overflow: hidden;
    }

 <h1>
    <!-- <a href="#"><img src="images/logo.png" alt=""></a> -->
    <a href="#">淘宝网|购物|衣服|直播</a>
  </h1>
效果图

解释：
1.h1标签内部还是使用文字，提高seo搜索排名
2.给a标签添加背景图，将字号写成0，除了IE7有兼容问题之外不会有显示问题，但是为了便于浏览器都能运行，选择了text-index
3.text-index：-15em的作用是将文本往左移，移出盒子内部，然后使用overflow:hidden，进行隐藏（注意：a标签要先转换为块级元素才可以移动）

二、padding区域背景图

  • 四个方向的padding都可以用来添加背景图
 .list {
      width: 300px;
      padding-left: 10px;
      border: 1px solid #333;
      margin: 10px;
      list-style: none;
      font: 16px/32px "微软雅黑";
    }
    .list li {
      padding-left: 20px;
      background: url(images/s.png) no-repeat left center;
    }

<ul class="list">
    <li>新闻标题新闻标题新闻标题</li>
    <li>新闻标题新闻标题新闻</li>
    <li>新闻标题新闻标题新闻标</li>
    <li>新闻标题新闻标题</li>
    <li>新闻标题新闻标题新闻标题</li>
  </ul>
效果图

三、精灵图技术

  • 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术
CSS精灵
  • CSS 精灵是一种处理网页背景图像的方式。 它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。 通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。
技术依据

1.网页中需要用到的小尺寸背景图制作成一张背景透明的png图片
2.利用背景定位技术，将精灵图的每个小图片加载到对应的标签上

使用方法

1.使用fw定位到精灵图里需要用得到的图标，然后进行定位如下

 p {
      width: 80px;
      height: 30px;
      background: url(images/icons.png) no-repeat -146px -48px;
    }

<p></p>
精灵图

定位到的极有家icon
注意事项

1.不能放上插入图片
2.精灵图的宽度取决于最宽的背景图片的标签宽度
3.每个图片之间要留有足够的空白，保证背景图片加载到一个标签内部时，不能出现多余内容
4.最低端要留有空白，方便以后添加更多的精灵图
在线生成精灵图网址

https://www.toptal.com/developers/css/sprite-generator/

CSS3新增背景属性

背景半透明

  • CSS3新增背景半透明的写法，颜色值增加了一种rgba模式。
  • rgba模式：在rgb基础上增加了一个不透明度的设置，不透明度alpha取值范围在0-1之间，0表示完全透明，1表示完全不透明，0.5表示半透明
  • 书写方式：rgba（红色，绿色，蓝色，不透明度）
  • 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
div {
    background-color: rgba(0,255,0,0.4)
}

半透明其他应用

  • 同样，可以给文件和边框透明，都是rgba的格式来写
color: rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);

背景缩放background-size

  • 通过background-size设置背景图片的尺寸，在移动web开发中做屏幕适配非常广泛
    属性值 说明
    px值 1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值加载
    百分比 同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
    cover 自动调整缩放比例，把背景图像拓展到足够大，以使背景图完全覆盖背景区域，溢出部分会自动被隐藏
    contain 自动调整缩放比例，把图像拓展到最大尺寸，保证图片始终完整的显示在背景区域

多背景

  • CSS中规定，一个盒子上，可以添加多个背景图片
  • background-image的属性值书写时，以逗号分隔多背景的URL路径地址
  • 注意：背景加载时，先写的背景压盖后写的背景图片
background-image: url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);

定位属性

  • 属性名：position
  • 属性值：
    1.relative 相对定位
    2.absolute 绝对定位
    3.fixed 固定定位
  • 作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移

偏移量属性

  • 定义的元素要想发生位置的移动，必须搭配偏移量属性进行设置
  • 水平方向：left，right
  • 垂直方向：top，bottom
  • 属性值：常用px为单位的数值，或者百分比

相对定位

  • 属性值：relative，相对的意思
  • 参考元素：标签加载的原始位置
  • 必须搭配偏移量属性才能发生位置移动
positon:relative;
left:100px;
top:100px;
对应的效果

相对定位的性质

  • 性质：相对定位的元素不脱离标签的原始状态（标准流，浮动），不会让出原来的占有的位置
  • 元素：显示效果上，原位留坑，形影分离

注意事项

1.偏移量属性的值是区分正负的
正数：表示偏移方向与属性名方向相反。
负数：表示偏移方向与属性名方向相同。

position: relative; left: ‐50px; top: ‐100px;

效果图

2.同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和right 属性，只会加载 left 属性。垂直方向只加载 top 属性。
建议：书写时从水平方向和垂直方向各挑一个属性进行组合。
3.由于相对定位的参考元素是自身，left 的正值等价于right的负值，top的正值等价于 bottom 的负值。
为了方便记忆，可以选择只使用 left、top 组合。
两者是等价的

实际应用

  1. 由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素
  2. 相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。

绝对定位

  • 属性值：absolute
  • 参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考<body>。
    必须要搭配偏移量属性才会发生位置移动 
position: absolute; left: 50px; top: 50px;
效果图

绝对定位的性质

  • 脱离了标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高，只能被内容撑开
    注意1：参考元素是不固定的，不同的参考元素以及不同的偏移量组合的参考点是不一样的

right bottom是右下角的参考点，right top是右上角的，同理，left bottom是左下，left top是左上

注意2：在绝对定位中，参考点有差距，所以left的正值≠right的负值

<body>为参考元素的参考点

以 <body> 为参考元素时，参考点的确定与偏移量方向有关。

  • 第一，如果有 top 参与的定位，参考点就是 <body> 页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
  • 第二，如果有 bottom 参与的绝对定位，参考点是 <body> 页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。
    首屏的意思是如果body的height很大，只是浏览器看到的那个页面
  • 实际应用中，如果以 <body> 为参考元素，不同分辨率的浏览器中，绝对定位的元 素位置是不同的，所以较少使用 <body> 作为参考元素。

祖先级为参考元素

  • 如果祖先级中有定位的元素，就不会去参考 <body> 。

  • 参考元素：参考的是祖先元素中有任意定位的，在 HTML 结构中距离目标最近的祖先。


    例子

    显而易见的图例

注意事项

根据绝对定位的参考元素的定位类型不同，有三种定位组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况。

祖先元素参考点

  • 如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding 区域。
  • left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角。
  • right、top：参考点是祖先的 border 以内的右上顶点，对比点是盒子自身的右上角。
  • left、bottom：参考点是祖先的 border 以内的左下顶点，对比点是盒子自身的左下角。
  • right、bottom：参考点是祖先的 border 以内的右下顶点，对比点是盒子自身的右下角
相对于自身的位移量，两点之间的距离

固定定位

  • 属性值：fixed
  • 参考元素：浏览器窗口。
  • 参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。
  • 由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置
.backtop {
      position: fixed;
      right: 100px;
      bottom: 100px;
      width: 100px;
      height: 50px;
      background-color: #ccc;
      font: 18px/50px "微软雅黑";
      text-align: center;
      color: #333;
      text-decoration: none;
    }

<a href="#" class="backtop">顶部</a>

效果图

无论滑动到那儿，链接：顶部 都不会变化位置，始终与浏览器的右下角点保持参考偏移

固定定位的性质

性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上

定位应用

压盖效果

所有的定位类型都可以实现压盖效果。 由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖。


居中

  • 定位的元素，如果想在参考元素中居中显示：
  • 第一步：在居中的方向使用一个偏移量属性，例如 left，设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。 百分比形式的属性值，百分百参考的是参考元素的 border 以内的宽度、高度。
  • 第二步：：给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值 为负的自身宽度的一半。
.demo2 {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        background-color: red;
        margin-left: -50px;
    }

<div class="demo2"></div>
效果图

拓展应用

1.解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中。
2.浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。

压盖顺序

默认压盖顺序

  • 如果都是定位的元素，在 HTML 中后写的定位压盖先写的定位

自定义压盖顺序

  • 如果想更改定位的元素的压盖顺序，可以设置一个 z-index 属性。
  • 属性值：数字。
注意事项

①属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。
②如果属性值相同，比较HTML书写顺序，后写的压盖先写的。
③z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
④父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分： 父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了 z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,271评论 5赞 466
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,725评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,252评论 0赞 328
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,634评论 1赞 270
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,549评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 47,985评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,471评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,128评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,257评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,233评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,235评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,940评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,528评论 3赞 302
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,623评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,858评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,245评论 2赞 344
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,790评论 2赞 339