1.利用margin auto完成首页居中，并自行研究，竖直方向用margin auto，是什么效果
#container{width:1002px;margin: 0px auto;}    竖直方向上margin:auto;无效。 auto会自动适应各种宽度的屏幕。
2.测试margin重叠的发生条件及现象，并自行搜索“父子div”也会发生margin重叠，写出代码及效果图。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>测试父子DIV-margin</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. #fu{width: 200px;height: 200px;background: red;margin-top: 10px;margin-left: 50px;}
  8. #zi{width: 50px;height: 50px;background:blue;margin-top: 50px;margin-left: 50px;}
  9. </style>
  10. </head>
  11. <body>
  12. <div id="fu">
  13. <div id="zi"></div>
  14. </div>
  15. </body>
  16. </html>

复制代码

<ignore_js_op> 
3.搜索并总结：哪些元素是块状哪些是内联？

常见的块状元素与内联元素

块状元素 内联元素
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 有序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 无序列表
li 		 a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量 

4.写内联与块状，转化他们的性质，看效果，并研究，哪个地方把内联转块状用的多？
转化为块状元素：display:block;  转化为内联元素：display:inline;
导航栏把内联转块状最常见。 
5.display:block,inline,none   还有哪些？

值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。

6.把text-indent，text-align，text-decoration，letter-spacing 各练一遍，自行搜索，段落的控制的其他css属性，并总结功能！

text-indent  
文本的缩进		 text-overflow  
文本溢出显示效果		 vertical-align
垂直对其方式		 text-align
文本的对齐方式
layout-flow
文本的流动和方向		 writing-mode
设置块固有的书写方向		 direction
设置文本流入的方向		 unicode-bidi
word-break line-break white-space word-wrap
text-autospace
文本的自动空格和紧缩空格宽度调整的方式		 text-kashida-space
设置或检索如何拉伸字符来调节文本行排列。		 text-justify
设置或检索对象内调整文本使用的对齐方式。		 ruby-align
ruby-position ruby-overhang ime-mode layout-grid
layout-grid-char layout-grid-type layout-grid-line layout-grid-mode

2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展的更多相关文章

  1. margin的垂直方向塌陷

    标签(空格分隔): margin塌陷 margin垂直方向塌陷问题: 如下代码: <!DOCTYPE html> <html lang="en"> < ...

  2. 深入学习CSS外边距margin（重叠效果，margin传递效果，margin:auto实现块级元素水平垂直居中效果）

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  3. [CSS七分钟系列]都1902年了,还不知道用margin:auto给flex容器内元素分组?

    最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨. 引子 日常业务迭代过程中,flex已经是前 ...

  4. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

  5. css 垂直方向 margin 边距 重合

    1:控制两个相邻边盒子之间的距离,在A或者B盒子上用margin控制,就可以控制距离了. 2:父子级之间的元素,常规文档流中,只要垂直外边距直接接触就会发生合并.比如在写header标签时,想移动he ...

  6. CSS里盒子模型中【margin垂直方向边界叠加】问题及解决方案

    边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合. 如果都是正边界,结果的边界宽度是 ...

  7. HTML中行内元素的竖直方向的padding和margin是否真的无效

    参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin- ...

  8. margin:auto你真的理解么？

    含义 margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值,一侧auto,则auto为剩余空间大小 (2) 如果两侧均是auto ...

  9. margin auto 实现居中，与text-align:center的区别

    本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定.这些值中,只有width和margin-left,margin-right可以设为auto,text- ...

随机推荐

  1. python读取excel学习(1)

    #coding=gbk #coding=utf-8 import xlrd table = xlrd.open_workbook(r'E:\test.xlsx') #sheet = table.she ...

  2. (二十一)python 3 内置函数

    阅读目录 1.abs() 2.dict() 3.help() 4.min() 5.setattr() 6.all() 7.dir() 8.hex() 9.next() 10.slice() 11.an ...

  3. win10修改文件管理器默认打开我的电脑

  4. [luoguP1783] 海滩防御（二分 || 最短路 || 最小生成树）

    传送门 因为答案满足单调性,所以看到这个题,第一反应是二分,但是总是WA,也没有超时. 看了题解,,,,,, 这题刚开始很多人会想到二分,二分答案,然后看看是否能绕过所有信号塔,但是,这样写明显超时, ...

  5. [luoguP2184] 贪婪大陆（树状数组）

    传送门 用两个树状数组,cr 维护 1....x 中 r 的数量 cl 维护 1....x 中 l 的数量 求答案的时候只需要求 y 前面 被作为左端点 的个数 - x 前面 被作为右端点的个数 —— ...

  6. hdu 4421 和poj3678类似二级制操作（2-sat问题）

    /* 题意:还是二进制异或,和poj3678类似 建边和poj3678一样 */ #include<stdio.h> #include<string.h> #include&l ...

  7. C#中对字符串的加密和解密

    加密: /// <summary> /// 对字符串进行加密 /// </summary> /// <param name="proclaimText" ...

  8. TOYS（poj 2318）

    题意:就是给了m个点,落在n+1个区域中,问各个区域有多少个点. /* 对于每个玩具,二分其所在的区间,然后用叉积判断. 但是我觉得枚举好像时间复杂度也可以. */ #include<cstdi ...

  9. sgu179 SGU起航！

    //发现dfs除了搜索功能外的其他功能,他本身是一种序列,这个题恰是"先序"的下一个(合法范围内)序列! #include<iostream> #include< ...

  10. Beat---hdu2614

    http://acm.hdu.edu.cn/showproblem.php?pid=2614 题目大意   题目就不粘了  就是一个简单的深搜  由于我深搜实在是不懂  就在写一个博客记录一下 #in ...