学习CSS（页面布局篇）

2019独角兽企业重金招聘Python工程师标准>>>

######图文混排

*{clear:both;/*清除浮动*/
}

<div><a href="#" target="_blank"><img align="left" src="./fire.jpg"></a><span>图文混排右侧标题</span><p>图文混排绕图片段落文字</p>
</div>

######几种不同的居中布局方法

*{line-height:25px;height:25px;/*文本内容垂直居中：行间距等于行高*/`width:400px;margin:0 auto;/*固定宽度且居中*/
}

######由浮动引起的布局问题的解决方案

######绝对定位与相对定位

######适配iPad屏幕的布局

######经典的Clearfix和升级版的Clearfix 经典的，单独添加的div在IE和Firefox中会引起高度变化，父元素使用overflow：hidden时，如果子元素定位到部分或全部在父元素之外，父元素会对超出子元素部分进行裁剪。

.clearfix{clear:both;height:1px;margin-top:-1px;/*消除高度影响*/overflow:hidden;/*可清除浮动，但有副作用*/
}

升级版的Clearfix

######滚动条的控制

*{overflow:scroll;/*强制显示*/ overflow:hidden;/*隐藏滚动条*/ overflow-x:scroll;/*强制显示*/overflow-x:hidden;/*隐藏IE的水平滚动条*/    overflow:-moz-scrollbars-horizontal;  overflow:-moz-scrollbars-vertical;/*强制显示Mozilla的垂直滚动条，即使需要水平滚动条时也不会出现，上一句同理*/
}

######CSS3文本分列针对不同内核的浏览器，分别加上-webkit-或-moz-,文本自适应text-align:justify;

column-count定义栏目的数量
column-width定义每栏的宽度
column-gap两栏之间的距离
column-rule每栏之间的边框
column-rule-width每栏之间边框宽度
column-rule-style每栏之间边框样式（实线、虚线）
column-rule-color每栏之间边框的颜色
column-span定义元素可以在栏目上定位显示

######Flash参数设定引起的布局问题浮动层浮动到Flash上方时，可在<object>与</object>间加入<param name="wmode" value="opaque"/>或在<embed/>中加入wmode="opaque"

wmode=window 在Web页上用影片自己的矩形窗口来播放应用程序，“Window”表明此Flash应用程序与HTML没有任何交互，并且始终位于顶层。
wmode=opaque使应用程序隐藏页面上位于它后面的所有内容。
wmode=transparent 使HTML页的背景可以透过应用程序的所有透明部分显示出来，可能会降低动画性能。

######Metro和Flexbox布局风格

转载于:https://my.oschina.net/jediKnight/blog/512690

学习CSS（页面布局篇）相关推荐

一步一步构建手机WebApp开发——页面布局篇
继上一篇:一步一步构建手机WebApp开发--环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...
开启Fluter基础之旅三-------Material Design风格组件、Cupertino风格组件、Flutter页面布局篇...
Material Design风格组件: 继续接着上一次https://www.cnblogs.com/webor2006/p/12545701.html的Material Design进行学习. A ...
20个不错的CSS页面布局相关资源推荐
本篇文章搜集整理的是CSS页面布局的一个很长的列表.如果你时间很少,那么可以下载已经准备好的CSS页面布局,如果你想进行个性化的尝试,下面列出了一些站点你可以不需过多努力而达到效果. 漂亮.免费的CS ...
html超链接样式顺序,CSS页面布局常用知识汇总（超链接样式）
CSS中的知识非常多,我们不可能全都记得住.闲暇时整理了一些CSS页面布局的常用知识,这篇文章就和大家分享一下CSS超链接样式的常用知识.需要的朋友可以参考一下,希望可以帮助到你. 设计网页时,我们可 ...
CSS页面布局（超详解）
目录 1 CSS页面布局概述 1.1 概述 1.2 网页栏目划分 1.3 元素类型转化 1.3.1 块元素 1.3.2 行内元素 1.3.2 块元素和行内元素的转换 1.4 定位 1.4.1 静态定位 ...
vue在html中写style,vue开发之style（六）（CSS页面布局之样式、背景、文字）
最近在学vue开发,并且将学习笔记与大家一起分享,前面讲了vue环境的搭建: 基于vscode的Vue前端环境搭建问题及解决办法还有vue的使用,重点就在webpack这个: vue开发之webpa ...
分享 10 个常见的 CSS 页面布局代码片段
大家好,本篇文章将分享我们业务中很常见的10个页面布局代码片段,这10 种页面布局很常见,实现方式也有很多种,本篇文章将用最简单的新方式进行实现,希望对大家有所启发. 1.Card layout(卡片 ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
day54 css页面布局
目录一网页布局方式二标准流三浮动流一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad++等等而网页的 ...
CSS页面布局之盒子模型
目录 1 盒子模型 1.1 看透网页布局的本质 1.2 盒子模型组成 1.3 边框(border) 1.4 表格的细线边框 1.5 边框会影响盒子实际大小 1.6 内边距(padding) 案例:新浪 ...

学习CSS（页面布局篇）

学习CSS（页面布局篇）相关推荐

最新文章

热门文章