css
文章平均质量分 89
css相关
wflynn
研究代码中...将随缘更新
展开
-
background属性详解
background-position为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin 定义的位置图层的。如果设置一个值, 则该值作用在横坐标上, 纵坐标默认为 50%(即 center) ;如果设置两个值, 则第一个值作用于横坐标, 第二个值作用于纵坐标, 取值可以是方位关键字 left\top\center\right\bottom, 如 background-position: left center ; 也可以是百分比或长度, 百分比和长度可为设置为负值原创 2019-09-20 17:25:40 · 854 阅读 · 1 评论 -
css面试点总结一
css面试点-css盒子模型 css面试点-flex布局,css3弹性盒子模型 css面试点-BFC(块级格式化上下文)与常见布局方案 css面试点-css层叠上下文 css面试点-div居中方法(共8种) css面试点-清除浮动方法(9种方法) css面试点-css隐藏元素方法大全,visibility的collapse属性值详解 css面试点-元素选择符与关系选择符 css面试...原创 2019-12-03 08:55:14 · 109 阅读 · 0 评论 -
css面试点总结2
css面试点-@import与link的详解 css面试点-position属性 css面试点-CSS预处理器(Sass/Less/Postcss) css面试点-css3的filter详解原创 2019-12-03 08:56:09 · 87 阅读 · 0 评论 -
css面试点-CSS预处理器(Sass/Less/Postcss)
CSS预处理器的原理: 是将类 CSS 语言通过Webpack 编译转成浏览器可读的真正 CSS。在这层编译之上,便可以赋予 CSS 更多更强大的功能,常用功能:嵌套 变量 循环语句 条件语句 自动前缀 单位转换 mixin复用...原创 2019-12-02 20:12:20 · 668 阅读 · 0 评论 -
css面试点-css层叠上下文
什么是层叠上下文层叠上下文(stacking context),是HTML中一个三维的概念。在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的X轴,Y轴以及表示层叠的Z轴。一般情况下,元素在页面上沿X轴Y轴平铺,我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠,这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。 如果一个元素含有层叠上下文,(也就是说它是层叠...原创 2019-12-02 20:10:46 · 543 阅读 · 0 评论 -
css面试点-CSS选择器为什么是从右往左解析
假如有如下的一段HTML:<div id="div1"> <div class="a"> <div class="b"> ... </div> <div class="c"> <div class="d"> ...原创 2019-11-18 14:01:33 · 333 阅读 · 0 评论 -
css面试点-script标签写在body和head中的区别
javascript代码写在<head>里面:由于这时候网页主体(body)还未加载,所以这里适合放一些不是立即执行的自定义函数,立即执行的语句则很可能会出错(视浏览器而定)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit...原创 2019-11-18 11:10:57 · 1717 阅读 · 0 评论 -
css面试点-@import与link的详解
@import与link的区别1.从属关系区别@import是 CSS 提供的语法规则,只能加载CSS;link是XHTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。2.加载顺序区别加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。3.兼容性区别@import是 CSS2.1 才...原创 2019-10-23 12:58:52 · 195 阅读 · 0 评论 -
css面试点-position属性
position有四个属性值:relative、absolute、fixed、static。三个不常用的:inherit、initial、sticky、unset不设置Position的值,top,left,right,bottom,不起作用,但是设置了position:static也不会起作用。 通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。st...原创 2019-10-22 17:34:24 · 411 阅读 · 0 评论 -
css面试点-css隐藏元素方法大全,visibility的collapse属性值详解
display:none和visibility:hidden空间占据 (display:none不占据空间,visibility:hidden仍占据空间。) 回流与渲染 (display:none隐藏产生reflow和repaint(回流与重绘),而visibility:hidden没有这个影响前端性能的问题。) 株连性。display:none应用后子孙元素全不可见。但父元素应用visi...原创 2019-10-15 15:35:01 · 561 阅读 · 0 评论 -
css面试点-为什么要初始化css样式
浏览器差异:不同浏览器对有些标签的默认值是不同的,如果没对css初始化会出现浏览器之间的页面显示差异提高编码质量:如果不初始化,整个页面做完会很糟糕,重复的css样式很多。去掉标签的默认样式如:margin,padding,其他浏览器默认解析字体大小,字体设置。淘宝样式 样式初始化body, h1, h2, h3, h4, h5, h6, hr, p, blockqu...原创 2019-10-14 15:13:09 · 240 阅读 · 0 评论 -
css面试点-样式优先级详解
总结排序:!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性选择器的特殊性值(Specificity)表述为4个部分,用0,0,0,0表示最后比较特殊的一个标志!important(权重),它没有特殊性值,但它的优先级是最高的,为了方便记忆,可以认为它的权重表示1.0.0.0.0。 ...原创 2019-10-14 14:19:02 · 226 阅读 · 0 评论 -
css面试点-伪对象(伪元素)选择符
伪类与伪元素的区别:伪类和伪元素都是用来修饰不在文档树中的部分,区别在于,伪类:用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active)。伪元素:用于创建一些不在文档树中的元素,并为其添加样式(如:before/:after)。之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页...原创 2019-10-14 12:58:16 · 547 阅读 · 1 评论 -
css面试点-伪类选择符
伪类与伪元素的区别:伪类和伪元素都是用来修饰不在文档树中的部分区别在于:伪类:用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active)。伪元素:用于创建一些不在文档树中的元素,并为其添加样式(如:before/:after)。之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面...原创 2019-10-14 12:38:15 · 946 阅读 · 0 评论 -
css面试点-属性选择符
Selectors 选择符 CSS Version 版本 Description 简介 E[att] CSS2 选择具有att属性的E元素。 E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素。 E[att~="val"] CSS2 选择具有att属性且属性值为一用空格分隔...原创 2019-10-14 09:29:41 · 351 阅读 · 0 评论 -
css面试点-元素选择符与关系选择符
元素选择符:通配选择符:选定所有对象。如 *{color:#f00;}类型选择符:以文档语言对象类型作为选择符。如 p{font-size:13px;}ID选择符:以唯一标识符id属性等于subtitle的E对象作为选择符,如 #subtitle{font-size:20px;}注意,id选择符不能在同个元素上定义多个,比如id="a b"就是错误的写法。类选择符:以class属性...原创 2019-10-14 09:26:16 · 511 阅读 · 0 评论 -
css面试点-清除浮动方法(9种方法)
浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。为什么要清除浮动?清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题当父元素不给高度的时候,内部元素不浮动时会撑开,而浮动的时候,父元素变成一条线clear:both:在左右两侧均不允许浮动元素。本质就是闭合浮动, 就是让父盒子闭合出口和入口,不让子盒子出来clear:...原创 2019-09-22 18:39:51 · 424 阅读 · 0 评论 -
css面试点-css盒子模型
什么是css盒子模型盒子,封装周围的HTML元素,它包括:width、height、padding、border、margin。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。页面渲染时,dom 元素所采用的布局模型。可通过box-sizing进行设置width和height:内容的宽度、高度(不是盒子的宽度、高度)。盒子的内容,显示文本和图像。 padding:内边距。 ...原创 2019-09-22 18:56:48 · 405 阅读 · 0 评论 -
css面试点-css中可继承和不可继承的元素详解
继承:子元素继承父元素的属性一、无继承性的属性 1、display:规定元素应该生成的框的类型 2、文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shadow:文本阴影效果 white-space:空白符的处理 unicode...原创 2019-09-24 10:49:55 · 440 阅读 · 0 评论 -
css面试点-flex布局,css3弹性盒子模型
弹性盒子是CSS3的一种新布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器...原创 2019-09-29 13:56:21 · 374 阅读 · 0 评论 -
css面试点-BFC(块级格式化上下文)与常见布局方案
定位方案常见的定位方案,定位方案是控制元素的布局,有三种常见方案:普通流 (normal flow)在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (float...原创 2019-10-07 10:02:20 · 230 阅读 · 0 评论 -
css面试题大全(持续更新)
介绍一下css的盒子模型?css盒子模型详解 css 选择符有哪些? css3新增伪类有那些?元素选择符与关系选择符属性选择符伪类选择符,CSS3新增伪类伪对象(伪元素)选择符 css那些属性可以继承,哪些属性不可继承css中可继承和不可继承的元素详解 css样式优先级,以及权重计算css优先级详解 设置元素浮动后,该元素的display值是多少? 自动变成display:block ...原创 2019-10-07 18:15:16 · 115 阅读 · 0 评论 -
css面试点-css3的filter详解
filter:filter属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。Filter 函数注意:滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。Filter 描述 none 默认值,没有效果。 blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少...原创 2019-10-08 13:46:11 · 582 阅读 · 0 评论 -
div居中方法(共8种)
水平居中行级元素:为该行级元素的父元素设置text-align:center配合line-height样式<div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"> <span>行级元素</span>...原创 2019-09-22 18:08:24 · 16797 阅读 · 2 评论