![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
Evelyn-zhou
这个作者很懒,什么都没留下…
展开
-
圣杯布局和双飞翼布局的区别
圣杯布局和双飞翼布局:实现两边定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。圣杯布局和双飞翼异同:相同点:圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。不同点:不同在于解决”中间栏div内容不被遮挡“问题的思路不一样:圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: re原创 2020-05-30 21:25:06 · 328 阅读 · 0 评论 -
margin部分知识点整理
关于margin值为百分比时的参照元素:1.普通元素百分比margin都是相对于容器宽度计算的2.绝对定位元素的百分比margin是相对第一个定位祖先元素(relative、absolute,fixed)的宽度计算的,不管是垂直还是居中margin重叠通常特性:只发生在block水平元素(不包括flaot和absolute元素)不考虑writing-mode,只发生在垂直方向margin重叠3种情况相邻的兄弟元素父级和第一个子元素父级和最后一个子元素margin设置成auto在什原创 2020-05-23 21:27:46 · 300 阅读 · 0 评论 -
关于absolute的几点小结
关于absolute的几点小结float造成环绕效果,absolute保持跟随效果,absolute存在时float效果失效,absolute跟float一样具有包裹性,即由内容撑开宽高absolute具有跟随性,当没有设置top/left等偏移值时,这个元素只是脱离了文档流,会对后面的元素产生影响,但它自身原来在什么位置,现在还是在什么位置(即可以依据absolute的跟随性和margin来对元素进行定位),如下面这个例子:使用独立的absolute实现定位 下拉框与绝对定位: 大众做法:1原创 2020-05-23 00:14:23 · 247 阅读 · 0 评论 -
使用绝对定位实现居中的两种方法
方法一:1.左右居中(绝对定位)先给父元素开启相对定位,再给子元素开启绝对定位,然后将子元素向左移动自己的50%,使子元素的中点与父元素的起点对齐,然后再将子元素向右移动父元素的50%,这样子元素和父元素的中心点就刚好重合了<style> .box1{ width: 1000px; height: 50px; background-color: pink; position: relative; } .box2{ wid原创 2020-05-21 15:49:46 · 21778 阅读 · 1 评论 -
div包裹图片时div的高度会高于img高度
产生原因:img是一种类似text的元素,在结束的时候,会在末尾加上一个空白符,所以就会多出3px如下所示:解决办法:设置display:blockimg { vertical-align: middle; }即很多时候我们需要重置样式reset.css,部分代码如下:@charset "utf-8";/* 样式重置 */article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset,原创 2020-05-21 14:44:08 · 505 阅读 · 0 评论 -
如何给布局设置边框的时候边框能不重合
**问题:**我们再写页面的时候,经常会遇到需要给每个item加边框的情况,又因为每个item是相邻的,所以如果给每个item设置边框的话,边框会出现重合的现象,**解决办法一:**如下所示可以给item重合的边设置margin为负的边框宽度<style> ul { list-style: none; margin: 0; padding: 0; } /* 布局样式 */原创 2020-05-19 17:02:16 · 645 阅读 · 0 评论 -
如何解决一行放多个item后,item中间间隔相等且两边无空隙的问题
问题:在我们进行布局时, 我们经常会遇到要求中间摆放多个item,且两边不需要空隙的情况,我们通常会使用使用float浮动,然后设置margin-right/margin-left让他们之间产生间距, 那么这样会导致最后总有一个元素设置的margin-right/margin-left是多余的解决方法:解决办法一: 每一行的最后一个元素, 总是加一个class, 通过类选择器去除这个margin-right解决办法二: 通过伪类选择器,但是不支持IE8,或者会兼容性问题解决办法三(最优解):w原创 2020-05-19 15:03:53 · 717 阅读 · 0 评论