css复盘以及常见问题总结

已于 2022-09-25 11:41:25 修改
阅读量1.1k 收藏 6
点赞数 2
文章标签： css html
于 2020-02-09 18:48:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangaob/article/details/104224662
版权

我们可以将 CSS 选择器分为五类：

1.1 后代选择器和子代选择器的区别

  • 后代选择器：用于选择指定元素下的符合条件的所有后辈元素，而子元素选择器是选择指定元素下的第一代元素
  • 后代选择器是空格隔开，子选择器是" > "隔开的

eg

  • 基础代码：

//后代选择器
div p{
            color: red;
        }


//子选择器
div>p{
       color:blue;

}

浏览器显示样式（对比）：

解释：后代选择器是选择div下的所有后代p标签，而子选择器只会选中div下的第一代p标签，如图

1.2 并集选择器和交集选择器的区别

  • 并集选择器：顾名思义，用逗号隔开，常用作，将两个单标签一起来设置某种属性,可以是类也可以是id
  • 交集选择器：顾名思义，之间没有任何符号，常用作，将通过大范围来确定小范围

基础代码：

  • <h1 class="_q">我是标题</h1>
<p class="_r">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>

//并集
    ._q,._r{
            color: red;
        }
//交集
    p._r{
            color:blue;
        }

    1.3 兄弟选择器

  • +选择器：选择紧跟一元素的兄弟元素（+两侧的元素，同属一个父亲，右侧元素是左侧紧邻的兄弟元素，改变的是右侧元素的样式 ）
  • ~选择器：查找某个指定元素后面的所有兄弟节点（同一个父亲，无需相邻，只要在其后的兄弟就可）

eg

  • 基础代码：

//+选择器
 h1+p{
            color: red;
        }
//~选择器
 h1~p{
            color: yellow;
        }

浏览器显示样式（对比）：

1.4 序选择器(伪类选择器)

  1. 同级别的第几个=>  :first-child / :last-child / :nth-child(n) / :nth-last-child(n)/:only-child
  •         :first-child/ :last-child   (选中同级别的第一个/最后一个是xx，则)   :only-child(选中父元素只有一个子元素的元素)
  •         :nth-child（选中同级别的第n个）      :nth-last-child(选中同级别的倒数第n个)

     2.同类型的第几个=>   :first-of-type/  :last-of-type/ :nth-of-type(n)/ :nth-last-of-type(n)/ :only-of-type/ 

  • :first-of-type /:last-of-type (选中同级别中同类型的第一个/最后一个是xx，则)    :only-of-type(选中父元素子元素的类型只有一种的元素)
  • :nth-of-type(n)  /:nth-last-of-type(n)/ 同上

举例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>伪类选择器</title>
<style>
p:first-child{
  background: #ccc;
}
p:first-of-type{
   color: red;
}
</style>
</head>
<body>
  <div>
    <h3><em>My</em> <span>goal</span></h3>
    <p>Next stage</p>
    <ol>
      <li>Learn the front knowledge.</li>
      <li>Find a satisfactory internship.</li>
      <li>Find a <span>good job</span> when graduating.</li>
    </ol>
    <p>Come on!</p>
  </div>
</body>
</html>

   p:first-child    这里先找某个父元素的第一个子元素.(父元素从body开始)

如上段代码:没有符合的p

p:first-of-type  选择的p元素是其父元素的第一个p元素  先把所有p元素找出来,在找出第一个

且  分属不同的父元素，满足条件,都会被命  中

<div class="demo">
	<span>span1</span>
	<p>
		<span>span2</span>
		<span>span3</span>
	</p>
	<span>span4</span>
