css居中方法与双飞翼布局
居中
类型 |
方法 |
对应属性 |
|
水平 垂直 水平&垂直 |
1.父元素使用外边距自动 2.子元素显示行内块级元素,写入内容,父元素设置文本居中 3.给父元素开启非绝对和固定定位作为子元素开启绝对定位的参考脱离文档流 3-1.设置相对偏移量50% 3-2.使用平移设置水平偏移量适当修改 3-3.此属性是当对于子元素位置平移,括号值正值向右平移,负值向左平移 |
水 平 |
margin: |
display: text-align: |
|||
position: position: transform的translateX() |
|||
垂 直 |
margin: |
||
display: vertical-align: |
|||
position: position: transform的translateY() |
|||
水平 & 垂直 |
margin: |
||
display: vertical-align: text-align: |
|||
position: position: transform的translate(x,y) |
布局
1.两列布局
:两个块级元素显示水平排列效果
定宽
—— 两列定宽 两个子元素浮动 父级设置高度避免塌陷定宽
—— 一列定宽,一列自适应【根据定宽的列适应剩余所有空间】一起浮动
– 前面元素开启相对定位,后面元素设置左内边距向右移动,怪异盒子
– 相对定位优先级比浮动的优先级高
2.三列布局
定宽
—— 左边与中间定宽,右边自适应定宽
—— 左右定宽,中间自适应
– 中间为页面主题内容利于被搜索引擎抓取靠前排
3.圣杯布局(3行3列)
header(1st
row)nav(1st
col.)
article(2nd
col.)
aside(3rd
col.)
{
2nd row }footer(3rd
row)TODO 思路:1.创建header头 、div容器及其3个子元素div,语义化 - 用nav/article/aside分别替代三个子元素div
TODO 2.给父级设置class属性值随意,子级class属性分别设置为center,left,right
TODO * center为页面主体内容利于搜索引擎抓取,排列要靠前
TODO * 设置样式 - 头、尾、父级及3个子级高度设置一样
TODO * 父级宽度减去left与right的宽度
TODO 3.header与footer设置宽高、背景色、外边框、外边距自动-居中
TODO 4.left与right设置宽高、背景色 ; center设置宽100%自适应高与前面一致
TODO 5.3个子元素一起左浮动
TODO 6.容器内边距留白给左右
TODO 7.left - 左外边距值为-100%(向左移动一行) , 相对自己左移动100px
TODO 8.right - 左外边距距center-100px向左移动100px , 浮动后排不下本应在center右边 ,相对自己右移动100px
4.双飞翼布局
思路:
TODO 思路:1.创建header头 、div容器及其3个子元素div,语义化 - 用nav/article/aside分别替代三个子元素div
TODO 2.给父级设置class属性值随意,子级class属性分别设置为center,left,right
TODO * center为页面主体内容利于搜索引擎抓取,排列要靠前
TODO * 设置样式 - 头、尾、父级及3个子级高度设置一样
TODO * 父级宽度减去left与right的宽度
TODO 3.header与footer设置宽高、背景色、外边框、外边距自动-居中
TODO 4.left与right设置宽高、背景色 ; center设置宽100%自适应高与前面一致
TODO 5.3个子元素一起左浮动
TODO 6.left - 左外边距值为-100%(向左移动一行)
TODO 7.right - 左外边距距center-100px向左移动100px , 浮动后排不下本应在center右边
TODO 8.容器的宽度改为800px
***************************************************************************************
TODO * 双飞翼优化了center两边被覆盖问题
TODO 9 - 在center中再加一个子元素inner作为内容区,使center这个容器覆盖而内容区不被覆盖
TODO 10 - 设置inner的内边距左右100px正确显示内容
css居中方法与双飞翼布局的更多相关文章
- CSS居中方法
css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...
- CSS盒子模型与双飞翼布局
盒子模型&双飞翼实现 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding).实际内容(content)四个属性. ...
- css多种方式实现双飞翼布局
圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...
- CSS 居中方法集锦
记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align 1.2 margin 1.3 line-height 1.4 p ...
- CSS 居中方法集锦(*******************************)
记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align1.2 margin1.3 line-height1.4 pa ...
- CSS居中方法搜集
转自这里:http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/ 兼容低版本IE的方法 html使用表格结构 背景 ...
- css居中方法小结
水平居中 行内元素 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 块状元素 当被设置元素为 块状元素 时用 text-align: ...
- css居中方法详解
水平居中: 通过设置父元素,让子元素内容居中:text-align:center; 通过设置子元素本身,让子元素居中:margin:0 auto; 以上方法生效的前提条件是子元素没有被float元素影 ...
- css 居中方法
垂直居中 利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的. .ghost-center { po ...
随机推荐
- 织梦CMS首页调用分类信息栏目及列表方法
不懂代码,搜索学习一晚上,都是说调用特定栏目分类信息列表的,用这个代码 {dede:arclistsg row='10' titlelen='24' orderby='pubdate' channel ...
- Yourphp系统发生错误
今天早用YP更新缓存,弹出如下错误: 随之而来的是错误信息是: [php] view plain copy [14-12-03 10:48:12] E:\wwwweb\xmwszt360\Core\L ...
- 积分图实现均值滤波的CUDA代码
没想到我2010年买的笔记本显卡GT330M 竟然还能跑CUDA,果断小试了一把,环境为CUDA6.5+VS2012,写了一个积分图实现均值滤波.类似于OpenCV的blur()函数. 使用lena. ...
- P2P视频模块
P2P视频模块数据手册 公 司 : 深圳市万秀电子有限公司 网 站 : http://www.wanxiucx.com 总 机 : 0755-23215689 联系人: 张先生 手 机 : 1 ...
- 2.supervisor实时监控程序存活状态
1.supervisor是一款python开发的一个client/server服务,是一款进程管理工具,支持linux/unix系统,但是不支持windows系统. 它可以很方便的监听.启动.停止.重 ...
- JVM内存划分简介
参考:深入理解JAVA虚拟机(第二版)
- linux_rsync定时备份
在linux系统中,需要注意空格使用,有着整体性原则,并且注意大小写问题 Rsync数据同步工具 开源.快速.多功能.可实现全量和增量的本地或远程 具有本地和远程两台主机之间数据快速同步镜像.远程备份 ...
- TypeError: 'encoding' is an invalid keyword argument for this function
python 2.7 问题 data_file = open("F:\\MyPro\\data.yaml", "r", encoding='utf-8') 运行 ...
- 开发步骤Dubbo、spring mvc、springboot、SSM整合开发步骤
一.Dubbo开发步骤: 链接:https://pan.baidu.com/s/1pMPO1kf 密码:9zaa 第一: 1.创建consumer工程2.在pom.xml文件下添加配置3.添加appl ...
- 企业级分布式存储应用与实战FastDFS实现
FASTDFS是什么 FastDFS是由国人余庆所开发,其项目地址:https://github.com/happyfish100 FastDFS是一个轻量级的开源分布式文件系统,主要解决了大容量的文 ...