CSS的重点基础知识

CSS的重点基础知识

背景

1.背景颜色

属性名：background-color

属性值：

1. rgb

2. rgba

3. 十六进制

4. 关键字

   注意点：为了不影响盒子大小，一般给盒子设置背景颜色

2.背景图片

属性名：background-image:url('');

括号里面的引号可以不写，但一般都推荐写

背景图片一般作为装饰作用，需要在放在div里面，但是它不能撑开盒子。

3.背景平铺

属性名：background-repeat

背景平铺就是把图片铺满整个盒子。那如何不让背景图片平铺或者让它按我们想要的方向平铺呢。

取值	效果
repeat	水平和垂直方向都平铺(默认效果)
no-repeat	不平铺
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

属性名：background-position

有许多方向上的位置表示方法，水平方向的left,right,center,垂直方向的top.bottom.center

还有像素px的的移动位置表示，负值向左，正值向右

以原点的表示方法，将图片位置比成一个坐标轴，表示方法为background-position(水平，垂直)

5.背景连写

​ background(color,images,repeat,position)

​ 一般情况下推荐连写，这样浏览器能更高效处理

6.背景透明

​ 1. opacity

​ 盒子连同背景和内容都变成透明了

​ 2. background-color: rgba(值)

​ rgba代码 背景会透明而文字不会透明

3. background-color: transparent

   透明色

​ 默认的代码transparent

​ 设置Div的背景颜色等于父元素的背景颜色

元素的显示方式及转换模式

1.块级元素

特点：

1. 通常是独占一行，非常的霸道
2. 可以设置宽高

通常的标签的div ， p ，h，ul，li，dl，dt，dd，form

2.行内元素

特点：

1. 一行可以显示多个，非常的宽容
2. 不可以设置宽高

通常的标签span ， a 、b、u、i、s、strong、ins、em、del

3.行内块元素

特点：

1. 一行可以显示多个，非常的宽容

2. 可以设置宽高

   非常的不同，能够拥有块级元素和行内元素的特点

通常的标签 • input、textarea、button、select……

• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

4.元素的转换模式

在编写代码过程中，我们就经常会遇到需要转换元素的显示模式来满足我们的需求。

1.1.转换块级元素

display:block

转换情况：一般是为了能让行内元素可以设置宽高

1.2.转换行内块元素

display:inline-block

​ 转换情况：一般是为了能让元素既可以设置宽高又可以在一行显示

注意点：块级元素转换为行内块元素时，会因为换行产生空白占位符

1. 这种情况下我们可以设置块级元素父容器的字体大小为font-size:0;来解决这个问题

   <div style="height:5mm;font-size:0">
   <span id="year" style="display: inline-block;width:10mm;line-height:5mm;font-size:10.5pt">2018</span>
   <span id="month" style="display: inline-block;width:8mm;line-height:5mm;font-size:10.5pt">10</span>
   <span id="day" style="display: inline-block;width:8mm;line-height:5mm;font-size:10.5pt">18</span>
   </div>
   

2. 浮动html块级元素

   <div style="height:5mm">
   <span id="year" style="float:left;display: inline-block;width:10mm;line-height:5mm">2018</span>
   <span id="month" style="float:left;display: inline-block;width:8mm;line-height:5mm">10</span>
   <span id="day" style="float:left;display: inline-block;width:8mm;line-height:5mm">18</span>
   </div>
   

1.3.转换行内元素

display:inline

一般很少使用.

盒子模型

​ 盒子模型 内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是 盒子模型 。

1.内容区域

​ 盒子内容的区域大小由height和width属性默认设置

2.边框区域

​ 给边框设置样式

​

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid 虚线dashed 点线dotted
边框颜色	border-color	颜色取值

3.内边距

属性名：padding

定义：边框与内容区域之间的距离

取值连写规则： 上右下左

如果是单个方向设置内边距就 padding-方位名词：数字+px

注意点：padding可以内挤，使内容挤到合适的位置。

​ 需要加 box-sizing: border-box这样不会使盒子撑大。

​

4.盒子大小

​ 盒子大小的计算公式：

​ 盒子宽度：左边框+左padding+内容宽度+右padding+右边框

​ 盒子高度：上边框+上padding+内容宽度+下padding+下边框

注意点：

1.当盒子被border和padding撑大之后，需要自己计算然后手动在内容中减去（手动内减）

2.但是我们一般会在公共样式里定义 box-sizing：border-box；会自动帮我们调节盒子内容大小而不会被撑大

5.外边距

属性名：margin

定义：盒子与盒子之间的距离

取值连写规则： 上右下左

如果是单个方向设置内边距就 margin-方位名词：数字+px

6.扩展

1.清除默认的内外边距

1) body 标签: 自带 margin: 8px; 的属性
(2) p 标签: 默认带有 margin: font-size 的值
(3) h 标签: 也默认带有 margin-top 和 margin-bottom
(4) ul标签: ul 标签默认带有上下的 margin, 和 padding-left
...

方法（清除页面中标签的默认padding和margin）：

