学习CSS时遇到的问题总结

---

如果一个元素既有left,又有right，它的left起作用，一般这种情况是你想后者CSS样式覆盖前者，但是没有效果的时候，就要考虑到这种情况

---

在固定宽度的block元素输入连续一段字母为什么会越过border边界？

这是 浏览器默认属性导致的。

• word-wrap默认属性是normal，只在允许的断字点换行（浏览器默认处理，汉字属于断点字）。
• word-wrap:break-word 允许长单词
• 参考资料：word-wrap
• 代码：http://js.jirengu.com/rayuz/2/edit?html,css,output

---

想让段落中出现连续空格怎么办？

• white-space:pre
• 转义字符
• text-indent;
• 其他方法
• 代码：http://js.jirengu.com/xotis/2/edit?html,css,output

---

行内元素上下没有margin,左右有，设置上下padding,视觉有效果，但本身高度不变。

• 代码：http://js.jirengu.com/xedam/1/edit?html,css,output

---

两个span中间缝隙是怎么一回事？如何解决

• span之间有空格、Tab、换行符。
• html中默认换行,空格，Tab是有一个字符串的空隙
• 给父元素设置 font-size: 0，在 span元素上重新设置 font-size。
• 代码：http://js.jirengu.com/pajij/1/edit?html,css,output

---

什么是外边距合并（也叫外边距塌陷）？如何解决外边距合并？

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。

• 相邻的兄弟姐妹元素

这个段落的下外边距被合并...
...这个段落的上外边距被合并。

• 块级父元素与其第一个/最后一个子元素
• 空块元素

这个段落的和下面段落的距离将为20px



这个段落的和上面段落的距离将为20px

• 父亲儿子的上下margin合并
• BFC会阻止元素外边距合并。
• 参考资料：1.MDN 外边距合并2. CSS trick

---

display：none和visibility:hidden的区别

display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用 visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。

• 参考资料：display：none和visibility:hidden的区别
• 代码：http://js.jirengu.com/nihey/1/edit?html,css,output
• visibility:hidden和opactiy:0??? js处理事件不同

---

box-sizing:border-box怎么用？

看不到父元素背景色的三列等分

• 代码：http://js.jirengu.com/siyig/1/edit?html,css,output

看得到父元素背景色的三列等分

• 代码：[http://js.jirengu.com/wotec/1/edit?html,css,output(http://js.jirengu.com/wotec/1/edit?html,css,output)

---

display:outline怎么用？

如果你看到被选中的 周围有一圈黄或蓝色的外框，就是 outline 了，可以通过设置 outline: 0 或 outline: none去除。

• 代码：http://js.jirengu.com/qolo/1/edit?html,css,output

---

什么是雪碧图，为什么要用雪碧图？

CSS Sprites 是指将多张图片（一般是小图标）合成一张大图，不同元素共用这张大图作为背景图，并给这些的元素设置相应的 background-position 值，在达到预期显示效果的同时，减少 HTTP 请求数的一种前端优化手法。

雪碧图

• 代码：http://js.jirengu.com/kowux/2/edit

---

实现首页封面全屏

image.png

代码： http://js.jirengu.com/vuyic/1/edit?html,css,output

---

浮动的副作用，如何清除？

• 问题1：对后续元素位置产生影响

对后续元素位置产生影响

• 问题2： 父容器高度计算出现问题

image.png

• 解决办法：清除浮动
  clear-left:如果我的上面（dom顺序）有左浮动元素，我就 位于该元素的下方。
  clear-right:如果我的上面（dom顺序）有右浮动元素，我就位于该元素的下方。

通用方法

.clearfix::after {
  content:'';
  display: block;
  clear: both;
}

---

为什么font-family:Arial;字体会变为Arial字体?

字体

在标签h1写上字体两字的时候，保存的时候会保存成utf-8的编码方式， 解析的时候会解析成Unicode。

字体

中的字体如果写成\u5b57\u4f53\u000d\u000a同样可以识别，当浏览器渲染页面的时候，他会把你保存的编码方式转换成Unicode，然后会找到你的font-family，这个时候会从你的系统当中找对应的字体库，找到之后然后拿对应的Unicode码查询他的一个字体样式，这个时候把样式拿到展示到页面上。

---

可以让很长的单词（比屏幕宽度还长）分成两行显示。

p{
  word-break: break-all;
}

---

如何使文本框变成透明效果

image.png

image.png

---

如何使文字右端对齐？

image.png

• text-align:justify
• 代码：http://js.jirengu.com/qaxok/1/edit?html,css,output
  参考资料：

---

请写出「姓名」与「联系方式」两端对齐的例子

image.png

• 代码：http://js.jirengu.com/farav/3/edit

---

单行文字省略

image.png

• 代码：http://js.jirengu.com/cetiy/4/edit

---

多行文字省略

image.png

• 代码 ：http://js.jirengu.com/momij/1/edit

---

文字垂直居中 （不限高度）

image.png

• 代码：http://js.jirengu.com/pemey/2/edit
• 好处：文字很多不会出现bug

---

margin合并

image.png

上下合并，左右没有合并

• 代码 ：http://js.jirengu.com/cecek/2/edit
• 解决方法，
  • 父元素上下加border，padding
  • 父元素加overflow:hidden(不到万不得以千万不要加，弄一个悬浮框就不好办了）

div的高度由什么决定的？

• 是由内部文档流中元素的高度的总和决定

内联元素高度由什么决定的？

• 与字体和字体相关的设计师设计的一些参数有关，如果非要设固定高度，就设置line-height,height

文档流？

• 文档内元素的流动方向
• 文档流中内联元素从左到右依次排列，块级元素从上到下排列，每一个块另起一行

脱离文档流？

• 算高度的时候不要叫上我
• 方法：
  • position:absolute
  • position:fixed
  • float

注意 ：position:relative没有脱离文档流，还是要算上高度的

---

div中里面的div如何垂直居中

• 外面div高度不确定：padding
• 外面div高度不确定（全屏）：
  • 里面div宽度确定 ：margin:auto, position:absolute; top:0;bottom:0;left:0;right:0;
  • 里面div不确定：display:flex;justify-content:center;align-items:center;

1比1的div :padding-top:100%

---

下面这个是怎么造成的？

GIF.gif

我鼠标上去时，本来没有边框，然后我添加a:hover{boarder:1px solid red}，浮上去就有边框，左边浮动两像素。
如何解决

• 一开始就让他有边框，但边框是透明的

  
  
  

  image.png

---

下面这个是怎么造成的？

GIF.gif

li的高度比a的高度要小
解决方法

• a设置display为block

---

堆叠上下文

• background
• border
• 块级
• 浮动
• 内联
  z-index: 0
  z-index: +
  如果是兄弟元素重叠，那么后面的盖在前面的身上。

---

div 由 block 变成 inline-block
一定要加 verticle-align:top

---

（有问题）下拉菜单 点击向右滑动效果

css实现 http://js.jirengu.com/movom/1/edit?html,css,output

js实现 http://js.jirengu.com/velec/1/edit?html,css,js,outputhttps://xiedaimala.com/tasks/37a886be-169c-4a99-8bfb-1a993be8119d#/