css
YumEllen
just do it.
展开
-
css常用水平和垂直居中方法总结
垂直居中内联(*)元素单行padding-top=padding-bottomheight=line-height多行padding-top=padding-bottom 但当文本所在的元素是一个表单元格时(无论是html的table还是通过css使其表现为表格)不奏效,可用下面这个方法;vertical-align:middle;flexbox“重影元素”技术,设置一...原创 2020-03-31 18:08:54 · 169 阅读 · 0 评论 -
css3属性之边框圆角、背景与渐变
css3之圆角、背景及渐变border-radius兼容性:IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Operaborder-radius 属性允许我们为元素添加圆角边框,是一个最多可指定四个 border -*- radius 属性的复合属性。拆开来就是 border-top-left-radius、border-top-right-radius、border...原创 2020-03-14 11:50:50 · 611 阅读 · 0 评论 -
css(3)常用选择器及其优先级
css选择器基本的元素、id、类选择器等就不讲了,主要总结css3选择器。一、基本选择器1.子元素选择器格式:父元素 > 子元素兼容性:IE8+、FireFox、Chrome、Opera、Safari注意:子元素和后代的区别,子元素选择器是选择直接后代,就是它的儿子,而不是孙子、曾孙子。2.相邻兄弟选择器格式:元素 + 相邻兄弟元素兼容性:IE8+、FireFox、Chro...原创 2020-03-08 16:43:47 · 400 阅读 · 0 评论 -
圣杯布局和双飞翼布局是什么
圣杯布局和双飞翼布局是什么圣杯布局和双飞翼布是左右两栏固定宽度,中间部分自适应的三栏布局,并且要求中间栏要优先渲染。圣杯布局是歪果仁提出的,双飞翼布局是圣杯布局的优化版,由淘宝UED提出。它们的效果图类似,但是在解决”中间栏div内容不被遮挡“问题上的实现方法不同。效果图:圣杯布局代码:<!--html--> <div class="container">...原创 2020-02-16 23:19:09 · 222 阅读 · 0 评论 -
position:sticky
sticky又名磁贴定位/粘性定位/吸附定位是relavtive+fixed的完美结合,开始时表现为relative,当到达某特定位置时表现为fixed,制造出吸附效果,适用于一些特殊场景特别是一些导航栏。比如说当我们想要把导航固定在页面头部时,但该导航栏上还有页面头部需要展示,如果直接用fixed,那么会将页面头部挡住,这时候就可以用sticky了。sticky语法position:s...原创 2020-02-13 22:28:13 · 333 阅读 · 0 评论 -
css高度塌陷及其解决方法
高度塌陷一、什么是高度塌陷在文档流中,当父元素没有设置高度的时候,父元素的高度就取决于子元素的高度,也就是常常说的“由子元素撑开”。当子元素设置为浮动,脱离了文档流,这时候就会造成父元素的高度塌陷,因为没有子元素“撑着它的高度”。这样会导致父元素后面的元素往上移,造成布局混乱。那么应该怎么解决咧?二、解决办法在后面增加空的子元素,设置clear:both要注意这个清除浮动的对象并不...原创 2019-11-30 22:22:35 · 223 阅读 · 0 评论 -
谈谈外边距合并及BFC
外边距合并 margin collapse在块级盒子中,上下外边距可能会出现折叠,即合并成值比较大的那个外边距,这种情况叫外边距合并。注意,指的是垂直方向上的margin。一、出现外边距合并的情况1、相邻元素之间2、父元素与其第一个或最后一个子元素之间父元素的上外边距和第一个子元素的上外边距父元素的下外边距和最后一个子元素的下外边距3、空元素自己的上下外边距会合并举一个例子:...原创 2019-11-30 21:43:07 · 255 阅读 · 0 评论 -
css盒子模型(标准盒子模型及代替盒子模型)
盒子模型:css将html元素看作一个个盒子,来设计和布局。盒子有它们的属性,盒子之间也可嵌套属性:margin、padding、border、content根据display属性值的不同,如,block\inline-block\inline(默认),可设置为块模型\内联块模型\内联模型分类:标准模型、IE模型(替代盒子模型)1.1块模型独占一行width、height有效,...原创 2019-11-30 21:40:14 · 452 阅读 · 0 评论