CSS总结

最新推荐文章于 2022-08-10 19:09:56 发布

VIP文章 ~进击的巨人~

最新推荐文章于 2022-08-10 19:09:56 发布

阅读量458

点赞数 1

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44849651/article/details/109559253

版权

CSS总结

CSS的盒子模型

1.盒模型 = content + padding + border + margin
2.盒子模型

IE盒模型（border-box）
width 和 height = content + padding + border
W3C标准化模型（content-box）
width 和 height = content
盒子模型可以通过box-sizing来改变，默认为content-box

3.在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型

CSS选择器

1.CSS选择器有以下几种：

id选择器
类选择器
标签选择器
后代选择器(h1 p)
相邻后代选择器或子选择器（ul>li）
兄弟选择器（li~a）
相邻兄弟选择器（li+a）
属性选择器（a[rel="external"]）
伪类选择器（a:hover, li:nth-child）
伪元素选择器（::before、::after）
通配符选择器(*)

2.选择器优先级：!important > 行内样式 > id选择器 > （伪）类选择器 > 特殊选择器
3.权重问题（权值相加时不产生进位）

第一等：内联样式，权值为1000
第二等：id选择器，权值为0100
第三等：类、伪类、属性选择器，权值为0010
第四等：标签选择器、伪元素选择器，权值为0001
第五等：通配符、子选择器、相邻选择器等，权值为0000
继承的样式没有权值
举例如下：

#demo a {
   color: red;} /*权重：0100 + 0001 = 0101*/
div#demo a {
   color: blue;} /*权重：0001 + 0100 + 0001 = 0102*/

选择器特殊性值的比较是从左向右排序的，也就是说以1开头的特殊性值比所有以0开头的特殊性值要大。
如果两个规则的特殊性值相等的时候，那么就会根据它们引入的顺序，后出现的规则的优先级最高（就近原则）。

CSS继承样式

1.下列的CSS样式可继承：

字体系列属性（font等）
文本系列属性
text-align、text-shadow、line-height、word-spacing、direction、color等
列表属性（list）、光标属性（cursor）、元素可见性（visibility）
2.注意：当一个属性不是继承属性时，可以使用inherit关键字指定一个属性应从父元素继承它的值，inherit关键字用于显式地指定继承性，可用于任何继承性/非继承性属性。

伪类和伪元素

1.伪类用于当已有元素处于某个状态时，为其添加对应的样式。例如:hover来描述鼠标经过时的样式。
2.伪元素用于创建一些不在文档树中的元素，并为其添加样式。例如::before和::after。伪元素可以作用于清除浮动的功能上。
3.CSS3新增的伪类选择器： :nth-child(n)系列、:nth-of-type(n)系列、:empty、:not(elem)、:disabled等

盒子居中问题

方法一：在指定宽度的情况下，使用margin：0 auto;

.container {
   
    margin: 0 auto;
}

方法二：在子盒子为行内元素或行内块元素的情况下，给父盒子加上text-align：center;

.container {
   
    width: 100px;
    height: 100px;
    background-color: red;
    text-align: center;
}
.box {
   
    width: 50px;
    height: 50px;
    background-color: bisque;
    display: inline-block;
}

方法三（水平垂直居中）：利用“子绝父相”的原理，给子元素的left、top、right和bottom属性设置为0，并为其加上margin：auto;的样式。

