css基础

月亮ya
87 阅读8分钟
1. 怪异盒模型和标准盒模型
  • 盒模型由：content + padding + border + margin组成
  • 标准盒模型下宽度计算：width + padding（左右） + border（左右）；box-sizing: content-box;
  • 怪异盒模型下宽度计算： width（width已经包含padding和border）
2. 多种方式实现左边 100px 右边自适应的布局
  • 弹性盒子（1）flex-basis: 100px;flex-shrink: 0;
  • 左边盒子设置100px，设置左浮动，右边盒子设置overflow：auto；
3. display 都有哪些属性？
  • none，block，inline-block，inline
4. 去掉行内块元素默认的空白间隙？
  • 原因：元素被当成行内元素排版的时候，元素之间的空格，回车换行都会被浏览器处理掉，white-space 的处理方式（默认是 normal，合并多余空白），原来 HTML 代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。元素之间的空格会根据元素的字体变化而变化
  • 解决方法： （1）父元素设置font-size：0；子元素重新设置font-size； （2）图片间空隙：设置图片为display：block；
    （3）添加浮动，脱离文档流。
5. 块元素和行内元素、行内块元素都有哪些，以及区别。
  • 块级元素：div，ul，ol，li, h1-h6, form, p, table, th, tr， td
  • 块级元素的特点：（1）独占一行 （2）可以包含行内元素 （3）盒模型，设置width，height， pading， margin都有效
  • 行内元素：a, b, i, span, img, input, label, br
  • 行内元素特点：（1）元素排列在一行，不会自动换行（2）不可以包含块级元素（3）行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
  • 行内块：img, input, td
  • 行内块元素特点（1）和相邻行内元素在同一行，但是之间会有空白缝隙。（2）默认宽度是他本身内容的宽度 （3）可以设置宽高，行高，内外边距
