常见CSS布局

实现底部footer

外部有一个wrapper容器，要min-height:100%;撑满页面高度。
footer参考wrapper绝对定位，用bottom:0定在底部
main用来放置页面主体内容，padding-bottom与footer高度一致，用于页面长的时候给footer撑出高度

文本不换行省略效果

white-space: nowrap
overflow:hidden
text-overflow:ellipsis

瀑布流原理

瀑布流布局要求要进行布置的元素等宽，然后计算元素的宽度与浏览器宽度之比，得到需要布置的列数。
创建一个数组，长度为列数，里面的值为已布置元素的总高度（最开始为0）
然后将未布置的元素依次布置到高度最小的那一列，就得到了瀑布流布局。

transition一个速记法：transition: css属性动画持续时间动画类型动画延迟时间；

两列布局一列宽度固定，一列宽度不固定

方法一：把side改写为绝对定位
.side{    
    position:absolute;left:0;top:0;    
    width:200px;height:200px;    
    background:red;    
}    
.main{    
    margin-left:210px;    
    background:blue;    
    height:200px;    
}  
方法二：把side改写为浮动
.side{    
    width:200px;    
    height:200px;    
    float:left;    
    background:red;    
}    
   
.main{    
    margin-left:210px;    
    background:blue;    
    height:200px;    
} 
方法三：flex布局
.parent {
    display:flex; 
}       
.side{    
   width:200px;    
   height:200px;    
    background:red;    
    margin-right:10px;    
}    
.main{    
    background:blue;    
    height:200px;    
    flex:1;    
}
方法四：利用BFC不与浮动元素重叠的特性

.side {    
  width: 200px;    
  height: 100px;    
  float: left;    
  background: red;    
  margin-right: 10px;    
/* 这里没有flex才能按自身设定的宽度渲染 */
/* 如果有了flex则宽度设定无效 */
}    
.main {    
  /* 创建BFC   */   
  overflow: hidden;    
  background: blue;    
  height: 100px;    
}

如何进行水平垂直居中(行内块元素)

方案一：用display: table-cell;
内部元素如果是display:block;则无效
.box{
    display: table-cell;
    vertical-align:middle;/*垂直居中*/
    text-align:center;/*水平居中*/
}
方案二：单纯flex布局
.box{
    display: flex;
    justify-content:center;/*水平居中*/
    align-items:center;/*垂直居中*/
}
方案三：flex与margin:auto;结合
.box{
    display: flex;
}
button{margin: auto;}
方案四：绝对定位与0
.box{
    position:relative;/*需要父元素定位*/
}
button{
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}

三栏水平布局，其中 left 、 right 分别位于左右两边， left 宽度为 200px ， right 宽度为 300px ， main 处在中间，宽度自适应。

/*三栏结构大致如下*/

    main
    left
    right

考查box-sizing属性 left center right

方法一：添加空div标签 clear:both 方法二：父级标签定义伪类after .float-div::after{ display: block; clear: both; content: ''; height: 0px; } 上一级父元素：zoom：1；//解决IE67兼容问题方法三：父级标签overflow:hidden .float-div{ overflow:hidden; }

meta标签的使用 meta标签共有两个属性：http-equiv和name; name属性 name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。其中name属性主要有以下几种参数: Keywords(关键字) 举例：＜meta name ="keywords" content="science, education,culture,politics,ecnomics，relationships, entertaiment, human"＞ http-equiv属性 http-equiv顾名思义，相当于http协议中文件头的作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content。其中http-equiv属性主要有以下几种参数： content-Type(显示字符集的设定) 用法：＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞ Expires(期限) 用法：＜meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT"＞注意：必须使用GMT的时间格式。 Pragma(cache模式) 说明：禁止浏览器从本地计算机的缓存中访问页面内容。用法：＜meta http-equiv="Pragma" content="no-cache"＞ Refresh(刷新) 说明：自动刷新并指向新页面。用法：＜meta http-equiv="Refresh" content="2; URL=http://www.root.net"＞注意：其中的2是指停留2秒钟后自动刷新到URL网址。 Set-Cookie(cookie设定) 说明：设置cookie, 如果网页过期，那么存盘的cookie将被删除。用法：＜meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/"＞注意：必须使用GMT的时间格式。 Window-target(显示窗口的设定) 说明：强制页面在当前窗口以独立页面显示。用法：＜meta http-equiv="Window-target" content="_top"＞注意：用来防止别人在框架里调用自己的页面。

常见CSS布局

你可能感兴趣的:(常见CSS布局)