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. 【JDBC】java连接MySQL数据库步骤

    java连接数据库步骤 1. 加载驱动 Class.forName("com.mysql.java.Driver"); 或: registerDriver(new com.mysq ...

  2. 【实验吧】转瞬即逝write up

    ---恢复内容开始--- 虽然这是很简单的一道题,但这是我第一次拿着题有很清晰的思路,并且脚本也有思路写,拿到文件用ida打开,分析main函数: int __cdecl main(int argc, ...

  3. 《算法导论》 — Chapter 7 快速排序

    序 快速排序(QuickSort)也是一种排序算法,对包含n个数组的输入数组,最坏情况运行时间为O(n^2).虽然这个最坏情况运行时间比较差,但是快速排序通常是用于排序的最佳实用选择,这是因为其平均性 ...

  4. Cable master 求电缆的最大长度（二分法)

    Description Inhabitants of the Wonderland have decided to hold a regional programming contest. The J ...

  5. sql使用row_number()查询标记行号

    背景: 在分页功能中,记录需分页显示,需要row_number()函数标记行号. 数据表: 排序之前数据表显示: sql语句: select ROW_NUMBER() over(order by id ...

  6. c#如何判断textbox中输入的数据是datatime型的

    ()你好,标准的方法是用一个验证控件:RangeValidator,把type设为DateTime,最大值设为'3000-1-1'或者别的,最小值最好设为'1900-1-1'. ()程序里面自己验证: ...

  7. python004 Python3 解释器

    Python3 解释器Linux/Unix的系统上,一般默认的 python 版本为 2.x,我们可以将 python3.x 安装在 /usr/local/python3 目录中.安装完成后,我们可以 ...

  8. 查看java进程中哪个线程在消耗系统资源

    1 top -p $pid -H  加上-H这个参数后,会列出有哪些线程.这样就可以看到哪个线程id最消耗系统资源了.看到的线程id是10进制的数字. 2 jstack $pid 可以打印出制定jav ...

  9. POJ 3177 边双连通求连通量度的问题

    这道题的总体思路就是找到连通量让它能够看作一个集合,然后找这个集合的度,度数为1的连通量为k,那么需要添加(k+1)/2条边才可以保证边双连通 这里因为一个连通量中low[]大小是相同的,所以我们用a ...

  10. Vim pre-work

    1.先学会touch typing盲打是一切的基础 重点在于手眼协调 如果实现不了盲打.一切高效率的Vim操作都将无从做起 2.vim的使用 2.1.hjkl的移动 推荐练习贪吃蛇  和3D平衡球   ...