一、几类视图

内联视图:inline

单行

块级视图:block

换行,有高度

行内块级视图:inline-block

单行,有高度

二、几类布局

块级布局

换行,通过设置 margin 水平居中

<div class="center-block">...</div>

source:

.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}

浮动布局

单行,具有文字环绕(与内联元素之间),包裹性(与浮动元素之间。块级,可设置高度)与破坏性(与父元素之间,无高度),不完全脱离文档腔流(仍占据空间)。

<div class="pull-left">...</div>
<div class="pull-right">...</div>

source:

.pull-left {  float: left !important;
}
.pull-right {
float: right !important;
}

source:

// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}

相关要点

①容器塌陷:

source:

<div class="box-1">
<button class="pull-right box-2">button 1</button>
<button class="pull-right box-2">button 2</button>
</div>
<button class="box-3">button 3</button>

解决方案  ——  子元素全为浮动, box-1 为塌陷容器。为 box-1 添加 clearfix 或 bfc 或设定高度(不建议指定容器高度,建议由子元素撑开)

source:

<div class="box-1 clearfix">
<button class="pull-right box-2">button 1</button>
<button class="pull-right box-2">button 2</button>
</div>
<button class="box-3">button 3</button>

附:style

<style type="text/css">
body {
margin-top: 10rem;
}
.br-grey {
border: 1px solid #ccc;
}
.br-blue {
border: 1px solid blue;
}
.br-red {
border: 1px solid red;
}
.box-1 {
display: block;
/*height: 10rem;*/
width: 50rem;
} .box-2 {
display: inline-block;
line-height: 2rem;
} .box-3 {
display: inline-block;
line-height: 2rem;
}
</style>

②将浮动元素单独封装在一起

目的——  避免浮动元素与非浮动直接接触。把所有浮动的元素封装一层不会塌陷(并且不为浮动)的父容器。(括号里表示浮动的父容器虽然也不会塌陷,但不符合要求;  主动限定容器高度也不建议使用)

<div class="bfc 或 clearfix">
<div class="br-grey box-1 pull-left ">
<button class="br-red box-2 pull-right">button 1</button>
<button class="br-red box-2 pull-right">button 2</button>
</div>
</div>
<button class="br-red box-3">button 3</button>

③若父容器同时包含浮动与非浮动元素

则只有非浮动元素会撑开容器,若父容器清除浮动,则所有元素都会撑开容器,并且以最高子元素为父容器最终高度。一个父容器中,,尽量保证子元素全部为浮动或非浮动元素,否则容易发生中心线错乱(因为不在一个流中)。

显示结果:

主动调整高度或框高,使得中心线高度一致

.box-1 {
display: inline-block;
line-height: 5rem;
width: 60rem;
padding: 2rem;
} .box-2 {
display: inline-block;
line-height: 5rem;
} .box-3 {
display: inline-block;
line-height: 2rem;
}

行内布局

单行,若设定 line-height 垂直方向自动居中。通过设定 text-align 元素将按一定顺序排列。

特点:

inline-block 与 block 元素都可以通过 text-align: center 水平居中。

如果父类 line-height 设的很高,可以使子元素垂直居中。或者 inline-block 之间是水平排列,以其中最大的行高为当前行高。

相关要点:

inline-block 相邻,如果有一方包含一个 block 块,则那一方的 高度被挤开。可能导致相邻的其它 inline-block 塌陷。解决方法是,将那个 block 添加浮动。

显示效果

<div class="container">
<div class="row">
<div class="left">33</div>
<div class="right">22
<div class="block">This is a block</div>
</div>
</div>
</div>

或者

<div class="container">
<div class="row">
<div class="left">33</div>
<div class="right">
<div class="block">block</div>22
</div>
</div>
</div>

附 style

<style>
.left {
display: inline-block;
}
.right {
display: inline-block;
}
.block {
display: block;
height: 80px;
width: 50px;
}
</style>

定位布局

-- relative

相对于元素自身最初位置进行偏移,偏移后位置跟最初位置相关联,即最初位置若受其他元素影响,会导致偏移后位置受关联影响。

-- absolute

相对于父类非默认定位,即设置了('absolute'、'relative' 或者 'fixed')父类元素进行偏移,如果都没有,则相对于  body 进行偏移。绝对脱离文档流。

三、BFC

mdn说明

四、相关布局实例

① 绝对定位实现单个元素垂直居中

a 一般用法

.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}

b css3 用法

.element {
width: 600px; height: 400px;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}

c 特殊用法

.element {
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto; /* 有了这个就自动居中了 */
}

② 行内布局实现多元素垂直居中

