css之布局
布局一直是页面制作很重要的部分,有个良好的布局不仅在页面上呈现很好的效果,还对后续功能扩展有重要的作用。本文主要讨论一下几种布局:
水平居中布局
水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式。
(1)文字水平居中 text-align: center
设置容器盒子text-align: center;
(2)文本/盒子水平居中 table
display:table; margin:0 auto;
(3)盒子水平居中 margin
子容器定宽+margin: 0 auto;
(4)绝对定位
position: absolute;
left: 50%;
transform: translate(-50%);
(5) flex+justify-content
display: flex;
justify-content: center;
(6)父flex + 子margin: 0 auto;
垂直居中布局
(1)单行文字垂直居中
设置容器盒子 text-align: center; line-height: 容器的高度
(2)文本+盒子在父容器中垂直居中 table
父容器:
display: table-cell;
vertical-align: middle;
(3)display:inline-block;+vertical-align:middle;+line-height
在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;
注意:只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。
(4)绝对定位
子容器:
position: relative;
top: 50%;
transform: translate(0,-50%);
background-color: red;
(5)flex布局
.parent{display: flex;
align-items: center;}
.child{background-color: blue;}
多列布局
(1) 左侧等宽,右侧自适应。
适用于定宽的一侧常为导航,自适应的一侧为内容的布局
float+margin
左:width: 200px; float: left;
右:width: 100%; margin-left: 200px;
float + overflow
左:width: 200px; float: left;
右:overflow: hidden;
flex
右:flex: 1;
table
父:display:table;table-layout:fixed;width:100%;
左,右: display:table-cell
(2) 两列定宽,一列自适应
l float+margin
左,中间:width: 200px; float: left;
右:margin-left: 左宽+右宽;
l float + overflow
左,中间:width: 200px; float: left;
右:overflow: hidden;
l flex
右:flex: 1;
l table
父:display:table; table-layout:fixed; width:100%;
子:display: table-cell;
(3) 两侧定宽,中间自适应
l float + margin负值
左、中、右左浮,
中间需要wrapper,内部margin-left:左宽;margin-right:右宽;
左,margin-right: -100%;
右,margin-left: -右宽;
center-wrapper{
width: 100%;
float: left;
}
. center{
margin: 0 200px; }
.left,. right{
width: 200px;
float: left;
}
.eight-left{
margin-right: -100%;
}
.eight-right{
margin-left: -200px;
}
l flex
中间: flex: 1;
(4) 一列不定宽,一列自适应
l flex
自适应部分:flex:1
l float+overflow
左: float: left
右:over
(5) 多列等宽布局
l flex
父:display: flex
子: flex:1
自适应布局
meta标签的实用
设置布局宽度等于设备宽度,布局viewport等于度量viewport
<meta name="viewport" content="width=device-width,initial-scale=1">
媒体查询
HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体,
而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性,
扩展了媒体类型的功能;媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成,
媒体查询中可用于检测的媒体特性有width、height和color(等), 使用媒体查询, 可以在不改变页面内容的情况下,
为特定的一些输出设备定制显示效果。
语法
@media screen and (max-width:960px){....}
<link rel="stylesheet" media="screen and (max-width:960px)" href='xxx.css' />
stracky-footer布局
(1) padding-bottom+margin负值
内容盒子padding-bottom:footer高
Footer组件margin:-footer高 auto ;
.content-wrapper{
width: 100%;
height: 400px;
padding-bottom: 50px;
background-color: #f4e6e8;
}
.content{
background-color: pink;
width: 100%;
height:35%;
}
.footer{
position: relative;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #c0f9ff;
margin:-50px auto ;
text-align: center;
line-height: 50px;
}
(2)
l flex
.wrapper{
display: flex;
flex-flow: column;
}
.content-wrapper{
flex:;
}
.footer{
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #c0f9ff;
margin: 0 auto;
text-align: center;
line-height: 50px;
}
九宫格布局
(1) flex
.flex-parent{display: flex;flex-direction: column; }
.flex-row{ display: flex;height: 33.3%;}
.flex-row > .item{flex:;}
(2) table
.table-parent{ display: table; table-layout: fixed; }
.table-row{display: table-row;}
.table-row > .item{display: table-cell; }
css之布局的更多相关文章
- css双飞翼布局
双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- 用css进行布局
用css进行布局 一,开始布局的注意事项 1.作为最佳实践,应把html(内容)和css(显示)分离: 2.网站设计主要有两大类型:固定宽度(基于像素)和响应式(也称流式,使用百分数定义) 二,构建 ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 (学习HTML过程中的小记录)
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- CSS+DIV布局初练—DIV元素必须成对出现?
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
随机推荐
- 在VS2010下打开VS2008项目的解决办法
如何在vs2010中打开vs2008项目文件? 第一步:以记事本方式打开该项目的sln解决方案,找到这两行信息,分别如下:Microsoft Visual Studio Solution File, ...
- Kindeditor 编辑区样式结构
ke-container ke-toolbar ke-edit ke-edit-iframe ke-edit-area ke-statusbar
- 常用grads函数
GrADS的函数分两类, 一类是对格点/站点数据执行运算的,这一类我们姑且称之为分析函数; 另一类是脚本编程(gs)时使用的, 这后一类我们姑且称之为脚本函数. 第一类分析函数又分为格点分析和站点分析 ...
- CSS3垂直图标菜单
在线演示 本地下载
- UNIDBgrid里动态添加clientevents实现回车替换TAB
//GRID里回车替换TABfunction cellkeydown(sender, td, cellIndex, record, tr, rowIndex, e, eOpts){ if (e.get ...
- delphi各个版本编译开关值
delphi各个版本编译开关值 {$IFDEF VER80} - Delphi 1{$IFDEF VER90} - Delphi 2{$IFDEF VER100} - Delphi 3{$IFDE ...
- 算法(Algorithms)第4版 练习 2.2.11(最终)
package com.qiusongde; import edu.princeton.cs.algs4.In; import edu.princeton.cs.algs4.StdOut; publi ...
- Python- and & or 的短路原则
条件1 and 条件2 条件1 or 条件2 短路原则 对于and 如果前面的第一个条件为假,那么这个and前后两个条件组成的表达式的计算结果就一定为假,第二个条件就不会被计算 对于or 如果前面的第 ...
- 仿新浪游戏频道js多栏目全屏下拉菜单导航条
仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...
- runtime error 的原因
1. 数组访问越界 2. 分母为 0 3. 括号 做题时偶然发现的! (详见 UVA 10158 War) 代码中出现了这种东西 else if( arefriends(x,y==-1) ) ...