</div>

 .demo span:first-of-type { color: #f00; }

  结果span1和span2都会被命中，因为span1和span2分属不同的父元素，并且都是其父元素的首个span元素，所以都会被命  中。

3.奇/偶/nx+y(略)

二.css三大特性（继承性，层叠性，优先性）

  • 继承性=>子元素可以继承父元素的样式（text- ,font- ,line-这些元素开头的以及color都可以继承）

but  1` a标签的颜色不能继承，必须对a标签本身设置

       2` h标签的字体大小不能修改，同上

  • 层叠性=> 后面覆盖前面
  • 优先性=>  ！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

三.CSS一些属性

3.1 div和span区别（块级/行内区别）

块级/行内区别:

  • 行内元素常见的有：span,img,a,input,label,select,textarea,br
  • 块级元素常见的有：div,p,ul-li,nav     行内块级：button
  • 行内元素：从左往右排列，不占据一行；对其设置宽高及margin的上下距离无效
  • 块级元素：单独占据一行
  • 行内块级元素：不会自动换行，相比行内可以设置宽高，具有行内块级共同特性
  • 块级/行内可通过display来改变 inline/block

3.2 背景图片

  • background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 
    background-attachment:fixed
  • 背景图片固定 fixed
  • 背景图片拉伸 background-size:auto 100%
  • 自动等比例拉伸 background-size:cover  /100% 100%(全扭曲)

3.3边框属性（略）

3.4css盒子模型

1. content (内容)
2. padding (内填充/内边距) :调整内容和边框之间距离时使用这个属性  
3. border (边框)
4. margin (外边距) 相邻同辈元素之间的距离，多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)

关于盒子的描述：

一个div 盒子宽度=内容宽+左右内边距宽+左右边框宽

若仅仅设置宽高度的盒子，盒子的大小就是盒子的宽高。如果还设置了padding，则盒子会变大。因此设计一个宽高固定的盒子，在加padding和border时，重新计算盒子大小

box-sizing:border-box; => 盒子的宽高就是给定的，如果设置了padding和border，内容相应减少

margin折叠 =>只有在块级元素，取最大值做外边距

四.CSS布局定位

4.1浮动定位

  • ①浮动元素的脱标：脱离了标准文档流=>不在页面占位置；标签一旦设置浮动，就能并排，且无论块级行内都可设置宽高
  • ②浮动元素的排序规则：（1）相同位置上的浮动元素，先浮动的会在前面，后浮动的在后面

                                          （2）不同方向上，左浮动找左浮动，右浮动找右浮动

                                          （3）浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置确定

                                         （4）浮动+非浮动=>浮动的一行，非浮动的正常

                                         （5）非浮动+浮动：非浮动正常，浮动另起一行

                                         （6）非浮动+非浮：每个另起一行

eg1 基础代码

     

浏览器显示：

解释：由（4）浮动+非浮动=>浮动的一行，非浮动的正常（6）非浮动+非浮：每个另起一行，得上图

eg2

浏览器显示：

解释：由（5）非浮动+浮动：非浮动正常，浮动另起一行，得上图

  • ③浮动元素的互相贴靠：随着外部的盒子的宽高，会让内部浮动元素的位置发生变化。如下图

                   

  • ④浮动元素紧凑效果： 一个浮动元素没有设置width，那么会自动收缩为文字的宽度（和行内元素很像）

清除浮动：

在标准文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素浮动之后，子元素会完全脱离文档流，无法撑开父盒子，导致父盒子没有高度

   原因：子元素浮动，父元素一般不设置高度

基本代码：

  

浏览器显示如图：   可以看到下图的父元素高度为零

清除浮动方法： ①给父盒子设置高度

                         ②clear：both；  =>   左右两边不允许有浮动元素（給浮动元素后加一个div（空）元素，且不浮动）

                          好处：利用伪元素具有clear清除浮动的属性来解决 父标签塌陷的问题（父标签撑不起来的问题）

                         ③伪元素清除法

                         ④overflow：hidden；

清除浮动添加的代码：

  <div class="father1">
              <p>我是文字一</p>
              <p>我是文字一</p>
              <p>我是文字一</p>
              <p>我是文字一</p>
              <div class="hhh"></div>
          </div>
 <div class="father2">
              <p>我是文字四</p>
              <p>我是文字四</p>
              <p>我是文字四</p>
              <p>我是文字四</p>
              <p>我是文字五</p>
              <p>我是文字六</p>
          <div class="aaa"></div>
          </div>
        .hhh{
            clear: both;
        }
      .aaa{
        clear:both;
      }

浏览器显示

这里还有一个因素:

当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。 

希望class=hhh的div能够换行,而不是和浮动的p元素一行,可以通过清除浮动来实现

4.2 position定位

position: absolute / relative / fixed / static（默认）

  • position: relative相对定位

无论是否位移，相对位移的元素仍会在文档中占用初始的空间，位移可能遮挡其他元素。

相对定位的元素的参考对象是它自己

  • position: absolute 绝对定位