<ul class="tch-menu">
<li>序号</li>
<li>用户名</li>
<li>真实姓名</li>
<li>所在地域</li>
<li>院校工<br/>作单位</li>
<li>法律职业资格证书</li>
<li>联系电话</li>
<li>提交时间</li>
<li>审核人</li>
<li>状态</li>
<li>操作</li>
</ul>

附 style

.tch-menu {
display: inline-block;
background-color: #FAFCFC ;
font-size: 14px;
padding: 4px 0;
letter-spacing: -3px; /*消除行内布局间隔*/
} .tch-menu li{
vertical-align: middle;
display: inline-block;
text-align: center;
min-width: 80px;
word-wrap:break-word;
word-break:break-all;
margin: 0;
padding: 0;
list-style: none;
letter-spacing: 0; /*消除行内布局间隔*/
}

实现效果:

③ 导航条浮动布局

方案 —— 内部全为浮动元素。为保证外部高度由子元素撑开并设定上下边距,需要清除浮动并设定 padding。

<div class="br-grey box-1 clearfix">
<button class="br-red box-2 pull-right">button 1</button>
<button class="br-red box-2 pull-right">button 2</button>
<button class="br-red box-3 pull-left">button 3</button>
</div>

附:style

.box-1 {
display: block;
width: 50rem;
padding: 2rem;
} .box-2 {
display: inline-block;
line-height: 2rem;
} .box-3 {
display: inline-block;
line-height: 2rem;
}

233

样式布局与 BFC的更多相关文章

  1. CSS 布局和 BFC

    什么是 BFC 在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的.W3C对BFC的定义如下:浮动元素和绝对定位元素,非块级盒子 ...

  2. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  3. CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版

    CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...

  4. 微信小程序开发:学习笔记[4]——样式布局

    微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...

  5. CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  6. 分析CSS布局中BFC

    1.什么是BFC BFC(Block Formatting Context,块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和 ...

  7. CSS实现样式布局

    使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额.本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考. 1.有疑问,先验证 在调试时,先对您的代码进行验证往往能 ...

  8. common.css 值得学习的css样式布局

    正常的项目当中,应当有一个common.css,就是把一些常用的样式,写入其中. 然后再结合一些特性的css,构造漂亮的页面. 下面欣赏一些海盗商城的common.css. /***样式初始化***/ ...

  9. 样式布局分享-基于frozen.js的移动OA

    最近改造了公司移动OA的样式,改善了显示效果和用户体验,其中用到了腾讯的 frozen.js 框架,在此把布局代码分享给大家,希望大家可以用得上,具体效果如下图. Demo 百度网盘 下载地址 Git ...

随机推荐

  1. ssh免密登陆:sshpass -p [passwd] ssh -p [port] root@192.168.X.X

    正文: ssh免密登陆:sshpass -p [passwd] ssh -p [port] root@192.168.X.X

  2. webpack2 实践

    实例gif图: 目录截图: 目录介绍: dist目录(最后生成的目录,里面文件为配置webpack自动生成的): c/:css文件夹; i/:img文件夹; j/:js文件夹; src目录下(开发目录 ...

  3. 0ctf 2019 zero_task

    一个条件竞争的洞,以前没有接触过.比赛完研究了wp复现下. new_thread结构体如下 new_thread: thread_area size0x8 thread_area+0x8 size 0 ...

  4. 帆软报表(finereport)实现自动滚屏效果

    例如Demo:IOS平台年度数据报表. 展示内容丰富,一个页面中存在多个图表.内容,超出了浏览器窗口的大小导致内容展示不全. 为了能够预览这个报表的全部内容,可以使用JS滚屏效果来实现. 操作步骤: ...

  5. 三、vue之router

    三.vue之router 此时vue的脚手架.创建项目已经完成. ... vue的运行流程 index.html-->main.js-->App.vue-->router/index ...

  6. nginx rewrite规则笔记

    优先级 在nginx的location和配置中location的顺序没有太大关系.正location表达式的类型有关.相同类型的表达式,字符串长的会优先匹配. 第一优先级:等号类型(=)的优先级最高. ...

  7. C中单引号中放多个字符

    在C中时常有类似这样的写法: #define EVENT_MAGIC 'evnt' int magic = EVENT_MAGIC; 乍一看来,这样的方式有点不理解.听网友说: C中单引号内最多存4个 ...

  8. CentOS7像外部163邮箱发送邮件

    我们在运维过程中,为了随时了解服务器的工作状态,出现问题随时提醒,像个人邮箱发送邮件是必须的,但是刚刚安装好的系统是无法发送邮件的.需要们进行一些配置和程序的安装,我安装完系统后,自带mail12.5 ...

  9. javaScript -- touch事件详解(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  10. .net 获取配置文件AppSettings的键值

    //AppSettings.config 节点代码 <appSettings> <add key="IsUpdate" value="false&quo ...