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 05 关于对python中引用的理解

    数据的在内存中的地址就是数据的引用. 如果两个变量为同一个引用,那么这两个变量对应的数据一定相同: 如果两个变量对应的数据相同,引用不一定相同. 通过id(数据)可以查看数据对应的地址,修改变量的值, ...

  2. 官网Android离线文档下载

    这是Android的离线API及一些Guide——俗称的/docs文件夹下的内容——英文版的...——http://pan.baidu.com/s/1qXmLlQc

  3. 数据结构实验2：C++实现单链表类

    太简单了,直接贴题目然后上代码. 题目: 实验2 2.1 实验目的 熟练掌握线性表的链式存储结构. 熟练掌握单链表的有关算法设计. 根据具体问题的需要,设计出合理的表示数据的链式存储结构,并设计相关算 ...

  4. shell实现ftp命令示例

    一.shell脚本示例: [plain] view plaincopy cd /PATH_YOU_WANT_TO_UPLOAD(DOWNLOAD) ftp -niv <<- EOF ope ...

  5. NGINX模块(二)

    [Nginx标准HTTP模块] 一.HTTP核心模块 指令1:alias 语法:alias file-path|directory-path; 默认值:no 使用字段:location 说明:这个指令 ...

  6. 【字符串+BFS】Problem 7. James Bond

    https://www.bnuoj.com/v3/external/gym/101241.pdf [题意] 给定n个字符串,大小写敏感 定义一个操作:选择任意m个串首尾相连组成一个新串 问是否存在一个 ...

  7. 2016 Multi-University Training Contest 5 solutions BY ZSTU

    ATM Mechine E(i,j):存款的范围是[0,i],还可以被警告j次的期望值. E(i,j) = \(max_{k=1}^{i}{\frac{i-k+1}{i+1} * E(i-k,j)+\ ...

  8. 【HDOJ6298】Maximum Multiple（数论）

    题意:给定n,求x,y,z三个整数,使得x|n,y|n,z|n,且xyz最小 n<=1e6 思路: 不定方程1/x+1/y+1/z=1 只有(2,3,6)(2,4,4) (3,3,3)三组正整数 ...

  9. 【BZOJ4517】排列计数（排列组合）

    题意:1-n的一个序列,其中有m个a[i]=i,求方案数 n,m<=1000000 题意:显然ANS=c(n,m)*d[n-m] d[i]为错排方案数=d[i-1]*n+(-1)^n ; ..] ...

  10. asp.net网页防刷新重复提交、防后退解决办法！

    原文发布时间为:2008-10-14 -- 来源于本人的百度文章 [由搬家工具导入] 1、提交后 禁用提交按钮（像CSDN这样）2、数据处理成功马上跳转到另外一个页面！ 操作后刷新的确是个问题，你可以 ...