css面试
麦子穗
这个作者很懒,什么都没留下…
展开
-
居中对齐有哪些实现方式?
(1)Inline 元素:text-align: center;line-height 的值等于height 值;(2)Block元素:margin:0 auto;只用于水平居中对齐(3)Absolute 元素(3种):第一种方法left:50%; margin-left:-width/2;top:50%; margin-top:-height/2;此种无兼容性问题,但是必须知道宽度和高度。第二种方法left:50%;top:50%;transform:tra..原创 2022-03-06 21:14:46 · 316 阅读 · 0 评论 -
清除浮动的方式有四种方法
利用浮动可以实现并排、网页布局。当盒子因为浮动影响布局时,就要清除浮动。清除浮动的方法有四种:①让父盒子形成BFC,设置overflow:hidden 属性;②给后面的父盒子上设置clear:both 属性,clear表示清除其他盒子的浮动对自己的影响,both表示左右盒子的浮动都清除;③使用::after伪元素给盒子添加最后一个子元素,并且给::after 设置clear:both属性和display:block属性;.clearfix { overflow:原创 2022-03-06 17:22:21 · 421 阅读 · 0 评论 -
BFC 理解和应用-什么是BFC ?如何应用?
BFC 是 Block format context 块级格式化上下文的缩写。表示一块独立渲染区域,内部元素的渲染不会影响边界以外的元素。形成BFC 的常见条件:float不是 none ;position是 absolute 或 fixed ;overflow 不是 visible ;Display 是 flex、inline-block等。形成BFC 的常见应用: 清除浮动、取消盒子margin塌陷问题、可以阻止元素被浮动元素覆盖...原创 2022-03-01 17:45:41 · 402 阅读 · 0 评论 -
Margin 负值的问题-对 margin 的top、left、right、bottom 设置负值,有何效果?
margin-top 和 margin-left 为负值,元素会向上、向左移动;margin-right 为负值,右侧元素会左移,但自身不会受影响;margin-bottom 为负值,下方元素上移,但自身不会受影响。原创 2022-03-01 17:33:36 · 796 阅读 · 0 评论 -
HTML5行内元素有哪些,块级元素和内联元素有哪些?两者有什么区别?
块级元素的display属性是block/table。其中块级元素有div、h1~h6、table、p、ul、ol、audio、video等;内联元素的display属性是inline/inline-block。其中内联元素有span、img、input、button、a等。区别:块级元素:独占一行;可以设置宽高,当不设置宽高时,内容自动撑满;可以包含行内元素和其他块级元素。行内元素:一行内可以放多个,不独占一行;不可以设置宽高,宽高由元素内部的内容决定,padding和margin的top原创 2022-02-28 17:41:54 · 825 阅读 · 0 评论 -
说说你对HTML语义化的理解?
语义化的标签旨在让标签有自己的含义,简单说就是用正确的标签做正确的事。优点:①HTML语义化让页面的内容结构化,便于阅读维护理解②搜索引擎的爬虫也依赖于HTML来确定上下文和各个关键字的权重,利于SEO,便于对浏览器、搜索引擎解析。例如h1是一级标题,可以让文字放大加粗。常见的语义化标签:头部、导航栏、有语义化的div等...原创 2022-02-28 17:40:11 · 238 阅读 · 0 评论 -
Margin 纵向重叠(塌陷)问题和解决方法
Margin纵向塌陷现象:小的margin会塌陷到大的margin中,从而margin不叠加,只以大值为准。相邻元素的margin-top 和 margin-bottom 会发生重叠;空白内容的P标签、div标签等也会重叠。解决方法:1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合 (可以设置成透明:border:1px solid transparent)。2)为父盒子添加overflow:hidden;3)为父盒子设定padding值;4)为父盒.原创 2022-02-11 15:33:32 · 803 阅读 · 0 评论 -
说说CSS选择器的类型有哪些,优先级
标签(元素)选择器、id选择器、类选择器、后代选择器、属性选择器、伪类选择器、通配符等。优先级:!important->行内样式->#id->.class->元素和伪元素->*->继承->默认...原创 2022-02-11 15:31:10 · 333 阅读 · 0 评论