* { 
	padding: 0;
	margin: 0; 
}

也可以清除想要清除的标签，*是全局标签清除默认内外边距

2.外边距合并

​ 当两个外边距相邻时，它们会合并为较大的那一个。

​ 无论是相邻元素的上下边距，还是父子元素的上 边距，甚至是同一元素的上下边距。

​

1. 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），

   它们的上和/或下外边距也会发生合并。

​

​

​ 2. 当两个元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

3. 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距

   就碰到了一起，它们会发生合并。

​

​ 要如何解决外边距合并的问题

​ 1. 为父元素定义1像素的上边框。

　　2. 为父元素添加内边距。

　　3. 为父元素添加overflow:hidden; （推荐）

　　注意，第一种和第二种方法都不好，会撑大盒子的体积。第三种方法将溢出内容隐藏，既不增大盒子体积，也不影响内容。

3.外边距塌陷**

​ 嵌套的父子盒子，子盒子需要向下移动，然后添加margin外边距，但是移动的却是父盒子，这就是外边距塌陷。

     ​ *** 图1想要让绿色的son向下移动，添加了margin-top：30px.

***结果是图2的父盒子整体向下移动了margin-top：30px.，出现了塌陷问题。

​ 解决外边距塌陷问题：

​ ①给父元素定义上边框

​ ②给父元素定义上内边距

​ ③给父元素添加 overflow：hidden；

​ ④添加浮动

⑤添加绝对定位

浮动

1.浮动的作用

浮动早期是为了图文环绕，到现在的网页布局为主

可以让原本垂直布局的 块级元素变成水平布局

2.浮动的属性

​

左浮动
float:left;
右浮动
float:right;

3.浮动的特点

1. 浮动元素会脱离标准流

2. 浮动元素比标准流高半个级别，可以覆盖标准流的元素

3. 浮动找浮动，下一个浮动会寻找上一个浮动的位置，跟在它的屁股后面

4. 浮动元素可以一行显示同时可以设置宽高，说明浮动后的元素具备了行内块的属性，我们也可用浮动来转换元素的显示方式

   注意点：浮动元素不能用text-align:center和margin: 0 auto来居中

4.清除浮动

为什么要清除浮动呢？因为有时候我们并不方便给父盒子添加高度，子元素浮动的时候就会脱离标准流，而父盒子因为没有高度变成一条线而会无法约束到子元素，而后面的元素的就会受到影响顶上来。子元素就会覆盖在后面的元素上面。怎么清除浮动，有以下方法：

1. 直接给父盒子设置高度

   但是在不需要给父盒子设置高度的情况下并不适用

2. 额外标签法

   (1).在父元素内容的最后添加一个块级元素

   (2).再给块级元素添加clear:both;

      <style>
           .father {
              width: 400px;
              background-color: pink;
           }
   
           .son1 {
               height: 100px;
               width: 100px;
               background-color: red;
               float: left;
           }
   
           .son2 {
               height: 100px;
               width: 100px;
               background-color: blue;
               float: left;
           }
           .clear {
               clear: both;
           }
       </style>
   </head>
   <body>
       <div class="father">
           <div class="son1"></div>
           <div class="son2"></div>
           <div class="clear"></div>
       </div>
   </body>
   

3.单伪元素清除法(常用)

​ 用伪元素代替标签,在父元素中添加类名即可

.clearfix::after {
   content:'';
   display:block;
   clear:both;
   
   height:0;
   visibility:hidden;
}

 <style>
        .father {
           width: 400px;
           background-color: pink;
        }

        .son1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }

        .son2 {
            height: 100px;
            width: 100px;
            background-color: blue;
            float: left;
        }

        .clearfix::after {
          content:'';
          display:block;
          clear:both;
        /* 补充代码，为了网页中看不到伪元素*/
          height:0;
          visibility:hidden;
}
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

4.双伪元素清除法(常用)

.clear::before,
.clearfix::after {
   content:'';
   display:table;
  }
   
  .clear::after{
  clear:both;
}

    <style>
        .father {
           width: 400px;
           background-color: pink;
        }

        .son1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }

        .son2 {
            height: 100px;
            width: 100px;
            background-color: blue;
            float: left;
        }

        .clear::before,
        .clearfix::after {
            content:'';
            display:table;
        }
   
        .clear::after{
            clear:both;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

5.直接给父元素添加overflow:hidden;

<style>
        .father {
           width: 400px;
           background-color: pink;
           overflow: hidden;
        }

        .son1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }

        .son2 {
            height: 100px;
            width: 100px;
            background-color: blue;
            float: left;
        }

    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>

定位

定位的应用场景：

1. 盒子与盒子之间的层叠问题

​    定位之后的元素层叠更高，可以层叠在其他盒子上面。通常用在一些图片上面的图标的定位

​ 2.可以让盒子固定在屏幕中的某个位置

1.静态定位

​ 属性：position：static; (默认值)

注意点：

.静态定位就是之前的标准流，不能进行方位上的移动。

