详解CSS布局

CSS页面布局允许我们拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。主要对文档流的改变进行布局。假设你已经掌握了CSS的选择器、属性和值,并且可能对布局有一定了解可以往下看,如果没有可以先看这篇博客css解析


css实现左右布局

css实现左右布局的方式大概有六种:

1. table的li实现

table标签是能够具有实现左右布局的属性,tr表示一行,td表示一列,tr中可以添加td实现盒子的左右布局.

2 . inline-block

display:inline-block属性是介于行级元素(display:inline)和块级元素(display:block)之间的属性,它可以像行级元素一样水平布局,也可以像块级元素设置宽高属性,所以可以进行左右布局。

3. float实现左右布局

float浮动,将该块状区域脱离父级标签的文档流,left属性值使该区域向父级标签区域的左侧边界放置,right属性值使该区域块向父级标签的右侧边界放置,如是利用该属性可以实现左右布局。

float布局对于后面节点的布局采用交错性的布局,inline-block采用正常式的布局。

4. flexbox属性实现左右布局

flexbox弹性盒子布局,display:box;该种布局主要用于移动前端开发。

5. float+margin实现左右布局

float能够使得元素向左或者向右靠边布局,如果在同级元素中设置一个正常流的区域与浮动块并列,则浮动块会在该正常流同级区域的边界处,只是浮动块会影响该区域块的布局,所以要清除浮动块的影响,所以此时将正常流区域块外的盒子设置margin等于浮动块的宽度既可以清除影响。

6. position:absolute左右布局

绝对定位,产生脱离文档流的布局现象。absolute可以覆盖任何位置的元素且不会影响正常流的布局,但是会产生遮盖。


左中右布局

三栏自适应布局:两边定宽,中间block宽度自适应。

1.绝对定位法

将左右两边使用absolute定位,因为绝对定位脱离文档流,后面的center会自然流动到上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。

2. 使用自身浮动法

对左右使用分别使用float:left和float:right,float使左右两个元素脱离文档流,中间元素正常在正常文档流中,使用margin指定左右外边距对其进行一个定位。同时父盒子设置 overflow: auto; 来避免子盒子溢出

3. 圣杯布局

圣杯布局的原理是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div,包含div需要设置float属性使其形成一个BFC,并设置宽度,并且这个宽度要和left块的margin负值进行配合。


居中布局

水平居中

对于行内元素(inline):text-align: center;

对于块级元素(block):设置宽度且 marigin-left 和 margin-right 是设成 auto,使用 max-width 替代 width。

对于多个块级元素:对父元素设置 text-align: center;,对子元素设置 display: inline-block;(vertical-alinga:top);或者使用 flex 布局

flex 布局: display:flex;  justify-content:center

垂直居中

对于行内元素(inline)

单行:设置上下 pandding 相等(或者设置 line-height 和 height 相等)

多行:设置上下 pandding 相等;或者设置 display: table-cell; 和 vertical-align: middle;;或者使用 flex 布局;或者使用伪元素

对于块级元素(block):(下面前两种方案,父元素需使用相对布局)

已知高度:子元素使用绝对布局 top: 50%;,再用负的 margin-top 把子元素往上拉一半的高度

未知高度:子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);

使用 Flexbox:选择方向,justify-content: center;

水平垂直居中

定高定宽:先用绝对布局 top: 50%; left: 50%;,再用和宽高的一半相等的负 margin 把子元素回拉

高度和宽度未知:先用绝对布局 top: 50%; left: 50%;,再设置 transform: translate(-50%, -50%);

使用 Flexbox:justify-content: center; align-items: center。


box-sizing

当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。

百分比宽度

百分比是一种相对于包含块的计量单位。它对图片和盒子模很有用:比如实现图片宽度始终是容器宽度的50%,即使窗口缩小。

inline-block 布局

inline-block 元素 影响垂直居中,加vertical-align:top。

ps:参考链接 :介绍 CSS 布局学习CSS布局  ,CSS经典布局  ,使用CSS实现三栏自适应布局  ,

原文地址:https://www.cnblogs.com/gitnull/p/9365422.html

时间: 2024-11-05 14:57:32

详解CSS布局的相关文章

详解CSS的Flex布局

本文由云+社区发表 Flex是Flexible Box 的缩写,意为"弹性布局",是CSS3的一种布局模式.通过Flex布局,可以很优雅地解决很多CSS布局的问题.下面会分别介绍容器的6个属性和项目的6个属性.每个属性会附上效果图,具体实现代码会以github路径形式更新于此. 1.浏览器支持情况 可以点击查看各浏览器的兼容情况 2.容器的属性 注意,设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效. 容器的属性有6个,分别是: flex

详解CSS float属性

CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的应用,出现的问题和解决方案. 基础知识 float,顾名思义就是浮动,设置了float属性的元素会根据属性值向左或向右浮动,我们称设置了float属性的元素为浮动元素.浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕.举例说明如下:Html代码: 1 <div

详解CSS position属性

position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移.postion也是初学者容易搞不清楚状况的一个属性,本文将从最基础的知识讲起,谈谈关于positon属性的一些理论与应用. 基础知识 postion属性我们成为定位,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性. position四种类型 (1)staticstatic是position属性的默认值,默认情况下,块级元

详解CSS float属性(转)

阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 清除浮动 float的应用 总结 CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解好浮动的意义和表现出来的特性,在使用的使用很容易陷入困惑,云里雾里,搞不清楚状态.本文将从最基本的知识开始说起,谈谈关于浮动的应用,出现的问题和解决方案. 回到顶部 基础知识 float,顾名思义就是浮动,设置了float属性的元素会根据属性值向左或向右浮动,我们称设置了float属性的元素为浮动元素.浮动元素会

CSS学习笔记(9)--详解CSS中:nth-child的用法

详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,"2可以是你想要的数字" .demo01 li:nth-child(2){background:#090} :nth-child(n

详解CSS的相对定位和绝对定位

原文地址:http://www.3lian.com/edu/2015/01-31/191131.html 详解CSS的相对定位和绝对定位 感谢 3lian8 的投递 时间:2015-01-31 来源:cmsgood zcp CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效,比如你设置一个距离左边距偏移100p

详解CSS中:nth-child的用法_大前端

http://www.daqianduan.com/3737.html 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,"2可以是你想要的数字" .demo01 li:nth-child(2){background:#0

ionic中文详解CSS组件

ionic组件 本来不想写这个的,因为毕竟官网已经列的很详细了css component,国内的网络由于种种原因,有时候右边并不会显示一个手机框用于展示效果.我这里将一些相关组件的介绍合在一起,给出综合例子和显示效果,方便自己查阅.另外官网的JS API介绍文档有问题,国内访问不能跳转,请参考我的另一篇ionic中文javascript API. 教程索引:(持续更新中...)ionic中文教程 转载请注明出处:http://www.haomou.net/2014/08/09/2014_ioni

详解 CSS 属性 - :before &amp;&amp; :after

之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正了我的错误,所以今天打算好好研究下两者的区别.首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 css 无法描述的东西. 伪类种