
css
RheaWang
这个作者很懒,什么都没留下…
展开
-
关于z-index的理解
1. 层叠的黄金准则: 1.当具有明显的层叠水平标示的时候,如识别的z-index值,在同一个层叠上下文领域,层叠水平值大的覆 盖小的; 2.当元素的层叠水平一致,层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素。2 层级关系的比较 相对于同级比较,默认(position:static)情况下文档流后面的元素会覆盖前面的;对于同级元素,position不为st原创 2017-07-06 13:06:10 · 665 阅读 · 0 评论 -
三栏布局
传统的三栏布局主要是圣杯布局和双飞翼布局。主要是,中间布局自适应,两边盒子宽度固定。 1.圣杯布局实现的思想中间盒子的宽度设置为 width: 100%; 独占一行;使用负边距(均是 margin-left)把左右两边的盒子都拉上去和中间盒子同一行; .left {margin-left:-100%;} 把左边的盒子拉上去 .right {margin-left:-右边盒子宽度px转载 2017-07-06 15:06:11 · 268 阅读 · 0 评论 -
css之居中布局
1. 水平居中针对于行内元素(inline):text-align:center;针对于块级元素(block):宽度设置为auto;针对于多个块级元素,对父元素设置text-align:center;对子元素设置display:inline-block;或者使用flex布局。2. 垂直居中对于行内元素(inline) 单行:设置上下padding相等;或者设置line-height原创 2017-07-06 15:21:47 · 407 阅读 · 0 评论 -
css之BFC
BFC定义:Block formatting context ,它是块盒子的布局发生,浮动互相交互的区域。主要是可以解决外边距合并,清除浮动,和布局。 什么情况下会触发BFC呢? 一个块格式化上下文包括创建它的元素内部的所有内容,除了被包含于创建新的块级格式化上下文的后代元素内的元素。 块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的原创 2017-07-23 11:38:15 · 314 阅读 · 0 评论 -
Bootstrap相关特性
Bootstrap为什么是移动设备优先 当不加媒体查询样式时默认的是超小屏幕(<768px)。也就是对应于移动设备上的样式,所以称之为移动设备优先。栅格系统 在栅格系统中,是通过媒体查询的方式来创建关键的分界点阈值。系统自动分为12格。原创 2017-08-07 20:32:00 · 664 阅读 · 0 评论 -
CSS保持长宽比
CSS保持长宽比,主要是用于响应式设计的iframe、img、video之类的元素。关于实现长宽比,有以下几种方案:垂直方向的padding 主要是利用padding-top或者padding-bottom的百分比来实现容器长宽比。padding的百分比值是根据容器的width来计算的。且容器内所有元素都需要采用position:absolute。padding&calc() 采用的是pa原创 2017-08-09 20:42:44 · 4237 阅读 · 0 评论 -
左边定宽,右边自适应宽度布局
浮动布局 margin+浮动定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding:0; } #lef原创 2017-08-10 20:11:27 · 513 阅读 · 0 评论 -
css继承和非继承属性
不可继承的:display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-brea原创 2017-08-06 11:55:53 · 470 阅读 · 0 评论 -
CSS合集
position属性 三种定位机制:普通流,浮动和绝对定位。 position属性分别为static|relative|absolute|fixed|sticky|inherit static为元素默认属性,没有定位(忽略z-index,left,bottom,right,top声明) relative是相对于自身原本的位置进行偏移,可设置left,bottom等属性进行原创 2017-08-29 22:48:17 · 829 阅读 · 0 评论