制作网站需要学什么软件,网络公司推广软文,网站seo优化,长治做网站#x1f3af;CSS常见面试题 1.CSS的盒模型2.CSS选择器的优先级3.隐藏元素的方法有哪些#xff1f;4.px和rem的区别是什么#xff1f;5.重绘排版有什么区别#xff1f;6.让一个元素水平垂直居中的方式有哪些#xff1f;7.CSS的哪些属性可以继承#xff1f;哪些不可以继承CSS常见面试题 1.CSS的盒模型2.CSS选择器的优先级3.隐藏元素的方法有哪些4.px和rem的区别是什么5.重绘排版有什么区别6.让一个元素水平垂直居中的方式有哪些7.CSS的哪些属性可以继承哪些不可以继承8.有没有用过预处理器 各位小伙伴们本专栏新文章出炉了 1.CSS的盒模型
在HTML页面中所有元素都可以看成是一个盒子。
盒子的组成内容content、边框border、内边距padding、外边距margin
盒模型的类型 标准盒模型 margin border padding content IE盒模型 margin contentborderpadding 控制盒模型的模式box-sizing:content-box默认值标准盒模型border-boxIE盒模型 标准盒模型和IE盒模型的区别
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleTest/titlestyle/* 清除样式 */*{margin: 0;padding: 0;}.box{padding: 20px;margin: 0 auto;border: 5px solid;background-color: aqua;width: 200px;height: 200px;box-sizing: content-box;}/style
/head
bodydiv classbox/div
/body
/html此时我们发现虽然我们定义的盒子高宽都为200px但实际盒子大小是250px*250px
也就是说标准盒模型整个盒子的实际大小是由各部分叠加的。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleTest/titlestyle/* 清除样式 */*{margin: 0;padding: 0;}.box{padding: 20px;margin: 0 auto;border: 5px solid;background-color: aqua;width: 200px;height: 200px;/* 切换盒模型 */box-sizing: border-box;}/style
/head
bodydiv classbox/div
/body
/html在IE盒模型下整个盒子的大小分为margin和content两部分通俗来说paddingborder和content算作一个整体我们定义的盒子高宽为200px也就是说content border padding的实际大小就为200px*200px
2.CSS选择器的优先级
CSS的三大特性
层叠性指多个样式定义适用于同一个元素时冲突的样式会根据一系列规则来决定哪个样式将生效。继承性指某些CSS属性可以由父级元素传递给子级元素但并不是所有属性都可以继承。优先级
优先级
内联样式 !important ID选择器 类选择器 属性选择器如font stylecolor:rgb(44, 44, 54);[typetext]/font 伪类 类型选择器如font stylecolor:rgb(44, 44, 54);div/font、font stylecolor:rgb(44, 44, 54);p/font 伪元素如font stylecolor:rgb(44, 44, 54);::before/font、font stylecolor:rgb(44, 44, 54);::after/font 通用选择器如*。
3.隐藏元素的方法有哪些
display:none视觉上隐藏元素元素完全从文档流中移除意味着该元素不会占据页面空间。opacity:0设置元素的透明度为0视觉上隐藏但实际上仍占据页面空间。position:absolute / left:-9999px通过定位的方式将元素移除屏幕实现隐藏虽不影响页面布局但会导致屏幕阅读器等辅助技术无法正确读取内容。visibility:hidden此属性会使元素不可见但仍占据文档流中的空间。
4.px和rem的区别是什么
px是一种固定长度表示屏幕上的物理像素。rem相对单位相对于HTML根节点font-size的值假设设置HTML根节点的font-size:62.5%那么1rem 10px
5.重绘排版有什么区别
重绘Repainting
重绘是指当一个元素的外观发生变化时例如颜色改变背景色改变等但其几何形状位置、大小没有发生变化浏览器只会重新渲染这部分变化。
重排Reflow
重排是指当一个元素的几何形状发生变化时例如尺寸高、宽位置等发生改变或者DOM树结构发生变化时浏览器需要重新计算布局确定每个元素的大小和位置。
值得注意的是触发重排一定会触发重绘但触发重绘不一定会触发重排如果盒模型的高宽确定就不会触发重排
6.让一个元素水平垂直居中的方式有哪些
.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}.container {display: grid;place-items: center; /* 水平垂直居中 */
}.parent {position: relative;
}
.child {position: absolute;top: 50%;left: 50%;/* 纠正元素自身尺寸带来的偏移。 */transform: translate(-50%, -50%);
}.center {margin-left: auto;margin-right: auto;margin-top: auto;margin-bottom: auto;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}7.CSS的哪些属性可以继承哪些不可以继承
可继承属性
颜色相关属性、字体相关属性、文本相关属性、列表相关属性、表格相关属性等
不可继承属性
边框相关属性、背景相关属性、边距相关属性、填充相关属性、尺寸相关属性、定位相关属性、显示模式相关属性等
8.有没有用过预处理器
预处理器语言增加了变量、函数、混入、嵌套等强大功能。
SCSSSassy Css
SCSS是Sass的最新语法它是一个成熟的CSS扩展语言。SCSS兼容标准的CSS语法并在此基础上增加了一些功能。
变量$variable可以用来存储颜色、数字、字符串或布尔值。嵌套选择器h1{.title{....}}可以更清晰地表示DOM结构中的关系。混合Mixinsmixin允许创建可重用的选择器定义。继承选择器extend可以让一个选择器继承另一个选择器的样式。函数function可以执行计算如数学运算等。
LESS
LESS是另一种CSS预处理器它同样提供了扩展CSS语言的功能以简化样式表的编写和维护。
变量$variable与SCSS类似可以用来存储值。嵌套规则支持类似SCSS的嵌套方式。混合Mixins.mixin()也可以包含一组属性并可以在文档中多次使用。操作符支持数学运算符用于动态计算样式函数提供了一些内置函数也可以自定义函数。 SCSS使用类似CSS的语法而传统的Sass使用一种不同的语法风格缩进式两者都需要通过编译工具转换为浏览器能够理解的标准CSS。 觉得不错的话记得点赞收藏呀
别忘了给我关注~~
