学习CSS布局 - margin: auto; - 相关文章

【学习CSS布局 - margin: auto;】的更多相关文章

学习CSS布局 - margin: auto;

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin-auto</title> <style> .main { width: 600px; margin: 0 auto; border: 1px solid red; } </style> </head> <…

《学习CSS布局》学习笔记

近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元素和行内元素. 一个块级元素会新开始一行并且尽可能撑满容器.常见的块级元素包括div.p.form,以及HTML5中新加入的header.footer.section等. 行内元素可以显示在段落内而不打乱段落的布局.常见的行内元素包括span和a等. display属性就是控制元素的表现形式,它的值…

“学习CSS布局” 笔记

学习网址:http://zh.learnlayout.com/no-layout.html 本文仅为学习笔记,内容非原创. position 默认值:static 没有添加额外属性的relative和static表现一样.额外属性包括:top, right, bottom, left. 一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置.和 relative 一样, top . right . bottom 和 left 属…

WEB学习-CSS中Margin塌陷

margin的塌陷现象标准文档流中,竖直方向的margin不叠加,以较大的为准. 如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的: 盒子居中margin:0 auto; margin的值可以为auto,表示自动.当left.right两个方向,都是auto的时候,盒子居中了: margin-left: auto; margin-right: auto; 简写为 margin: auto; 表示上下,auto表示左右注意: 1) 使用margin:0 auto; 的盒子,必…

学习CSS布局 - position

position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运行结果,在看下源码,最后解释一下position的各个属性. 结果: 源码看一下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti…

学习CSS布局 - box-sizing

box-sizing 人们慢慢的意识到传统的盒子模型不直接,所以他们新增了一个叫做 box-sizing 的CSS属性. 当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度. 这里有一个与前一页相同的例子,唯一的区别是两个元素都设置了 box-sizing: border-box; <!DOCTYPE html> <html lang="en"> <head> <meta charse…

学习CSS布局 - 盒模型

盒模型在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度的元素显示的实际宽度却不一样. 看看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型</title…

(九)学习CSS之margin属性

参考: 所有浏览器都支持 margin 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度. 块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距.行内元素的的左右外边距不会合并.同样地,浮动元素的外边距也不会合并.允许指定负的外边距值,…

学习CSS布局 - position例子

position例子通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>position例子</title> <style> * { box-sizing: border-box; } .c…

学习CSS布局 - max-width

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>max-width</title> <style> .main { max-width: 700px; border: 1px solid red; margin: 0 auto; } </style> </head> &…