绝对定位相对的是最近的一个有定位的祖先元素的定位

         ①绝对定位会将元素拿出文件流，不会占用原有空间。

         ②绝对定位后会生成一个块，而不论它在正常流中生成任何框。

         ③绝对定位后，很难用他构建视图宽度和内容长度而变化的自适应或响应式布局

  • 子绝父相：父元素使用relative，子元素使用absolute，子元素就可以在父元素的范围内定位
  • position：fixed =>相对于浏览器窗口的定位，可用鼠标滑轮体现效果
  • 绝对定位的盒子居中（水平垂直居中）：

left：50%；top：50%； （父盒子的一半大小），同时 margin-left：自己width的负一半值，margin-top：-height/2

 .box {
            position: absolute;
            /* 1. left 走 50%  父容器宽度的一半 */
            left: 50%;
            /* 2. margin 负值 往左边走 自己盒子宽度的一半 */
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin: auto; */
        }

解释：由于盒子是有宽高的，在left：50%；top：50%；只能将一个点定位到水平垂直居中，所以要减去盒子宽高的各一半，通过margin来解决

  • z-index

注：①默认情况下定位流的元素会盖住标准流的元素，定位流后编写的元素会盖住前面编写的

           默认属性值为零，取值越大，越居上。取值相同，后来居上。不能加单位。

       ②只有相对定位，绝对定位，固定定位有此属性。标准流，浮动，静态定位均无。

       ③和浮动一样，元素添加了绝对定位和固定定位后，都会转为行内块模式。。

eg

   .father1{
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
        }
        .father2{
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: relative;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: #00A000;
            position: absolute;
            left: 350px;
            top: 300px;
        }
        .son2{
            width: 100px;
            height: 100px;
            background-color:sandybrown;
            position: absolute;
            left: 300px;
            top:50px;
        }

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

浏览器显示：

此时没有z-index，后面编写的会覆盖前面的

给son1加上一个

z-index:1;

浏览器显示：

四种z-index失效的原因：

①父标签position为relative     改为absolute

②问题标签无position属性（除static）

③问题标签含有浮动属性     去掉浮动即可

④IE6层级表现有时候不是看子标签的z-index有多高，而是看整个DOMtree 的第一个reative属性的父标签的层级（常见）

从父现象：如果两个元素的父元素都没有z-index，那么谁的z-index大谁就在上面。如果父元素设置了z-index，则比较父元素的z-index大小，子元素的z-index失效。打个比方：若两个兄弟元素a,b；a 的z-index=1，b的z-index=2。则b在a的上面，若a中有一个子元素c的z-index=999，则b也会在c的上面

eg

代码

  .father1{
            width: 300px;
            height: 300px;
            background-color: red;
            position: relative;
            z-index:1;
        }
        .father2{
            width: 300px;
            height: 300px;
            background-color: yellow;
            position: relative;
            z-index:2;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: #00A000;
            position: absolute;
            left: 350px;
            top: 300px;
           z-index:10000;
        }
        .son2{
            width: 100px;
            height: 100px;
            background-color:sandybrown;
            position: absolute;
            left: 300px;
            top:50px;
           z-index:1;
        }

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

浏览器显示：

解释：由于父元素设置了z-index，子元素的z-index就失效了。解决办法，去除父元素z-index或者将父元素的z-index提高

五.CSS过渡动画模块

5.1 伪类选择器

伪类选择器分为：

（一）静态/超链接伪类      a:link{ }   ,   a:visited{}    只能用于超链接

a标签伪类选择器

是什么？  专门用来修改a标签不同状态的样式

有哪些？ （修改）   a:link(从未被访问过的)/ a:visited(被访问过的)/a:active(鼠标长按下的)/a:hover(鼠标悬停在a标签的)    

注：a标签的伪类选择器可以一起出现，顺序遵守爱恨原则 love hate 

（二）动态伪类    :hover  ,     :active      ,          :focus  

             鼠标          悬停      点击（不松手）     获得焦点   

eg： input:focus{ }

         label:hover{ }

      table tr:hover{ }

eg

//原参数
div:{ 
     width:200px;
     height:50px;
     background-color:red;
}
//直接改变参数，无动画
div:hover{
     width:300px;
     background-color:blue;
}

5.2过渡模块 transition

transition-property:width,background-color;

过渡三要素：

①要有变化的属性