6. css实现斑马线效果。
  • 设置background: linear-gradient(to right, #000 50%, #fff 50%);background-size: 30px 100%;
  • linear-gradient（direction[颜色渐变方向，可设置to right等也可设置90deg等], color-stop1（例：green 40%）, color-stop2...）
7. background属性
  • background-color：背景颜色
  • background-image：背景图
  • background-repeat：是否平铺（repeat no-repeat repeat-x reprat-y）
  • background-position: 位置（left，center, right，bottom，top）
  • background-size：大小（contain[不改变图片比列，图片完整的显示在指定区域，可能会有空白部分]， cover[不改变图片比例，撑满指定区域，图片可能会溢出]， 100%[横向撑满，纵向按比例缩放], 100% 100%[横向纵向都撑满，改变图片比例]，x y [自定义数值]）
  • background-attachment:设置是否为固定（fixed[背景相对于视口固定]，scroll[背景相对于视口不固定]）
  • background：背景颜色、背景图片地址、背景平铺、背景固定、背景位置、背景图片尺寸
8. 实现水平垂直居中的方法
  • 弹性盒子：父级display：flex；justify-content: center;aligin-item: center;
  • 弹性盒子：父级：display：flex；子级：margin：auto；
  • 定位：position：absolute；top: 50%; left: 50%; margin-left: -宽度一半;margin-top: -高度一半;
  • transform：position：absolute；top: 50%; left: 50%; transform: translate(-50%, -50%);
  • gird：父级display：gird；justify-content: center;aligin-item: center;
  • gird：父级：display：gird；子级：margin：auto；
9. flex：1；的意思。
  • flex：1即为flex-grow：1，经常作用于自适应布局，父级display：flex；子集flex：1；自适应撑满盒子；
  • flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
  • flex-grow：定义项目的的放大比例；默认为0，当为1的时候等分剩余空间，当为n的时候，是1的n倍；
  • flex-shrink：定义项目的缩小比例；默认为1，
  • flex-basis：设置初始值
10. flex和gird的区别？
11. 一个父容器，三个子容器，两边的子容器宽度固定，中间自适应，如何实现？
  • 双飞翼布局，两边写固定宽度，左浮动设置margin，中间宽度为100%，设置margin
12. 页面布局的方式有哪些？
  • 双飞翼布局：布局要求（1）两边定宽，中间自适应的三栏布局（2）中间栏要在浏览器中优先展示（3）只允许有一个额外的div
  • 多栏布局：（1）栅格栏系统：利用浮动实现多栏布局（2）多列布局：css3为了实现分栏效果增加了多列布局模块。（css3新增属性：column-count:num,设置列数；column-gap：num px；设置每一列的间距；column-rule 设置列之间的边框与boder属性相似）
  • 弹性布局：Flexbox
  • 流式布局：Fluid，根据百分比宽度来限定布局元素，这样可以根据客户分辨率大小来合理显示。
  • 瀑布流布局：参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来.
  • 响应式布局：1.pc端响应式布局：是指屏幕大小缩放时样式发生相应改变。运用媒体查询@media来设置。
    2.移动端响应式布局：是指根据移动端不同设备实现页面正常显示的方案。运用以下三种方案布局：a. 百分比布局。b. flex布局。c. rem布局
14. 清除浮动的几种方式？
  • clear：both；
  • 给父级加overflow：hidden；
  • 伪类1675154873025.png
  • 双伪类1675155001392.png
15. 选择器权重：!important>行内>id>class选择器>元素选择器>通用选择器
16. css3新特性
  • 阴影
  • 选择器
  • 动画
  • 边框
  • 弹性布局
  • 多列布局
  • 栅格布局
  • 盒模型
  • 媒体查询
  • 文字溢出省略
  • 背景渐变
16. position属性
  • relative:相对于自身定位，不脱离文档流
  • absolute：相对于父级元素定位，脱离文档流
  • fixed：固定定位，相对于浏览器窗口定位
  • static：默认
  • sticky:粘性定位，基于用户滚动的位置
17. BFC
  • 概念：块级格式化上下文
  • 产生BFC的方式： （1）flaot并且值不为none（2）position并且值不为static和relative （3）display：inlne-block、flex；（4）overflow值不为visible
  • 特点：（1）BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列（2）BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签（3）垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠（4）计算BFC的高度时，浮动元素也参与计算
  • 作用：（1）解决高度坍塌（2）解决margin重叠的问题（3）阻止元素被浮动元素覆盖
18. 重绘和重排（重绘不一定会导致重排，但重排一定会导致重绘）
  • 重绘：重新绘制，是在一个元素外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观
  • 重排：也叫回流，重新排列，当渲染树一部分必须更新，并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新绘制构建渲染树。
19. 哪些行为会导致重绘和重排
  • 重排：（1）增加或删除可见的dom元素（2）元素尺寸发生变化（3）元素位置发生变化或使用动画（4）页面渲染初始化（5）css伪类激活（6）计算offsetWidth、offsetHeight、offsetTop和offsetLeft等布局信息
  • 重绘：（1）改变背景色（2）改变字体颜色（3）阴影 （4）visible
20. 如何避免重绘和重排
  • 浏览器针对页面的重绘和回流，进行了自身优化-渲染队列
  • 浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。
  • （1）避免一条一条修改dom的样式，可以直接修改dom的className
  • （2）避免在大量元素上使用:hover
  • （3）需要动画的元素脱离文档流
21. 实现换肤
  • （1）动态修改全局css变量，在全局css文件或者App.vue里定义css变量，然后使用css变量元素
  • （2）切换顶级CSS类名
22. less、scss常用方法
  • @blue : #1875e7;用$定义变量，下载style-resources-loader，在vue.confing.js配置，就可以全局使用。
  • 嵌套
  • @extend：继承；@extend .class1;
23. 网页从HTML文件变成屏幕上的画面所经历的过程：
  1. HTML内容被HTML解析器解析生成DOM树
  2. CSS内容被CSS解析器解析生产CSSOM树
  3. DOM树+CSSOM树会生产Render Tree（渲染树）
  4. 生成布局，浏览器根据渲染树来布局，以计算每个节点的几何信息
  5. 将各个节点绘制到屏幕上
avatar
文章
阅读
粉丝