.container {
   
    width: 100px;
    height: 100px;
    background-color: red;
}
.box {
   
    width: 50px;
    height: 50px;
    background-color: bisque;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

方法四（水平垂直居中）：利用“子绝父相”的原理，给子元素设置各50%的left值和top值。当元素宽高已知时，可通过设置其margin-left和margin-top值各为负的其宽高的一半；当元素宽高未知时，可通过transform属性中的translate函数来完成。

.container {
   
    width: 100px;
    height: 100px;
    background-color: red;
}
.box {
   
    width: 50px;
    height: 50px;
    background-color: bisque;
    position: absolute;
    top: 50%;
    left: 50%;
    /* margin-top: -25px;
    margin-left: -25px; */
    transform: translate(-50%, -50%); /*常用 */
}

方法五（水平垂直居中）：在父元素上使用flex布局，并将父元素的just-content属性和align-items属性设置为center值。该方法可用于宽高未知的元素，但兼容性差

.container {
   
    width: 100px;
    height: 100px;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
   
    width: 50px;
    height: 50px;
    background-color: bisque;
}

position的定位原点

absolute：相对于值不为static的第一个父元素的padding-box进行定位（即原点是content左上角）
fixed（旧版本IE不支持）：相对于浏览器窗口进行定位
relative：相对于其元素本身所在正常位置进行定位
static:默认值。没有定位，元素出现在正常的流中,其会忽略top,bottom,left,right,z-index声明。
inherit：规定从父元素继承position属性的值。

弹性布局（flex）

1.flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。
2.一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。
3.对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

inline元素或inline-block元素之间空隙的产生原因和解决办法

产生原因
元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px
解决方法

方法一：

将前一个标签结束符和后一个标签开始符写在同一行或者将所有子元素写在同一行
缺点：可读性差，代码不美观

方法二：

为父元素中设置font-size: 0，在子元素上重置正确的font-size
缺点：需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。

方法三：

为行内元素添加样式float：left;
缺点：有些容器是不能设置浮动，如左右切换的焦点图等。另外可能会出现高度坍塌

方法四：

设置子元素margin值为负数
缺点：元素之间间距的大小与上下文字体大小相关；并且同一大小的字体，元素之间的间距在不同浏览器下是不一样的，如：font-size:16px时，Chrome下元素之间的间距为8px,而Firefox下元素之间的间距为4px。所以不同浏览器下margin-right的负值是不一样的，因此这个方法不通用

方法五：

为父元素添加样式letter-spacing:-8px消除其间距
缺点：这也设置了子元素内的字符间隔，因此需要将子元素内的字符间隔设为默认letter-spacing:normal。

方法六：

为父元素添加样式display: table;和word-spacing:-1em消除间距

上述方法中，方法五和方法六较为推荐

包含块

1.定义：元素（生成的）盒的位置和大小有时是根据一个特定矩形计算的，该矩形便称为包含块
2.规则：
（1）根元素（很多场景下可以看成是html元素）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。
（2）对于其他元素，如果该元素的position是relative或者static，则“包含块”由其最近的块容器祖先盒的content box
边界形成。
（3）如果元素position:fixed，则“包含块”是“初始包含块”。
（4）如果元素position:absolute，则“包含块”由最近的position不为static的祖先元素建立，具体方式如下：

如果该祖先元素是纯inline元素，则规则略复杂：
- 包含块就是环绕着为该元素生成的第一个和最后一个内联盒的padding box的边界框
- 如果该内联元素被跨行分割了，那么“包含块”是未定义的，也就是CSS2.1规范并没有明确定义，浏览器自行发挥。否则，“包含块”由该祖先的padding box边界形成。
如果没有符合条件的祖先元素，则“包含块”是“初始包含块”。

绝对定位元素与非绝对定位元素的百分比计算

1.绝对定位元素的宽高百分比是相对于临近的position不为static的祖先元素的padding box来计算的，即需要包含padding值。例如：

.container {
   
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}
.box{
   
    width: 50%;
    height: 50%;
    background-color: bisque;
    position: absolute;
}

上述代码中box容器的宽高是60px，即(100+10+10)/2=60px
2.非绝对定位元素的宽高百分比则是相对于父元素的content box来计算的，即不包含padding值。

base64编码

定义：base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的url属性。
优点：减少图片的http请求
缺点：
（1）编码后的大小会比原文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间；
（2）使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML或者CSS，这相比域直接缓存图片的效果要差很多
（3）兼容性的问题，ie8以前的浏览器不支持。

BFC(重中之重)

定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（即块级元素）参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
布局规则
- 内部的Box会在垂直方向，一个接一个地放置
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
触发规则
- 根元素即html元素
- float的值不是none。
- position的值不是static或者relative。
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible

应用

避免外边距合并（布局规则2）

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>防止margin重叠</title>
  </head>
  <style>
      *{
      
          margin: 0;
          padding: 0;
      }
      p {
      
          color: #f55;
          background: yellow;
          width: 200px;
          line-height: 100px;
          text-align:center;
          margin: 30px;
      }
      div{
      
          overflow: hidden; /* 触发一个新的BFC */
      }
  </style>
  <body>
      <p>123</p>
      <div>
          <p>456</p>
      </div>
  </body>
  </html>

两栏自适应布局（布局规则3 + 布局规则4）

.left {
     
  width: 100px;
  height: 100px;
  float: left;
  background-color: hotpink;
}
.right {

最低0.47元/天解锁文章

~进击的巨人~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS总结

CSS总结CSS的盒子模型CSS选择器CSS继承样式伪类和伪元素盒子居中问题position的定位原点弹性布局（flex）inline元素或inline-block元素之间空隙的产生原因和解决办法包含块绝对定位元素与非绝对定位元素的百分比计算base64编码BFC(重中之重)外边距合并问题清除浮动CSS选择器的解析使用偶数字体大小的理由不建议使用通配符初始化 css 样式的原因元素竖向的百分比设定如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）图片格式替换元素与匿名替换元素(content)m
复制链接

扫一扫