美文网首页
css常见知识点

css常见知识点

作者: 幽幽_默默 | 来源:发表于2020-04-09 12:52 被阅读0次

1.display:inline-block

简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

2.position的值

static(默认):按照正常文档流进行排列;

relative(相对定位):不脱离文档流,参考自身静态位置通过 top, bottom, left, right 定位;

absolute(绝对定位):参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位;

fixed(固定定位):所固定的参照对像是可视窗口。

3、CSS3有哪些新特性?

RGBA和透明度

background-image background-origin(content-box/padding-box/border-box) background-size background-repeat

word-wrap(对长的不可分割单词换行)word-wrap:break-word

文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)

font-face属性:定义自己的字体

圆角(边框半径):border-radius 属性用于创建圆角

边框图片:border-image: url(border.png) 30 30 round

盒阴影:box-shadow: 10px 10px 5px #888888

媒体查询:定义多套css,当浏览器的尺寸变化时会采用不同的属性

4、请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?

弹性布局适合于移动前端开发

5、用纯CSS创建一个三角形的原理是什么?

首先,需要把元素的宽度、高度设为0。然后设置边框样式。

6、为什么要初始化CSS样式

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

7、absolute的containing block计算方式跟正常流有什么不同?

 containing block: https://www.cnblogs.com/adventureofraindrop/p/6130632.html

8.bfc

https://www.cnblogs.com/miluluyo/p/11159269.html

http://47.98.159.95/my_blog/css/008.html

9、为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题:

父元素的高度无法被撑开,影响与父元素同级的元素

与浮动元素同级的非浮动元素(内联元素)会跟随其后

若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。

清除浮动的方式:

父级div定义height

最后一个浮动元素后加空div标签 并添加样式clear:both。

包含浮动元素的父标签添加样式overflow为hidden或auto。

父级div定义zoom

10、在网页中的应该使用奇数还是偶数的字体?为什么呢?

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。

11、怎么让Chrome支持小于12px 的文字?

1p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

相关文章

  • 前端基础知识点

    1.html常见知识点 2.css常见知识点 3.js常见知识点 数组知识点 4.计算机网络知识点 5.数据结构 ...

  • 前端知识点之谈一谈css盒模型、BFC

    知识点:--css 盒模型--标准模型和 IE 模型--BFC 谈一谈 css 盒模型、BFC 是面试中常见的问题...

  • css常见知识点

    1.display:inline-block 简单来说就是将对象呈现为inline对象,但是对象的内容作为bloc...

  • CSS常见知识点回顾

    本文章不涉及太基础的知识点,主要用来记忆常用的知识点 1.CSS常用单位 em 1em=默认字体大小的倍数(比如默...

  • CSS面试常见知识点

    原文在我最近刚弄的个人博客:http://hellopan.top intro 因为篇幅问题,把CSS和HTML的...

  • CSS常见样式知识点

    1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别 块级元素:div , p , form, ul...

  • CSS 2020

    CSS三大知识点 盒子模型 浮动 定位 标签显示模式 块级元素 block-level 常见元素(div ) 宽...

  • CSS学习笔记四——水平垂直居中/文字图片对齐/多列布局/圣杯布

    css布局考察的知识点比较综合,基本就是使用上了所有css的基础技巧,以下是一些比较常见的场景总结。 水平居中 方...

  • CSS布局

    CSS入门(3) CSS的常见布局 CSS常见布局使用display属性(文档流)+position属性(定位)+...

  • 17-进阶: 第一个JS作品

    本节知识点----- CSS知识点 如何写渐变颜色的样式?谷歌 css gradient generate ,之后...

网友评论

      本文标题:css常见知识点

      本文链接:https://www.haomeiwen.com/subject/nhxqmhtx.html