CSS1： 考察点

福玻斯
207 阅读8分钟

1. 盒模型

  1. 盒模型的5个属性
  • width / height：内容的宽度和高度，此 "宽高" 并不是真实占有宽高，真实占有宽高 = 内容 + padding*2 + border*2。
  • padding：内边距，padding 设置百分比是相对于父元素的宽度（和高度无关）。
  • margin：外边距，margin 设置百分比是相对于父元素的宽度。
  • border：边框， 1px solid red(前 2 个必须写，最后 1 个默认黑色)

  1. 标准盒/W3C盒模型 和 怪异盒/IE盒模型

    IE 盒模型的 width/height 除了包含内容的宽高，还包含了 border 和 padding。 可以通过box-sizing: content-box(标准盒) || border-box(IE盒) 来转换设置。

  2. 哪些是盒子

  • 盒子：div、span、a。
  • 非盒子：img、表单元素。
  1. 省略写法
padding: 10px 20px 30px 40px;  // 顺时针，上右下左
margin: 10px  20px;     // 上下 10px,左右20px
margin: 10px 20px 30px;   // 上 10px  左右 20px  下 30px
  1. 补充
  • background-color 会填充 content、padding、border，当border-color和background-color冲突时会优先显示border-color。

2. 三种引入样式的方式

1. 外部样式表，通过link链接
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
2. 内部样式表，通过<style></style>
<head>
<style type="text/css"> </style>
</head>
3. 内联（行内）样式：直接存在于元素的style属性中
<p style="color:red; margin:10px">Hello,world!</p>

3. 选择器

  1. 常见的选择器
1.标签选择器    h1 {}
2.类选择器      .name {}    class=""
3.id选择器      #name {}    id=""
4.属性选择器    a[href] {}  应用于含有该属性的元素上   
5.伪类选择器    :hover {}
6.伪元素选择器  ::before {}
7.通用选择器    * {}        匹配所有标签
8.分组选择器    h1, span, .str {}   给多个标签元素设置相同的样式

附加：
子选择器      .father>li {}   第一代子元素
后代选择器    .father li {}   后辈元素
  1. 伪类和伪元素

  • 伪类用来选择处于特定状态的元素，比如是某类型的兄弟元素的第一个元素:first-child、一组兄弟元素其类型的第一个:first-of-type、当鼠标指针悬浮在元素上面时:hover、鼠标指针点击某元素:active。

  • 伪元素开头为双冒号，它表现出来的效果是向html文档加入了新的html元素。

    • 可以和content属性搭配使用，使用::before, ::after将文本字符串插入到文档中。
    • 当想选中一段的第一行，可以用::first-line

  • 两者区别：

    • 表示；
    • 效果代替：伪类可以通过添加一个类选择器来达到，而伪元素需要添加一个html元素才能达到。

image.png

.box::after {
  content: " ➥"
}   
<p class="box">Content in the box in my HTML page.</p>
  1. CSS 中代码的执行/解析顺序
  • css 代码也是从上向下、从左到右执行的；
  • 按照优先级大小来应用样式；
  • 对于选择器相同或者优先级相等的样式，后定义的样式会把先定义的样式覆盖掉。

  1. 层叠优先级：声明

    优先级就是分给某个css声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。当优先级相同时，最后「声明」的会覆盖前面的。

  • 声明!important的样式，会覆盖任何其他的声明，如果都声明了!important，则拥有更大优先级的声明将会被采用。!important与优先级无关，它是一个例外规则，权重正无穷（但这里的正无穷是可以计算的，正无穷+1就大于正无穷）

  • 行内样式的优先级高于样式表的任何样式。权重1000

  • 选择器权重/优先级：自高到低，这里的数字表示256进制，0和1之间差了255。

    • id选择器：100。
    • 类选择器|伪类|属性：10（010）
    • 标签 | 伪元素：1（001）
    • 通配符：0 对优先级没有影响。
    • 继承样式：低于所有选择器，包括通配符。
    • 组合，累加值
      • li > ul：这种子选择器，权重为2（002）。
      • li.myClass：011
      • li[href="xx"]：011

  • 对于3种css样式的引入方式，内联样式是最高的，外部样式表和内部样式表则看选择器的权重，权重相同则最后声明的会覆盖前面的。

// style.css文件
.c1 {
  color: green;
}

<head>
    <style>
    .c1 {
      color: red;
    }
    </style> 
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
  <p class="c1">文字</p>
</body>
显示绿色，因为link离下面的元素更近。

3. css3 新特性

  1. 新增 E: first-of-type(属于其父元素的首个E元素的每个E元素)、E:nth-child(n)(属于其父元素的第n个子元素的每个E元素) 选择器。
  2. 新增3个和动画有关的特性：
    • transition：设置样式变换时的动画。
    • transform：对元素应用各种2D、3D转换，例如旋转、移动等操作。
    • animation：制作动画。
  3. 设置 box-sizing 来切换不同的盒模型。
  4. 对文字、边框、背景都增加了一些属性。

