CSS布局教程_CSS布局技巧_CSS常见布局方式

一. display

1. block 块元素

block元素可以设置宽高特性、一般适用于div、header、footer、section、from

2. inline 行内元素

inline元素默认不换行的特性、a元素、span、行内元素不会改变段落的布局、可以将ul li改成inline做成水平菜单

3. none

通常用来不删除元素的情况下隐藏元素

4. inline-block

在过去很长的一段时间内使用 float 是一种选择、但是使用 inline-block 会更简单、直接当做float使用即可

二.margin:0 auto

margin: 20px;（上、下、左、右各20px）
margin: 20px 40px;（上、下20px；左、右40px）
margin: 20px 40px 60px;（上20px；左、右40px；下60px）
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px）

在css中使用margin可以将margin-top、margin-right、margin-bottom、margin-left、缩写为一个标记、顺序为上右下左（顺时针）、margin标记可以带一个、二个、三个、四个参数、各有不同的含义 设置块级元素的 width 可以阻止它从左到右撑满容器

然后你就可以设置左右外边距为 auto 来使其水平居中、元素会占据你所指定的宽度、然后剩余的宽度会一分为二成为左右外边距、唯一的问题是、当浏览器窗口比元素的宽度还要窄时、浏览器会显示一个水平滚动条来容纳页面

让我们再来改进下这个方案... 在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况、这点在移动设备上显得尤为重要、调整下浏览器窗口大小检查下吧

三. box-size

width会被内边距撑开、如果要固定大小、可以再加box-sizing属性、既然没有比这更好的方法、一些CSS开发者想要页面上所有的元素都有如此表现、所以开发者们把以下CSS代码放在他们页面上

{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

四.position

1. static

默认值

2. relative

相对于同级元素定位

3. fixed

相对于视窗固定

4. absolute

相对于父级元素固定

五. float

1. left

水平排列

2. right

实现文字环绕

六. clear

clear用于控制浮动

1. clear:left

clear 属性定义了元素的左边不允许出现浮动元素

2. clear:right

clear 属性定义了元素的右边不允许出现浮动元素

七.overflow

规定当内容溢出边框时的发生的事情

八.浮动布局

float 是HTML布局中浮动布局、这种布局非常常见、很多网站普遍都会使用到浮动布局、博客网站使用最多

九. media媒体查询

媒体查询 “响应式设计（Responsive Design）”是一种让网站针对不同的浏览器和设备“响应”不同显示效果的策略、这样可以让网站在任何情况下显示的很棒

媒体查询是做此事所需的最强大的工具、让我们使用百分比宽度来布局、然后在浏览器变窄到无法容纳侧边栏中的菜单时、把布局显示成一列

@media screen and (min-width:600px) {
    nav {
        float: left;
        width: 25%;
    }
    section {
        margin-left: 25%;
    }
}

@media screen and (max-width:599px) {
    nav li {
        display: inline;
    }
}

十. flex布局

Flex是Flexible Box的缩写、意为"弹性布局"、用来为盒状模型提供最大的灵活性、采用Flex布局的元素、称为Flex容器（flex container）、简称"容器"、它的所有子元素自动成为容器成员、称为Flex项目（flex item）、简称"项目"

十一. 框架

因为CSS 布局很难使用、产生了一些框架、只有在框架的功能契合你的需求时、使用框架才是个好主意、掌握CSS的工作方式是无可替代的