学习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,视觉有效果，但本身高度不变。
两个span中间缝隙是怎么一回事？如何解决
- span之间有空格、Tab、换行符。
- html中默认换行,空格，Tab是有一个字符串的空隙
- 给父元素设置 font-size: 0，在 span元素上重新设置 font-size。
- 代码：http://js.jirengu.com/pajij/1/edit?html,css,output
什么是外边距合并（也叫外边距塌陷）？如何解决外边距合并？
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。
- 相邻的兄弟姐妹元素
<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>
<p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>
- 块级父元素与其第一个/最后一个子元素
- 空块元素
<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>
<div style="margin-top: 20px; margin-bottom: 20px;"></div>
<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
- 父亲儿子的上下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怎么用？
看不到父元素背景色的三列等分
看得到父元素背景色的三列等分
display:outline怎么用？
如果你看到被选中的 <a><input><button>周围有一圈黄或蓝色的外框，就是 outline 了，可以通过设置 outline: 0 或 outline: none去除。
什么是雪碧图，为什么要用雪碧图？
CSS Sprites 是指将多张图片（一般是小图标）合成一张大图，不同元素共用这张大图作为背景图，并给这些的元素设置相应的 background-position 值，在达到预期显示效果的同时，减少 HTTP 请求数的一种前端优化手法。
雪碧图
实现首页封面全屏
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字体?
<body>
<style>
h1{
font-family:Arial;
}
</style>
<h1>字体</h1>
</body>
在标签h1写上字体两字的时候，保存的时候会保存成utf-8的编码方式， 解析的时候会解析成Unicode。
<h1>字体</h1>中的字体如果写成\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
单行文字省略
image.png
多行文字省略
image.png
文字垂直居中 （不限高度）
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
