![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
卡卡的笔录
前方的路。
展开
-
实现元素的水平和垂直居中方法总结
非绝对定位元素方法一利用flex布局,IE浏览器兼容性不好。//HTML<div class="father"> <div class="son"> 哈哈 </div></div>//css.father { display: flex; justify-content: center; align-items: c...原创 2020-03-26 13:12:39 · 184 阅读 · 0 评论 -
如何实现绝对定位元素的水平和垂直居中
方法一以下方法支持IE9+(包含IE9,亲测有效)//HTML<div class="father"> <div class="son"> 哈哈 </div></div>//CSS.father { position: relative; height: 100px; width: 100px; back...原创 2019-08-19 09:26:34 · 546 阅读 · 0 评论 -
BFC
MDN 对 BFC 的描述块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。下列方式会创建块格式化上下文:根元素或包含根元素的元素浮动元素(元素的 float 不是 none)绝对定位元素(元素的 position 为 absolute 或 fixed)行...原创 2019-07-09 08:24:04 · 142 阅读 · 0 评论 -
层(堆)叠顺序和层(堆)叠上下文
层(堆)叠顺序由上图可知,在仅存在html这一个根元素层叠上下文的情况下,页面上的堆叠顺序为(序号越大,层级越高):(0) z-index < 0(1) background(2) border(3) div(块级)(4) float(5) inline/inline-block(包括text)(6) position: absolute/relative(7)z-i...原创 2019-03-27 14:52:54 · 910 阅读 · 0 评论 -
CSS伪类选择器nth-child 和nth-of-type
首先要说明的一点是:css中的伪类选择器还是少用为妙,复杂的css选择器(层级关系较深,伪类等)的性能并不好,主要应该影响的还是浏览器渲染时候的回流(reflow)和重绘(repain)的等的性能(个人理解)。然后要讲正题啦!nth-of-type和nth-child这两个选择器是很容易混淆的两个伪类选择器, 功能都是用来选择父元素的第几个孩子。nth-child假设有一个无序列表如下:...原创 2018-11-23 10:53:10 · 492 阅读 · 0 评论 -
CSS中的white-space, word-wrap, word-break(较浅显,待后续修正)
whie-space, word-wrap, word-break这三个css属性大致看来都是控制行内字符换行规则的,其中:white-space的值有:white-space: normalwhite-space: nowrapwhite-space: prewhite-space: pre-wrapwhite-space: pre-linewhite-space: inher...原创 2018-08-10 16:36:45 · 4390 阅读 · 0 评论 -
CSS布局技巧(待补充)
1、 两列布局float +clearfix&amp;lt;div class=&quot;content1 clearfix&quot;&amp;gt; &amp;lt;div class=&quot;left1&quot;&amp;gt; left &amp;lt;/div&amp;gt;原创 2018-06-27 08:25:30 · 108 阅读 · 0 评论 -
CSS实现图片水平和垂直居中
CSS实现图片垂直和水平居中: 方法一:利用背景图 html { width: 100%; height: 100%; backround: url(logo.png) center center no-repeat; } 方法二:绝对定位 img { position:absolute; top:50%; left:50%; ...原创 2018-06-09 14:12:36 · 186 阅读 · 0 评论 -
CSS中width,min-width和max-width之间的联系
字面意思来看,width,min-width和max-width分别代表的是元素的宽度,最小宽度和最大宽度,那么他们之间有什么联系呢?<div class="container"></div><style>.container { background-color: red; height: 100px; width: 10...原创 2018-06-07 17:11:41 · 9621 阅读 · 4 评论 -
CSS中width:100%和width:auto的区别
<div class="parent"> <div class="child"> </div></div><style>.parent { width: 100px; background-color: red;}.child { width: 100%; backgro原创 2018-06-07 16:41:31 · 11301 阅读 · 0 评论 -
CSS清除浮动
众所周知,当子元素设置成浮动时,由于子元素脱离了文档流,父元素会撑不开,高度为0,这样导致后面的元素样式错乱,因此可以向下面这样做来清除浮动:主页图片日志留言联系方式.clearfix:after {content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden;}/***兼原创 2018-01-28 14:37:43 · 133 阅读 · 0 评论 -
CSS定位
css中元素的四种定位方式:static: 默认定位方式,在文档流中;absolute: 绝对定位,相对于用position进行过定位的父元素进行定位,用static进行定位的除外,因为static为默认定位方式,如果父元素没有用position进行定位,则基于html进行定位,脱离了文档流;relative: 相对定位,基于其原位置进行定位,即基于没有设置定位方式(默认static)原创 2017-12-24 15:33:40 · 155 阅读 · 0 评论 -
CSS3实现上下滑动和左右摆动
初接触CSS,在学习基础CSS知识的同时试着接触CSS3的有关知识。今天首先学习到CSS3的 animation属性,将图片实现上下滑动: Starbuzz Coffee #award { position: absolute; top: 30px;left: 365p原创 2017-12-24 14:07:28 · 15305 阅读 · 0 评论