CSS布局教程_CSS布局技巧_CSS常见布局方式
2017-03-29 14:05:11 By: shinyuu
一. display
1. block 块元素
block元素可以设置宽高特性、一般适用于div、header、footer、section、from2. 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的工作方式是无可替代的
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）
或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛
