长沙web培训
达内长沙侯家塘中心

15017569023

热门课程

【长沙达内Web培训】CSS布局

  • 时间:2016-10-26 12:05
  • 发布:长沙web培训
  • 来源:web教程

长沙达内Web培训的老师这一次给大家分享CSS的布局。

一. display

1. block块元素

block元素可以设置宽高特性

div,header,footer,section,from

2. inline行内元素

inline元素默认不换行的特性

a元素,span,行内元素不会改变段落的布局,可以将ul li改成inline做成水平菜单

3. none

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

4. inline-block

http://zh.learnlayout.com/inline-block.html

二.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

2. clear:right

七.overflow

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

八.浮动布局

九. 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布局

十一.框架

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

了解详情请登陆长沙达内Web前端培训官网(cs.web.tedu.cn)!

上一篇:canvas画布在主流浏览器中的尺寸限制
下一篇:判断数组的最佳方法

马上预约三天免费体验课

姓名:

电话:

Web前端:CSS控制div宽度

HTML的语义化和一些简单优化

Web培训老师教你用canvas实现刮刮乐

mouse事件在JQ中的应用

选择城市和中心
贵州省

广西省

海南省