发表于： 2019-06-06 22:48:36
1 913
大家好，我是IT修真院郑州分院第17期的学员李亚兵，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css（职业）任务4，深度思考中的知识点
任务六深度思考;
首先先上个刚做完的脑图吧：
1.去除inline-block间距有哪几种方法？
isplay:inline; 内联元素，简单来说就是在同一行显示。
display:block; 块级元素，简单来说就是就是有换行，会换到第二行。
display:inline-block; 即内联块状元素，可以水平排版。
知识剖析
inline-block 内联块状元素，可以水平排版。但我们发现inline-block元素间在换行显示或空格分隔的情况下会出现空白间隙。 这种表现是符合规范的应该有的表现，而不是bug。但是有时候会对我们的布局造成影响，所以有时候我们需要想办法去除它。
方法一:改变书写方式
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就消失了。
我们可以把inline-block元素写在同一行，这种方案是最直接的解决方案，但却也是最不靠谱的方案，存在很多不可控因素。 很多场景会让你崩溃：前后端协同；版本更迭；他人接手；自己忘了...，太多一不小心都可能让这个方案失效。
方法二：font-size
这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。
方法三：使用margin负值
margin负值的大小与上下文的字体和文字大小相关，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。
方法四：使用word-spacing或letter-spacing
一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。 父元素letter-spacing负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，即使父元素letter-spacing负值很大，也不会发生重叠。但是子元素要设置letter-spacing为0，不然会继承父元素的值；使用word-spacing时，只需设置父元素word-spacing为合适值即可。
2.css有哪些属性可以继承？
一、无继承性的属性
1、display：规定元素应该生成的框的类型
2、文本属性：
vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成内容属性：content、counter-reset、counter-increment
7、轮廓样式属性：outline-style、outline-width、outline-color、outline
8、页面样式属性：size、page-break-before、page-break-after
9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
3、元素可见性：visibility
4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性：quotes
7、光标属性：cursor
8、页面样式属性：page、page-break-inside、windows、orphans
9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
三、所有元素可以继承的属性
1、元素可见性：visibility
2、光标属性：cursor
四、内联元素可以继承的属性
1、字体系列属性
2、除text-indent、text-align之外的文本系列属性
五、块级元素可以继承的属性
1、text-indent、text-align
css六任务总结：
任务耗时五天
任务五比起任务六难度又高了不少，又用到了新的知识
比如说flex布局，其中的垂直居中和两边对齐都是非常的好用且常用的东西，能学习到这个是非常不错的，起码居中啥的方便多了。。。
最重要的还是了解了bootstrap中的栅格布局，这个也叫响应式布局，这个东西知识太多了，一时间难以理解，就是刚开始引入四行代码，一行css、
三行js，这个布局开始还是比较简单的，任务六也是用上了，第一次用到这个布局感觉还可以，这两个布局就是东西太多难以消化，不过越复杂的东西功能越强大，又一次的加强了我对代码的理解。
大家好，我是IT修真院郑州分院第17期的学员李亚兵，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css（职业）任务4，深度思考中的知识点
任务七深度思考：
首先任务七的难度就比其他的难度又提升了不少，比如前几个任务都是一张图，任务七则是三张图，这里就能明的感觉到压力，其实有了前几个的经验我感觉我的水平还是一次比一次强的，这次的任务对我以前学的更加强化了，做出来这个也是不太难，就是任务的量大了点，主要的难点在于第二图比较难控制，在这上面耽误了两三天的时间，另外的两个图到是做的挺快的，接下来一起看看任务七的脑图吧：
1.什么是CSS sprites？
css sprites：精灵图（雪碧图）：把一堆小图片整合在一张大图上，通过背景图片相关设置（背景图片、背景图是否重复、背景图定位），显示图片，减轻服务器对图片的请求数量
优点：
1、减少网页的HTTP请求，提高页面性能
2、图片命名上的困扰
3、更换风格方便
缺点：
1、必须限定容器大小，符合背景图片元素的位置，需要计算
2、维护比较麻烦
使用步骤：
1、制作一张具有多状态的拼合图片，需要按照一定规律处理
2、给要显示背景的盒（一个固定尺寸，宽width、高height），以背景的方式加载，让其局部显示
3、通过背景图定位（background-position）控制不同的显示状态
什么是浮动？有哪些清除浮动的方法？
1、使用 clear
clear : none | left | right | both
2、增加一个清除浮动的子元素
3、用:after 伪元素
4、父元素设置 overflow:hidden
5、父元素也设成 float
6、父元素设置 display:table。
第一种方法只适合相邻浮动元素清除浮动，后面三种是触发了 BFC，推荐使用第三种方法。
什么是 BFC
BFC 就是 “块级格式化上下文” 的意思，创建了 BFC 的元素就是一个独立的盒子，不过只有 Block-level box 可以参与创建 BFC， 它规定了内部的 Block-level Box 如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
何为格式化上下文，个人理解就是将 BFC 容器进行格式化，使其不受上下元素的影响。
格式化具体指的是什么格式，可以参考 html 基本流，因为 html 本身就是一个 BFC 容器，大致特性如下：
内部的 Box 会在垂直方向，从顶部开始一个接一个地放置。
Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生叠加
每个元素的 margin box 的左边， 与包含块 border box 的左边相接触 (对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC 的区域不会与 float box 叠加。
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。 计算 BFC 的高度时，浮动元素也参与计算。
3.rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？
1.什么是RGBA？
rgb大家都熟悉，红red，绿green，蓝blue，三原色。那现在我们所说的grba又是什么呢？说得简单一点就是在grb的基础上加进了一个通道alpha。
可以看做是用来定义透明度的。a的取值范围是0-1之间，不可以是负值，r、g、b三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。
2.什么是OPACITY？
也是一个css3属性，该属性用于设置元素的不透明度级别，所有的浏览器都支持这个属性。
opacity 中文翻译为：不透明度。语法：opacity：value | inherit ;
取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。
3.什么是DISPLAY：NONE
将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。元素的内容也会被屏幕阅读所忽略。隐藏起来。
4.什么是VISIBLITY
w3school上给的定义 定义和用法 visibility 属性规定元素是否可见。 提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
1.RGBA与OPACITY的区别
opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明
rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。
DISPLAY 和VISIBILITY有什么区别?
1.主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。有一句话是这么说的，display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。
2.就是displayde回流与渲染visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。
3.株连性,所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事.我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。如果子孙元素应用了visibility:visible，那么这个子孙元素又会神奇般地显现出来。
对比总结： display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。 visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。
4.描述下z-index和叠加上下文是如何形成的？
1.背景介绍
z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。
第一，看看z-index
z-index可能有的值：
注释:所有主流浏览器都支持 z-index 属性。任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。
z-index为auto的元素不参与层级关系的比较.
层叠上下文:英文叫“stacking content”,是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。这里出现了z轴，z轴是我们的眼睛与页面的垂直抽象的距离。
层叠上下文是一个概念，跟BFC类似，概念的这个东西是比较抽象的，要好好理解理解。
层叠顺序：英文叫“stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序
3.常见问题
处理两个或两个以上盒子之间z-index的复杂关系？
4.解决方案
1,两个div，无设置z-index，第二个粉色div向上移动50px时.
2,两个div，粉色div设置z-index为-5时，
3,黄色div设置z-index为30，粉色为25时，30>25，
4,如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。
5,如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素
6,如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，在父元素上方
7,如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效
8,如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定。
5.如果是在手机上查看投票页，没有hover效果时应该怎么办？
1.touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
2.touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间， 调用preventDefault()事件可以阻止滚动。
3.touchend事件：当手指从屏幕上离开的时候触发。
4.touchcancel事件：touchcancel，是在拖动中断时候触发。
css任务七总结：
任务七耗时六天：
刚做完任务七，主要是在第二图上面耽误的时间太多了，那十二个方块尝试过用很多方式来排列，首先用到的就是栅格布局，但是栅格布局虽然好用，但是还是不合适用于盒子的排列，鼓捣了一两天终于换成放弃，但是也对栅格布局有了一定的理解，也算是有点收获吧，另外的两个就是一天一图了，练熟了速度也稍微加快了点，感觉还是根基有点不稳，应该在继续巩固巩固，总的来说就是速度有点难，下次要多加努力。
返回列表
评论