CSS知识理解
文章平均质量分 92
奔跑的前端er
这个作者很懒,什么都没留下…
展开
-
CSS常考布局的实现方式
首先给出基本的HTML结构<div id="wrap"> <div id="sidebar" style="height:240px;">固定宽度区</div> <div id="content" style="height:340px;">自适应区</div></div><div id="footer">后面的一个DIV,以确保前面的定位不会导致后面的变形</div>方法一固定宽度区浮原创 2017-08-08 16:42:51 · 315 阅读 · 0 评论 -
HTML5 与 CSS3 新特性
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来原创 2017-09-01 15:32:43 · 1734 阅读 · 0 评论 -
CSS多列
通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 多列属性: column-count column-gap column-rule设置多列只需要将实际需要分列的文本放在div中就可以自动多列布局。CSS3 创建多列column-count 属性规定元素应该被分隔的列数CSS3 规定列之间的间隔column-gap 属性规定列之间的间隔...原创 2017-10-15 20:50:44 · 459 阅读 · 0 评论 -
CSS动画
<!DOCTYPE html><html><head> <style> div { width:100px; height:100px; background:red; position:relative; ...原创 2017-10-15 20:43:41 · 319 阅读 · 0 评论 -
定宽+流动布局
<!DOCTYPE html><html><head> <style> aside{ width: 200px; height: 200px; background: #5A6A94; } section{ ...原创 2017-09-24 19:49:56 · 712 阅读 · 0 评论 -
等高布局
padding补偿法 首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值,父容器设置超出隐藏,这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则父容器的高度被撑到它里面最高那列的高度,其他比这列矮的列则会用它们的padding-botto原创 2017-09-21 22:27:19 · 193 阅读 · 0 评论 -
CSS中position绝对定位和相对定位
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常原创 2017-08-21 22:12:09 · 585 阅读 · 0 评论 -
CSS布局方式总结
一、显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline)+块元素(block) 1.3 行内块元素(inline-block) 1.4 flex 1.5 none 二、位置(position) 三、补充 3.1 浮动(float) 3.2 层叠(z-index) 3.3 溢出原创 2017-08-16 14:06:47 · 2013 阅读 · 2 评论 -
CSS居中及布局
CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中。下面详细介绍这几种情况。水平居中使用inline-block和text-aligh实现.parent{text-align: center;} .child{display: inline-block;} 优点:兼容性好;缺点...原创 2017-09-01 15:41:31 · 431 阅读 · 0 评论 -
一劳永逸的flex布局
实现水平垂直居中的方式: 水平居中,垂直居中,flex布局,水平垂直居中方式总结,大全原创 2017-08-19 11:56:10 · 521 阅读 · 0 评论 -
BFC原理以及外边距合并
对一个元素设置css,首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子。 - Formatting Context:指页面中一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。 - BFC:块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level Box参与,该区域拥有一套渲染规则来约束块级盒子的布局原创 2017-08-17 17:29:03 · 618 阅读 · 0 评论 -
图解offsetWidth等
图片源于:http://blog.csdn.net/lzding/article/details/46371609原创 2017-08-22 22:07:59 · 503 阅读 · 0 评论 -
CSS知识梳理之---margin
梳理完position,来到margin,每个知识点一个一个攻破啦~~ 虽然margin可以应用到所有元素,但display属性不同时,表现也不同 1. block元素可以使用四个方向的margin值 2. inline元素使用上下方向的margin值无效 3. inline-block使用上下方向的margin负值看上去无效Note:inline-block使用上下方向的margin负值只原创 2017-08-22 10:17:13 · 453 阅读 · 0 评论 -
sticky-footer实现方式
绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果:当页面内容超出屏幕,页脚模块会像正常页面一样,被推到内容下方,需要拖动滚动条才能看到。而当页面内容小于屏幕高度,页脚模块会固定在屏幕底部,就像是底边距为零的固定定位。一、经典套路这种套路的思路是,给内容区域设置 min-height: 100%,将 footer 推到屏幕下方然后给 footer 添加 margin-top,其原创 2018-03-22 20:20:20 · 315 阅读 · 0 评论