您的位置：首页 > Web前端 > CSS

css基础浏览器的布局

2015-12-16 16:16 579 查看

布局-将元素以正确的大小摆放在正确的位置。

display 设置元素的显示方式（大小、位置）

display：block 块级元素默认宽度为父元素宽度、可设置宽高（元素的大小）换行显示（位置）

div ,p ,h1-h6,ul,form 这些元素默认的都是块级元素。

display：inline 行级元素默认宽度为内容宽度（文字宽度）不可设置宽高同行显示在行的内部可以换行

span, a, label,cite, em 这些元素默认的都是行级元素。

display：inline-block 默认宽度为内容宽度（文字宽度）可以设置宽高同行显示如果后续元素超过范围将整块换行。

input, textarea, select, button 这些表单元素默认的都是 inline-block

diplay：none 设置元素不显示（隐藏后续元素会替代他的位置）与 visibility：hidden 的区别（隐藏但是还占原来位置）。

块级元素的水平居中（布局）：{margin：auto; width:978px;} {margin: 0 auto;}

居中导航（布局）：导航栏的居中无序列表 <ul> display:inline-block 可设置大小的同行显示。

定位 position 设置定位方向

top ，right，bottom，left，z-index -设置其与参照物边距的距离。

如果同时设置 top，bottom 或 left，right 这个元素将被抻开。

z-index:1 z-index:0 (默认是0, 按照文档流的顺序排序） 1将覆盖0，设置元素在z轴上的排序

？是否z-index越大就一定排列在上面（不一定有栈的概念，如果大z-index的父元素的z-index 小于小的z-index的父元素的z-index 小的将覆盖大的）

relative相对定位仍在文档流中参照物为元素本身改变元素位置上的层级是绝对定位的参照物

absolute绝对定位默认宽度为内容宽度脱离文档流参照物为第一个定位祖先/跟元素（不一定是其父元素）绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。如下其参照物不是container而是html元素的body，如果去掉注释其参照物将是其父元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.container{width: 300px;margin: 50px;line-height: 2;border: 1px dashed #aaa;}
.sample{background-color: pink;}

.sample{position: absolute;}
.sample{bottom: 10px;left: -30px;}
/*.container{position: relative;}*/
</style>
</head>
<body>
<div class="container">
<div>绝对定位元素的前序元素</div>
<div class="sample">sample</div>
<div>绝对定位元素的后序元素</div>
</div>
</body>
</html>

eg：轮播头图（布局方式）

fixed 固定定位默认宽度为内容宽度脱离文档流参照物为窗口

eg：固定顶栏（布局方式）

遮罩(布局方式) position：fixed; top 0; left 0; z-index:999; width:100%; height:100%

三行自适应布局顶行与底行固定滚动条在中间内容区。（绝对定位元素没有设置宽高，同时设置top 与bottom的 body被抻开）

内容区两列布局（分为主内容区、和边栏）（块级元素在同行显示并且在文档流？）

用float 浮动

float: left|right 默认宽度为内容宽度、半脱离文档流（对于元素脱离文档流，对于内容仍然在文档流里面）、会向指定方向一直移动（一直到不能移动为止）。

float 元素在同一文档流中父元素中三个元素都设置float：left; 父元素将没有高度因为脱离了文档流父元素没有内容了、三个元素的宽度都为内容宽度、第二个元素移动将被第一个元素挡住，不覆盖。

clear：both| left | right

应用于float元素的后续元素，清除float对后续元素的影响。通常情况下应用于块级元素。

两列布局代码：

两列自适应布局如果父元素变宽或者浏览器变宽两列中有一列随着变化

多行自适应多列自适应间距自适应任意对齐（flex）弹性布局 display:flex;

flex container 弹性的容器 flex item 弹性元素 flex item 的排列方向为主轴： main axis 辅轴：cross axis

？弹性容器所有的元素都是flex item 弹性元素？不是

只有弹性容器在文档流中的直接子元素才是弹性元素。

方向 flex-direction :row(默认)左->右， row-reverse 右->左，column(从上往下排的)，column-reverse（从下往上排的）

flex-wrap(换行)：nowrap(默认) | wrap | wrap-reverse

flex-flow: <flex-direction||flex-wrap>

order：<interger> 默认是0

弹性 flex-basis :main-size（默认是主轴） | <width> 设置flex item的初始宽/高。

flex-grow :<number> 0(默认) 是元素所能分配到的剩余空间比例。

弹性元素的大小= flex-basis + flex-grow/sum(flex-grow)*remain

flex-shrink :<number> 1(默认值) 与flex-grow类似分配的是负的剩余空间

flex： <flex-grow>||<flex-shrink>||<flex-basis> 0 1 main-size(默认)

对齐 justify-content 设置main-axis(主轴)方向的对齐方式。

aligin-items:辅轴的对齐方式：like vertical-align

eg：三行两列自适应布局

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航