②告诉系统哪个属性需要过渡：（transition-property）

③过渡时长（transition-duration）

连写：  transition : width(过渡属性) 5s(过渡时长) linear(运动速度) 10s(延迟时间);

5.3  2D转换模块 transform

对元素进行旋转操作

（1）transform :rotate(45deg)  translate(100px,0px) scale(1.5，1);       用空格隔开

                            旋转               平移        水平垂直   缩放   水平垂直          rotateX绕X轴默认

eg

     

（2）透视属性（perspective:100px）  透视：近大远小

注：透视属性必须添加到需要呈现近大远小效果元素的父元素上面。

（3）形变中心点的取值三种样式：

                  transform-origin:具体像素（200px，0px）/ 百分比（50% 50%）/特殊关键字（center center）;

过渡+2D:

eg1：

div img{
        width:310px;
        height:438px;
        transform-origin:center center;
        transition:transform 2s;
       }
 
div:hover img{
         
    transform:rotate(90deg);
}

 eg2:

ul li:nth-child(1){
     //一开始的状态
     transform:rotate(30deg);
}

ul li:hover{
   //需要执行的过渡效果
  transform:rotate(0deg) scale(1.5);
}

5.4 盒子阴影和文字阴影

如何给盒子添加阴影？

box-shadow: 5px(水平偏移)  5px(垂直偏移) 10px(模糊度/模糊距离) 10px(阴影扩展)  black(阴影颜色)  inset(内外阴影/默认外阴影增加内阴影)

如何给文字添加阴影？

text-shadow：颜色 水平偏移 垂直偏移 模糊值；

浏览器显示：

过渡模块和动画模块的区别：

                                  过渡模块需要人为的去触发这个反应，而动画模块不需要。

5.5、动画模块 animation

div{
            width: 300px;
            height: 300px;
            background-color: red;
 //  动画  名称 时长 运动速度 延迟时间 执行次数（infinite无限的） 往返动画（alternative往返的）
            animation: za 3s  linear 2s 3 alternate;
            margin: 100px auto;
        }
        @keyframes za {                    或者   @keyframes za{
            0%{
                transform: rotate(10deg);             from{   margin-left:0;}
            }
                                                      to{ magin-left:500px;)
            50%{
                transform: rotate(180deg);            }
            }
            100%{                              
                transform: rotate(230deg);
            }

        }

注：两种书写方式只举例  ，但不等同

5.6  3D转换模块

给其父亲加一个transform-style: preserve-3d;

结束了啊

