css(一) 布局基础知识

一、显示 display

　　1.1 盒子模型

　　盒子模型包括COntent padding margin  border，我们给元素设置高度，是内容content的高度，在给元素添加填充 padding，元素看起来会更高

　　有时候我们给元素添加padding时，不希望元素的高度改变，这样不利于我们的布局。可以设置  box-sizing: border-box;  在ie怪异模式下使用了这种模型。

　　1.2 行内元素和块级元素

　　块级元素可以设置宽高，默认占据一行，行内元素不能设置宽高，宽度有其内容决定。

　　块级元素默认没有高度，有内容才会有高度。行内元素默认没有宽高，有内容才有宽高。 行内元素虽然不能设置宽高，但是设置成绝对定位absolute后，可以设置宽高

     块元素可以变为行内元素

　　我们通常将li变为行内元素制作导航栏

　　

<ul class="nav">
    <li>首页</li>
    <li>文章</li>
    <li>留言</li>
</ul>

.nav li {
    display: inline;
}

　　一行只有一个块元素，但是行内元素可以有多个

空的块级元素将在布局中消失

在调试页面时想要元素在布局中显示，我们通常会给元素添加一个高度

行内元素为空也会在布局中消失（不推荐）　

1.3 行内快元素，兼容ie8 以上

清除两元素间隙

两元素间隙来源于元素间的空格，拼接元素即可消除, 也可以在父容器中使用font-size :0 去除间隙

<ul class="nav">
    <li>首页</li><li>
    文章</li><li>
    留言</li>
</ul>

 

特殊情况下元素对齐

三个li并列，都设置成inline-block。当对最左边的元素设置display：none；时，其他两个li会下沉在容器底部。此时，需要对着两个li设置顶部对齐（vertival-align：top）

 

1.4 弹性盒子  flex

兼容ie11  ie10 要添加前缀 -ms-

使用了弹性布局  float，clear，vertical 将失效

display:flex

display:inline-flex

flex-direction:row

flex-wrap:nowrap

主轴（justify-content）只能居中单行元素

<div class="parent">
    <div class="child">
        <p>两行都会</p>
        <p>居中</p>
    </div>
</div>

.parent {
    display: flex;  /* 使用flex布局 */
    align-items: center;  /* 交叉轴居中 */
    justify-content: center;  /* 主轴（默认为水平轴）居中 */
    background: red;
    height: 200px;
}

 

1.5 none 隐藏元素

visibility:hidden  隐藏元素

display:none   隐藏元素并清除原本占据的空间

 

二、位置 position

清除布局空间的定位  fixed

绝对定位的定位原点可以是 absolute  fixed  relative。 如果没有，那么定位原点就是body

使用fixed或absulute，元素原本占用的布局空间会消失（脱离文档流）

保留布局空间的定位 relative

元素原本占用的空间一九保流在文档流中

relative  就是为absolute而生的

三、补充

3.1 float

清除浮动

双伪元素

3.3 溢出 overflow

默认显示右边的滚动条

overflow-x:visibility