2.相对定位

​ 属性：position:relative;

​ 定义：相对于自己原来的位置进行移动

​ 特点：

1. 需要配合方位名词进行移动

2. 相对于自已原来的位置移动

3. 原来的位置依旧占有 (也就是没有脱离标准流)

   ​

   这是没有进行相对定位前的样子

    <style>
   
           .son1 {
               height: 100px;
               width: 100px;
               background-color: red;
           }
   
           .son2 {
               height: 100px;
               width: 100px;
               background-color: blue;
           }
   
       </style>
   </head>
   <body>
           <div class="son1"></div>
           <div class="son2"></div>
   </body>
   

   

这是进行相对定位后的样子

 <style>

        .son1 {
            position: relative;
            left: 120px;
            top: 50px;
            height: 100px;
            width: 100px;
            background-color: red;
        }

        .son2 {
          
            height: 100px;
            width: 100px;
            background-color: blue;
        }

    </style>
</head>
<body>
        <div class="son1"></div>
        <div class="son2"></div>
</body>

可以看到，我们给红色盒子定位，距离左100px,距离上50px，红色盒子移动了，而它原有的位置仍然占有浏览器位置。这就是相对定位。

应用场景：

相对定位一般是配合绝对定位来用或者进行小范围移动来用

3.绝对定位

属性：position:absolute;

定义：相对于非静态定位的父元素进行定位

特点：

1. 需要配合方位属性进行移动

2. 不占原来的位置(脱离标准流)

3. 优先寻找父元素是否有定位，如果父元素没有定位就寻找祖父元素；

   如果祖父元素都没有定位，那就相对浏览器进行移动

   应用场景：

   子绝父相

   这是还没有进行绝对定位的样子

   ​

     <style>
           .father {
               height: 200px;
               width:200px;
               background-color: rgb(80, 46, 112);
           }
           .son1 {
               height: 100px;
               width: 100px;
               background-color: red;
           }
   
           .son2 {
               height: 100px;
               width: 100px;
               background-color: blue;
           }
   
       </style>
   </head>
   <body>
          <div class="father">
              <div class="son1"></div>
              <div class="son2"></div>
          </div>        
   </body>
   

​ 这是进行绝对定位后的样子，需要父元素绝对定位配合,可以看到绝对定位后的元素不占原来的位置，并且脱离标准流覆盖在标准流元素下面

<style>
        .father {
            position: relative;
            height: 200px;
            width:200px;
            background-color: rgb(80, 46, 112);
        }
        .son1 {
            position: absolute;
            top: 50px;
            left: 50px;
            height: 100px;
            width: 100px;
            background-color: red;
        }

        .son2 {
            height: 100px;
            width: 100px;
            background-color: blue;
        }

    </style>
</head>
<body>
       <div class="father">
           <div class="son1"></div>
           <div class="son2"></div>
       </div>      
       
</body>

附加点

​ 1.使用子绝父相来让盒子水平居中

​ 首先要让父元素相对定位且子元素绝对定位，然后先让盒子往右走一半就是left:50%,然后再让子元素的盒子往左走自己的一半！但是我们发现如果盒子的大小每次要改变时我们都要手动改变子元素盒子移动父盒子的一半，很麻烦，所以我们使用 transform：translateX(-50%) , 表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码 .

    <style>
        .father {
            position: relative;
            height: 200px;
            width:200px;
            background-color: rgb(80, 46, 112);
        }
        .son1 {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            height: 100px;
            width: 100px;
            background-color: red;
        }


    </style>
</head>
<body>
       <div class="father">
           <div class="son1"></div>
       </div>      
       
</body>

2.使用子绝父相来让盒子垂直水平居中

​ 根据刚刚的方法，先让盒子往右移动大盒子的一半，在往下移动盒子一半，再用 transform: translate(-50%,-50%);自动移动自己盒子的一半。

 <style>
        .father {
            position: relative;
            height: 200px;
            width:200px;
            background-color: rgb(80, 46, 112);
        }
        .son1 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            height: 100px;
            width: 100px;
            background-color: red;
        }

    </style>
</head>
<body>
       <div class="father">
           <div class="son1"></div>
       </div>      
       
</body>

4.固定定位

定义：只相对浏览器进行定位移动

属性：position:fiexd

特点：

1. 需要配合方位名词进行移动
2. 只相对浏览器进行移动
3. 在页面中不占位置(已经脱标)

比如我写了一个盒子，让它固定定位在浏览器顶部，并且我滚动滚动条时盒子位置不动，且能覆盖内容

 <style>
        .big {
           position: fixed;
           top:0;
           height: 50px; 
           width: 100%;
           background-color: rgb(71, 71, 54);
        }
    </style>
</head>
<body>
    <div class="big"></div>
    <div>道不尽人间相思几两风</div>
    <div>道不尽人间相思几
        7两风</div>
    <div>道不尽人间相思几两风</div>
    <div>道不尽人间相思几两风</div>
    <div>道不尽人间相思几两风</div>
    ............
</body>