CSS真是太博大精深了

时间:2020-9-4 作者:admin

其实CSS十分强大,可以做出很多酷炫的效果,能够灵活地使用它也是一门技巧,好吧,奈何我是小菜鸡,这里只是记录我学习过程中的一些基础东西,干巴爹!~

1. 两种盒模型

  • W3C标准盒子模型:宽度 = 内容的宽度(content),padding、border、margin都不算在里面。

    CSS真是太博大精深了

  • IE盒子模型:宽度 = 内容宽度(content + padding + border)

    CSS真是太博大精深了

补充:

  • Margin(外边距) – 清除边框外的区域,外边距是透明的。
  • Border(边框) – 围绕在内边距和内容外的边框。
  • Padding(内边距) – 清除内容周围的区域,内边距是透明的。
  • Content(内容) – 盒子的内容,显示文本和图像。

2. box-sizing属性

它是用来控制元素的盒子模型的解析模式,默认为content-box(W3C盒子模型)。

  • box-sizing: content-box,是W3C盒子模型。
  • box-sizing: border-box,是IE盒子模型。

3. CSS选择符有哪些?

  1. id选择器( #myid )
  2. 类选择器( .myclassname )
  3. 标签选择器( div, h1, p )
  4. 相邻选择器( h1 + p )
  5. 子选择器( ul > li )
  6. 后代选择器( li a )
  7. 通配符选择器( * )
  8. 属性选择器( a[rel = “external”] )
  9. 伪类选择器( a:hover, li:nth-child )

4. CSS的优先级

选择器按优先级先后排列:!important > 内联 > id > class = 属性 = 伪类 > 标签 = 伪元素 > 通配符(*)

  1. !important声明: 1, 0, 0 ,0
  2. id选择器: 0, 1, 0, 0
  3. 类选择器:0, 0, 1, 0
  4. 属性选择器: 0, 0, 1, 0
  5. 伪类选择器: 0, 0, 1, 0
  6. 标签选择器: 0, 0, 0, 1
  7. 伪元素选择器: 0, 0, 0, 1
  8. 通配符选择器: 0, 0, 0, 0

5. 为什么要初始化CSS?

  • 浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
  • 提高编码质量。如果不初始化整个页面,做完的东西是会很糟糕,重复的CSS样式很多。去掉标签的默认样式如:margin和padding,其他浏览器默认解析字体大小,字体设置。

6. 伪类和伪元素有什么区别?

  • 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号。
  • 伪类的操作对象是文档树中已有的元素。伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。

    CSS真是太博大精深了

  • 伪元素则创建了一个文档数外的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

    CSS真是太博大精深了

7. CSS样式导入的方式以及区别?

  • 链接样式:<link href="styles.css" rel="stylesheet" type="text/css" />
  • import方式: @import "index.css";

区别:

  • link除了能引用样式外,还可以引用图片等资源文件,import只可以引用样式文件。
  • 兼容性:link不存在兼容性问题,import在IE5以上支持。
  • 在样式表文件中,import可以引用其他样式表,而link不行。
  • link是与页面载入时同时加载,@import是在页面加载完后进行加载。
  • link支持js去控制样式更改,@import不支持。

8. 页面中隐藏一个元素的方法

  • display: none;
    特点:元素不可见,不占据空间,无法响应点击事件。
  • visibility: hidden;
    特点: 元素不可见,占据页面空间,无法响应点击事件。适用于那些元素隐藏后不希望页面布局发生变化的场景。
  • opacity: 0;
    特点:改变元素透明度,元素不可见,占据页面空间,可以响应点击事件。
  • width: 0; height: 0; overflow: hidden;
    特点: 元素不可见,不占据页面空间,无法响应点击事件。将元素的margin, border, padding, height和width等影响元素盒模型的属性设置成0,元素内有子元素或内容,还应设置overflow: hidden来隐藏其子元素。
  • position: absolute; top: -9999px; left: -9999px;
    特点: 通过将元素的 top 和 left 设置成足够大的负数,使它在屏幕上不可见。不占据空间,无法点击。

9. display: none 与 visibility: hidden 区别?

  • display: none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间,也就是说该元素不但被隐藏了,而且原本占用的空间也会从页面布局中消失。
  • visibility: hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,也就是说该元素虽然被隐藏了,但仍然会影响布局。

10. 文字截断,也就是超出打点…

white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis;
实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应该在定义两个样式:强制文本在一行内显示(white-space:nowrap)和溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示为省略号效果。

未完待续。。。

CSS真是太博大精深了

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。