CSS
那等雨停吧
愿你有梦可依,有树可栖。
展开
-
绝对定位 与 z-index
运用绝对定位时,因为同级absolute元素偏移值互不影响存在覆盖现象,进一步的探索有益于以后的灵活应用。默认z-index时 不特别的设置z-index,z-index=0时他们的层叠次序只与他们的祖辈长幼和元素顺序有关。 同级absolute元素永远高于文档流。 body,html{ margin: 0; padding: 0; } .c原创 2016-05-05 14:07:39 · 1017 阅读 · 0 评论 -
前端夯实基础(八)--- link与@import
link属于html标签,而@import是css提供的页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。link方式样式的权重高于@import的。...原创 2019-09-08 00:00:57 · 270 阅读 · 0 评论 -
前端值得一探究竟特辑 --- BFC(块级格式化上下文)、BFC清除浮动、BFC自适应两栏布局
参考文章以前对于BFC的理解相当肤浅和片面,这次决定把BFC好好理解清楚。1、块级格式化上下文(Block formatting context)并不是块级元素就是BFC呀,哎哟我滴小撒瓜···哭了···太难了···BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Bloc...原创 2019-08-29 14:07:14 · 167 阅读 · 0 评论 -
前端夯实基础(七)--- 字体样式font属性
font-style、font-weight、font-size、line-height、font-family、font皆可被行内元素继承。1、font-stylenormal:正常italic:斜体2、font-weight数字以100为步长。400:normal700:bold3、font-sizepx:通常使用双数。任意浏览器的默认字体大小都是16px。em:...原创 2019-08-28 21:54:43 · 582 阅读 · 0 评论 -
前端值得一探究竟特辑 --- 字体大小单位px、em、rem、%
字体大小单位px、em、rem原创 2019-08-28 21:46:45 · 412 阅读 · 0 评论 -
前端夯实基础(六)--- CSS的四个伪元素+彩蛋
1、:first-line用于向文本的首行设置特殊样式,只能用于块级元素。p{ width: 200px; color: #c0c0c0;}p:first-line { color: skyblue;}<p>海洋几乎涵盖所有的动物种类。海洋动物门类繁多,各门类的形态结构和生理特点可以有很大差异。微小的有单细胞原生动物,大的有长可超过30 m、重超过 1.90...原创 2019-08-22 13:56:24 · 311 阅读 · 0 评论 -
前端夯实基础(五)--- CSS选择器及权重+彩蛋
CSS 参考手册+练习地址1、三种样式表行内样式表<h1 style="color:pink; height:20px"> 行内样式表 </h1>内部样式表:位于 <head> 标签内部被<style>包裹。<head><style> h1 {color:pink}</style><...原创 2019-09-08 22:34:20 · 140 阅读 · 0 评论 -
前端值得一探究竟特辑 --- 特殊行内元素img
可设置宽高的行内元素图片预加载占位CSS3新增属性原创 2019-08-20 15:10:34 · 233 阅读 · 0 评论 -
display、visibility、opacity、rgba、z-index隐藏元素的区别
display: none;1、浏览器不会生成属性为display: none;的元素。 2、display: none;不占据空间(毕竟都不熏染啦),所以动态改变此属性时会引起重排。 3、display: none;不会被子类继承,但是···子类是不会显示的,毕竟都一起被kill啦。 4、display: none;是个尴尬的属性,translate对她无效。(毫无争议)visibility原创 2016-07-19 18:03:24 · 3969 阅读 · 0 评论 -
Flex实现环绕布局
html,body{ width: 100%; height: 100%; } html,body,ul,li,a{ padding: 0; margin: 0; list-style-type: none; text-decoration: none; } .sup{原创 2016-05-08 12:09:36 · 2868 阅读 · 0 评论 -
盒子模型
IE盒子模型和标准盒子模型都是由四个部分组成的:margin,border,padding,content这四个部分!!! 在标准盒子模型中content是一个独立的! 在IE盒子模型中content包含了border,padding,是一个整体原创 2016-04-13 17:56:52 · 430 阅读 · 0 评论 -
栅栏布局
.col-xs- 超小屏幕 手机 <768px.col-sm- 小屏幕 平板 >=768px.col-md- 中等屏幕 >=992px.col-lg- 大屏幕 >1200px原创 2016-04-13 18:11:57 · 931 阅读 · 0 评论 -
浏览器css渲染差异
火狐浏览器中,非float的div前面有同一父级的float的div,此div若有背景图,要使用clear:both,才能显示背景图,而IE6.0中不用使用clear:both在[text-decoration:underline]的属性下,IE6.0显示的下划线会比FireFox低一点。在FireFox中,部分笔画会在下划线的下面1个象素左右。IE6.0的div的内嵌div可以把父级的高度撑大原创 2016-04-13 18:31:16 · 916 阅读 · 0 评论 -
Flexbox布局笔记
浏览器支持情况除了任性的IE,其他浏览器可谓是春光无限,既然如此,那就爽爽的用起来吧。影响Flex布局以后,子元素的float、clear和vertical-align属性将失效FlexBox我们使用Flex布局时,都是构建一个Flex盒子,然后去设置盒子里的子元素。 FlexBox有哪些属性 首先肯定是要让她是一个FlexBoxdisplay: -webkit-flex; /* Webkit内原创 2016-04-14 14:44:35 · 484 阅读 · 0 评论 -
Flex布局实例
IE10及以上待考究,以下不支持·····#固定aside,弹性articlehtml<div class="container"><section> <aside> 我是侧边菜单,固定宽度150px,么么哒! </aside> <article> 我是主要内容。弹性伸缩,思密达! </article></section></di原创 2016-04-14 15:11:10 · 510 阅读 · 0 评论 -
绝对定位
position:absolute对文档的影响首先明确绝对定位的参考:1、如果自己没有指定宽高,宽高以设置了position:relative的祖先元素为参考对象,如果没有祖先元素设置了position:relative,则以浏览器窗口为参考。 2、父元素如果没有设置固定高度将崩塌。自己没有设置TRLB:以父元素content左上角为原点因为会被父元素的margin和padding影响。 如果父原创 2016-05-05 12:52:09 · 520 阅读 · 0 评论 -
前端值得一探究竟特辑 --- 五种垂直居中
1、利用inline元素和伪元素设置伪元素。vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。即:有两个行内元素a和b,a和b都是img,如果a加了vertical-align:middle样式,b的 底部(基线) 就会对齐a的中间位置;如果a和b都加了一个vertical-align:middle样式。那么就互相对齐了对方的中间位置;也就是它们在垂...原创 2019-09-16 10:48:04 · 382 阅读 · 0 评论