《精通CSS》复盘
夏日山间过
06-19 187
为元素命名 //不好的命名方式 red leftColumn topNav firstPara //好的命名 error secondaryContent mainNav intro 总结：采用完全小写的类名和ID,多个单词之间用连字符分隔。如 andy-budd 总结：有意义的类名的优点是可以在整个网站中重用它们，在分配ID和类名时，一定要保持名称与表现方式无关。要使用有意义的命名。 ID还...
2021年秋招前端复盘
shixue7758的博客
03-01 680
文章目录1、实现元素的居中2、flex布局以及属性3、ES6新特性4、数组循环方式有哪些？map和filter的区别5、js异步有哪些方式？promise和async/await的区别6、vue的生命周期 哪些拿到dom 哪些拿到data7、学习前端多久了？怎么学的前端？8、css3新特性有哪些？动画怎么实现的 1、实现元素的居中 2、flex布局以及属性 3、ES6新特性 4、数组循环方式有哪些？map和filter的区别 5、js异步有哪些方式？promise和async/await的区别 6、vue的
css知识复盘
汇而不置的博客
04-30 776
盒模型 盒模型就是width、 height、padding 、border、margin外边距这几个属性。 标准盒子模型 width: 内容的宽度 height:内容的高度。 padding：内边距 border: 边框 margin: 外边距(盒子与盒子之间的距离) IE盒子模型 padding(内边距) padding: 内容和边框内侧之间的距离 。padding顺序...
CSS基础（后代选择器、子代选择器、兄弟选择器、属性选择器、伪类选择器、伪元素选择器）
最新发布
聂可以的博客
02-19 1168
CSS基础（后代选择器、子代选择器、兄弟选择器、属性选择器、伪类选择器、伪元素选择器）
复盘-----CSS（cascading style sheets）1
weixin_70027586的博客
12-04 184
复盘-----CSS---1
回炉重造，css常规布局系统整理——实战开发后复盘小结
weixin_43207103的博客
07-19 603
回炉重造，css常规布局系统整理——实战开发后复盘小结 写在前面： ​ 在了解css布局之前，我们先了解两个小概念，我认为这将对你有所帮助！ ​ 块级元素：display:bloak；占据一行，下一个元素自动换行，如div等； ​ 行内元素：display:inline；元素没有高宽，根据元素内的内容改变大小，如span、a标签等； ​ 行内块：display:inline-bloak；使行内元素具有块级元素特性、使块级元素具有行内元素特性； 1 基础css布局 1.1 position定位 ​ pos
CSS自学复盘
m0_58801665的博客
10-22 208
css自学
5.14面试复盘
qq_41537989的博客
05-15 5319
5.14面试复盘 5.14上午前端开发面试 笔试题 1.写出一种你最熟悉的排序算法 2.从ES6以下特性中挑选出一个来谈谈 3.用flex布局实现左右（宽度确定100px）三栏水平居中 4.如何实现图片…（瀑布流） 5.说说vue/react/angular解决了什么问题，为什么要用此框架 6.说说http中的post和get方法的区别 7.如何解决跨域问题？以及实现原理（jsonp、CORS） 8.说说原型链是什么？以及如何实现OOP操作（不使用任何class类继承） 面试题 1.说一下Promise 2
Web布局教程：CSS课程笔记与代码详解
总结来说，本课程的目的是通过博客形式整理和分享CSS相关的Web布局课程知识。学习者可以通过这个博客了解Web布局的关键技术，掌握CSS的应用，并通过源代码分析提升编码技能。同时，对于任何对IT教育感兴趣的个人，本...
详解white-space，以及解决微信小程序中文字溢出与省略号显示问题
m0_73856514的博客
01-21 1700
单行文本溢出显示省略号： white-space: nowrap; /* 先强制一行内显示文本 */ overflow: hidden; /* 超出的部分隐藏 */ text-overflow: ellipsis; /* 超出的部分使用省略号代替 */
【UiBot中级技能提升】：掌握10大常见问题的终极解决方案
[【UiBot中级技能提升】：掌握10大常见问题的终极解决方案](https://img-blog.csdnimg.cn/0623d57f837c484a9ec82c73ad0dc1b4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1...
子代选择器与后代选择器的区别
weixin_29947843的博客
05-03 3960
使用后代选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代与子代选择器的区别</title> <!--<link rel="stylesheet" type="text/css" href="*.css"/>--> <script language="javascript"
后代选择器与子选择器的区别
当路danglu0010
05-13 1598
后代选择器与子选择器的区别
CSS基础（2）
weixin_56498069的博客
02-28 5271
css基础：复合选择器、css元素显示模式、css背景相关知识等
子代选择器
JunGuanDreams的博客
04-24 1164
1，作用：选中指定元素中，符合要求的子元素（儿子元素），先写父，再写子。2，语法：选择器1>选择器2>选择器n{}，选择器中间用>号分隔。（2）子，孙子，重孙子，统称为后代，子就是之儿子。（1）子代选择器，最终选择的是子代，不是父级。
CSS基础（二）
m0_73378139的博客
08-14 1769
两种选择器的关系：复合选择器是对基础选择器的组合。等。
CSS的选择器(标签、类、id、通配符、后代、子元素、并集、链接伪类、focus伪类)
Bulut0907
01-23 5718
目录1. 标签选择器2. class类选择器3. id选择器4. 通配符选择器 1. 标签选择器 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> p { font-family: 宋体, sans-serif,
html&CSS-----CSS选择器（下）
m0_73633088的博客
06-03 1588
详细讲解CSS选择器中的高级选择器，包括并集选择器，交集选择器，兄弟选择器还有伪类选择器，快进来看看吧，我们一起来学习！！！
CSS选择器
weixin_43073401的博客
11-19 3018
例如E:first-child,找的是E元素，E元素必须是他的父元素的第一位元素。​ [attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。后代选择器包含的是其后代的所有元素,所以子元素，子元素的子元素，子元素的…（1）伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树以外的元素。（3）:hover当鼠标悬浮在元素上方时，向元素添加样式（链接或任意元素）（4）:active向被激活的元素添加样式（链接或任意元素）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值