4. 动画

  1. transform（变换）：旋转、缩放、移动等。
  • 旋转 rotate
  • 缩放 scale
  • 位移 translate：translate(10px, -20px) 表示右移10px，上移20px。
  1. transition：样式变换时的过渡动画。
  • transition-duration：指定完成过渡所需时间。
  • transition-property：指定过渡或动态模拟的CSS属性。
  • transition-delay：动画多久才开始执行。
  1. animation：可以制作动画。
  • animation-name：调用@keyframes定义好的动画，名称一致。
  • animation-duration：设置CSS3动画播放时间。
  • animation-delay：动画延迟开始播放的时间。
  • animation-iteration-count：动画的播放次数。
  1. transition 和 animation的区别，animation 是 transition的扩展
  • transition 需要事件触发才能发生；animation 可以自动发生。
  • transition是一次性的，不能重复发生，除非再次触发；animation可以设置播放次数
  • transition只能定义开始状态和结束状态，不能定义中间状态；animation的@keyframes提供了更多时间轴的控制；
  • animation 会改变width、height等属性，对性能影响比较大，会引起页面的回流重绘。transition 使用时一般会结合 transform ，不会生成新的位图，就不会引起页面的重绘了。

5. 隐藏元素

  1. display：none
    • 真实的隐藏元素、会改变页面布局，效果类似删除元素。
    • 会触发重排。
    • 父元素应用后，其子孙元素也不可见。
  2. visibility: hidden
    • 不改变页面布局，仍占据空间。
    • 会触发重绘。
    • 父元素应用后，如果子元素设置为visible，那么子孙元素是可见的。
    • 不会响应任何用户交互。
  3. opacity: 0 （用于设置透明度）
    • 不改变页面布局
    • 如果该元素绑定了事件，那么会响应用户交互。

6. 常用长度单位

  1. px：像素，相对单位。
  2. em：相对单位，子元素字体的 1em 等于其父元素的 font-size 值，元素的 width/height/padding等属性用 em 的话是相对于元素本身的 font-size。
    • 浏览器的默认字体高都是 16px。
    • 会出现字体大小逐层复合的连锁反应。
      • 如果font-size:12px，那么 1em = 12px。
      • 如果font-size:2em，那么这里的em是以其父元素的font-size为基础的。
  3. rem：css3新增，不是相对单位，始终基于 根元素html的font-size，能够避免字体逐层复合的连锁反应。
  4. %百分比：相对单位。
  5. vw、vh、vmin、vmax：基于视图窗口的单位。
  • vw：1vw 等于视窗宽度的 1%。
  • vh：1vh 等于视窗高度的 1%。
  • vmin：选取vw、vh中最小的那个，手机竖屏时 1vmin=1vw。
  • vmax：...最大的那个。

7. 计算属性

作用于 width 等属性，用一个表达式作参数，有加减乘除四则运算，可以将不同单位混合在一起，运算符的两边均有空格。。width:calc(100% - 80px)。

  • 除法运算：第2个数字没有单位，也不能为0。

9. 元素的视图属性：offsetWidth、clientWidth

  • offsetWidth：width + border + padding。
  • clientWidth：width + padding。

10. background的image和color属性

1. image
·none
·url("");  //默认重复
.url(""); //可添加多幅
根据background-repeat的值，repeat-x|no-repeat
根据background-position的值，指定背景图像的位置 right top |
2. 简写
background: color | image | repeat | attachment | position

11. 行内块级元素的空隙问题

原理：行内块级元素被当成行内元素排版时，元素之间的空白符会被浏览器处理转成一个空白符，会占据一定的宽度。解决方法：为元素添加浮动 float。

12. display的属性

  • none：隐藏。
  • block：块级元素。
  • inline：行内元素。
  • inline-block：行内块级元素。

13. 雪碧图

是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。合并之后占的总字节变小了。

14. 面试题

overflow

单行文本超长时用省略号代替

三者必须搭配使用才能保证一定生效。

.text {
    overflow: hidden // 文字超长时隐藏超出内容
    text-overflow: ellipsis  // 文本溢出时会显示省略号（...）
    white-space: nowrap // 文本不会换行
}

overflow：元素溢出时的行为。

  • visible：默认值。溢出时不处理、会显示到元素框外部。
  • hidden：溢出时会隐藏。
  • scroll：不论是否溢出都会添加一个滚动条，用于查看其他内容。
  • auto：？？？

多行文本超长时用省略号代替

定位 + 伪元素。

.mulLineTruncate {
  position: relative;
  max-height: 40px;
  line-height: 20px;
  overflow: hidden;
  &::after {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 20px 0 10px;
  }
}

参考文章

  1. 盒子模型
  2. 雪碧图
  3. 样式权重
avatar
文章
阅读
粉丝