资讯专栏INFORMATION COLUMN

【css】常见问题

renweihub / 2212人阅读

摘要:将元素显示为内联元素,元素前后没有换行符。我们知道内联元素是无法设置宽高的,所以一旦将元素的属性设为,设置属性和是没有用的。这个属性值融合了和的特性,即是它既是内联元素,又可以设置和。

CSS 中 inline 元素可以设置 padding 和 margin 吗?

行内元素设置width,height无效。但是设置margin和padding是有效的。
行内非替换元素的外边距不会改变一个元素的行高


div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dl


span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code
CSS box-sizing 的值有哪些?

允许您以特定的方式定义匹配某个区域的特定元素。
box-sizing: content-box|border-box|inherit;
一般在做自适应的网页设计的时候用,用这个属性网页结构才不会被破坏。
常用的值:
content-box,border和padding不计算入width之内
padding-box,padding计算入width内
border-box,border和padding计算入width之内,其实就是怪异模式了~
兼容性
-webkit-box-sizing: 100px; // for ios-safari, android
-moz-box-sizing:100px; //for ff
box-sizing:100px; //for other

CSS BFC 原理?

BFC(block formatting context)块级格式化上下文。是一个html盒子,里面的元素左对齐
定义:
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible

毗邻块盒子的垂直外边距折叠只有他们是在同一BFC时才会发生。如果他们属于不同的BFC,他们之间的外边距将不会折叠
BFC的作用
1、 清除内部浮动
我们在布局时经常会遇到这个问题:对子元素设置浮动后,父元素会发生高度塌陷,也就是父元素的高度变为0。解决这个问题,只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。
2、 垂直margin合并
在CSS当中,相邻的两个盒子的外边距可以结合成一个多带带的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
折叠的结果:
两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
两个外边距一正一负时,折叠结果是两者的相加的和。
这个同样可以利用BFC解决。关于原理在前文已经讲过了。
3、 创建自适应两栏布局
在很多网站中,我们常看到这样的一种结构,左图片+右文字的两栏结构。
在图片和文字的样式中都加入overflow:hidden使他变为块级格式化上下文。
(我对BFC的理解)[https://www.jianshu.com/p/764...]

HTML5 和 CSS3 新特性?

html5:语义化标签;增强型表单;视频和音频;canvas;svg绘图;地理定位;拖放api;webworker;storage(sessionStorage和localStorage);webSocket;
HTML5的十大新特性
css3:
(1) CSS3实现圆角(border-radius),阴影(box-shadow),边框图片border-image

(2) 对文字加特效(text-shadow、),强制文本换行(word-wrap),线性渐变(linear-gradient)

(3)旋转,缩放,定位,倾斜:transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

(4) 增加了更多的CSS选择器、多背景、rgba();

(5)在CSS3中唯一引入的伪元素是 ::selection ;

(6) 媒体查询(@media),多栏布局(flex)

CSS 清除浮动的方法?

也就是防止元素高度塌陷
1、父元素变为BFC块级格式化上下文overflow:hidden;
缺点:元素溢出无法控制显示,不要用
2、clear:{

clear:both;

}
3、伪元素after和before,clear:both
IE6-7不支持:after,使用 zoom:1触发 hasLayout


鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的代码如下:

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:both; 
    }
.clearfix { 
    *zoom:1; 
    }

1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;
4)通过 content:"."生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,,有些版本可能content 里面内容为空,不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙;after在元素之后插入content的内容。
5)zoom:1 触发IE hasLayout。
通过分析发现,除了clear:both用来闭合浮动的,其他代码无非都是为了隐藏掉content生成的内容,这也就是其他版本的闭合浮动为什么会有font-size:0,line-height:0。

CSS 实现左右垂直居中的方法?

CSS水平垂直居中常见方法总结
1、元素在文档流里是紧密布局的,不能直接使用top left直接移动元素,容易造成混乱。
使用position:relative;元素在文档流中位置不浮动来改变元素的居中。

content{
    margin-top:-50% of height;<--伪代码-->
    position:relative;
    top:50%;<--或者使用transform:translateY(50%);-->
}

2、弹性布局flex

body {
    display: flex;
    align-items: center; /*定义body的元素垂直居中*/
    justify-content: center; /*定义body的里的元素水平居中*/
}
.content {
    width: 300px;
    height: 300px;
    background: orange;        
}

3、将父容器设置为display:table
然后将子元素也就是要垂直居中显示的元素设置为 display:table-cell 。
但是,这是不值得推荐的,因为会破坏整体的布局

用过哪种 CSS 预处理器,简单介绍一下?

谈谈CSS预处理器
目前最主流的CSS预处理器是LESS、SASS和Stylus

介绍几种 CSS 伪类?

添加一些选择器的特殊效果。
格式是:选择器:伪类
after 元素后插入内容
before 元素之前插入内容
empty 元素内空的子元素

6、 CSS 选择器优先级?

精华帖CSS选择器优先级总结
id > 类选择器 > 标签选择器>

使用过的 CSS 布局方式?

圣杯布局、双飞翼布局、Flex布局和绝对定位布局

CSS display 属性的值及作用?

display 属性规定元素应该生成的框的类型。
其中常用的的有none、inline、block、inline-block。分别的意思是:
1) none: 元素不会显示,而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden, 是保留元素的空间的。
2) inline: display的默认属性。将元素显示为内联元素,元素前后没有换行符。我们知道内联元素是无法设置宽高的,所以一旦将元素的display 属性设为 inline, 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度(font-size)和padding。
3) block: 将元素将显示为块级元素,元素前后会带有换行符。设置为block后,元素可以设置width和height了。元素独占一行。
4) inline-block:行内块元素。这个属性值融合了inline 和 block 的特性,即是它既是内联元素,又可以设置width和height。

CSS单位 rem 和 em 的区别?

px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。
对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。

标准盒子模型和css盒子模型的区别。

(1)有两种, IE 盒子模型、W3C 盒子模型;
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);
(3)区 别: IE的content部分把 border 和 padding计算了进去;

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113729.html

相关文章

  • 关于CSS Reset 那些事(四)之 构架CSS基础样式库

    摘要:现在回到我们这一章节的标题,将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节,我们都说了哪些内容: CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    mj 评论0 收藏0
  • 关于CSS Reset 那些事(四)之 构架CSS基础样式库

    摘要:现在回到我们这一章节的标题,将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节,我们都说了哪些内容: CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...

    Yu_Huang 评论0 收藏0
  • CSS Modules详解及React中实践

    摘要:上例中打印的结果是对中的名都做了处理,使用对象来保存原和混淆后的对应关系。结合实践在处直接使用中名即可。如因为只会转变类选择器,所以这里的属性选择器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端领域中进化最慢的一块。由于 ES2015/201...

    wemall 评论0 收藏0
  • 关于CSS Reset 那些事(一)之 历史演变与Normalize.css

    摘要:下面开始对进行简单的介绍,关于两者的差异区别可以看问答平台使用遇到的问题和有什么本质区别没简单介绍关于对的介绍,这里引用咀嚼之味针对官方介绍翻译的的中文版本。目前已经成为了的替代方案是无可争议的事情了。 前言 近期在翻阅陈旧的历史资料,整理之前饱受争议的CSS Reset问题,不过好像十多年过去,现在大家统一了口径,纷纷推荐使用Normalize.css,包括Bootstrap都进行...

    idealcn 评论0 收藏0

发表评论

0条评论

renweihub

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<