CSS零碎知识点

1.浮动

浮动作用

​ 用于网页布局，让垂直布局改变为水平布局

​ 注意！！！当盒子已经浮动了就不能使用绝对定位，可以使用相对定位

浮动特点

1. 浮动会脱离标准流，在标准流中不占位置
2. 脱离后的浮动显示优先级比标准流高半个级别
3. 浮动找浮动，几个元素同时浮动，后浮动的元素会在先浮动的元素的身后浮动
4. 浮动受到元素边界的影响（div等块级元素独占一行）
5. 浮动有特殊的显示效果，可以设置宽高，一行可以有多个浮动
6. 浮动元素不能使用 text-align 和 margin:0 auto 来设置水平居中，但是浮动元素内容可以

浮动代码

#左浮动
.left {
	float:left;
}
#右浮动
.right{
    float:right;
}

清除浮动

目的：有时候子元素浮动了，便脱离了标准流，父元素不能再被子元素撑起来。

方法：

1. 给父元素设置高度 （缺点：有些板块不允许设置父元素的高度）

   .father {
         height: 400px;
         width: 400px;
         background-color: pink;
       }
   
   .son {
         float: left;
         width: 100px;
         height: 400px;
         background-color: blue;
       }
   

2. 额外标签法：在父元素最后添加一个块级元素并设置clear:both （缺点：增加了标签，让网页结构变得复杂）

    .father {
         width: 400px;
         background-color: pink;
       }
   
       .son {
         float: left;
         width: 100px;
         height: 400px;
         background-color: blue;
       }
   
       .clear {
         clear: both;
       }
   

3. 2的优化，单伪元素方法：在父元素的伪元素中添加clear:both

4. 双伪元素清除法：也可以解决margin塌陷 使用常规套路

5. 给父元素设置overflow:hidden

   
   
   
     
     
     
     
     
   
   
     
   "father">
       
   "son">
     
   
   
   

2.版心

版心作用

​ 用于约束网页的主体内容，无论什么显示尺寸都能将网页主体内容呈现在中间

代码

.container {
    width:1000px;
    margin:0 auto;
}

3.index页面骨架

"en"> 


    "UTF-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1.0">

"description" content="xxxxxx">

"keywords" content="xxxxxxx">

"shortcut icon" href="./xtx/favicon.ico" type="image/x-icon">

    

"stylesheet" href="./xtx/css/base.css">



    

4.选择器

后代选择器

用法：选择器1 选择器2 {CSS}

效果：选择器1中的后代（儿子、孙子…），满足选择器2的条件 都可以被选中

  
  
  
  


  
  
  
"father">
    
小姐姐
    

      
小帅哥
    
  
  
小可爱

Tips：小姐姐、小帅哥变红 ，小可爱不变

子代选择器

用法：选择器1 > 选择器2 {CSS}

效果：只选择选择器1中的子代，只能是儿子，符合选择器2的都被选中

  
  
  
  


  
"father">
    
小可爱
    

      
小姐姐
    
  
  
大可爱

Tips：小可爱变红

并集选择器

用法：选择器1，选择器2 {CSS}

效果：让多个选择器满足选中条件，同时修改多个元素。 选择器可以是基础选择器，也可以是复杂选择器，每行写一个选择器

  
  
  
  


  
我是div
  
我也是一个div
  
我是p标签
  
我也是p标签
  
"red">我是一个h1标签
  
我是一个h2标签

Tips：div 和 p 标签变红了

交集选择器

用法：选择器1选择器2 {CSS}，如果有标签选择器，必须写在前面

效果：选中同时符合选择器1、2的元素

  
  
  
  


  
"red">小姐姐
  
小帅哥
  
"red">小可爱

Tips：小可爱变红了

hover伪类选择器

用法：选择器::hover {CSS}

效果：当鼠标悬停在标签上时，显示伪类选择器中的CSS样式

  
  
  
  


  "#">我是一个a标签
  
"box">

结构伪类选择器

精准选择第几个元素

用法：

/*子元素为E*/
E:first-child {CSS} /*匹配父元素中第一个子元素*/
E:last-child {CSS}	/*匹配父元素中最后一个子元素*/
E:nth-child(n) {CSS}/*匹配父元素中第n个子元素*/
E:nth-last-child(n) {CSS}/*匹配父元素中倒数第n个子元素*/
/*
n为0,1,2,3,4......,9
奇数：2n-1,2n+1,odd
偶数：2n，even
前j个：-n+j
从第j个往后：n+j
*/

5.精灵图

作用：一张大图上集中了许多小图，向服务器发送数据时，不用多次发送小图片，只需要发送一次大图片就够了，减轻服务器负担

用法：

1. 先创造一个盒子，盒子大小尺寸为图片的大小
2. 量取小图片左上角的坐标(x,y)
3. 将坐标取反
4. 将图片放在盒子里

  
  
  
  


  
"one">
  
"two">

6.伪元素

作用：顾名思义，是伪元素，冒充标签效果，可在网页的非主体内容处添加伪元素

！！！默认是行内元素 不拥有宽高

用法:

父元素::before {CSS} 在父元素内容前面添加一个伪元素

父元素::after {CSS} 在父元素内容后面添加一个伪元素

必须加content才能生效

  
  
  
  


  
"father">
    我是father内部的内容
  

缺点：不容易调试，审查元素无法发现

7.字体文本样式

字体大小 font-size 40px

字体粗细 font-weight 1.normal bold 2.数字 100~900

字体样式 font-style normal italic

字体系列 font-family

字体颜色 color

列表 list-style

8.盒子

margin塌陷

margin水平不会塌陷，垂直会塌陷。两个盒子中margin距离大的那个变成了两盒之间的距离，距离小的则缩在了距离大的里面

两个margin-top叠在了一起

解决方法：清除浮动中的双伪元素清除法

盒子构成

content

padding

border

margin

自动内减

在修改内部尺寸的同时，保持盒子大小不变

box-sizing:border-box

背景图片

background-size:

9.定位

静态定位

相对定位

当盒子已经浮动了就不能使用绝对定位，可以使用相对定位

绝对定位

相对于距离父元素的位置定位

当盒子已经浮动了就不能使用绝对定位，可以使用相对定位

特殊：

子绝父相

父绝子绝

10.元素显示模式

块级元素

display:block

代表：div p h dl dt dd ul li header footer nav form

特点：

1. 一行只能有一个，独占一行显示
2. 可以设置宽和高
3. 默认高度被内容撑开，宽度与父元素宽度相同

行内元素

display:inline

代表：span a 伪元素

特点:

1. 不能设置宽和高
2. 高度和宽度都是被内容撑开的
3. 一行可以有多个

行内块元素

11.对齐格式

垂直对齐

vertical-align:middle

文本:

line-height:当前高度

水平居中对齐

文本：text-align

margin:0 auto

操作技巧

---

快速生成框架

!+Tab

预览

Alt+B

同时选择多个相同元素

Ctrl+D

元素同时粘贴到多行

滚轮中键按住滚动

ement语法