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开发环境之pyenv环境搭建

    首先到Github上下载Pyenv相应的一键安装脚本, 安装完毕,设置环境变量,设置环境变量,可以添加到个人家目录的.bashrc或.bash_profile及系统的全局的/etc/profile, ...

  2. SpringBoot log4j2 异常

    log4j 配置 <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  3. oracle中的权限管理

    connect resource权限 grant connect,resource to user; 执行上面的sql语句后用户包括的权限: CONNECT角色: --是授予最终用户的典型权利,最基本 ...

  4. 【03】使用 Firebug 调试 JavaScript

    [03] 使用 Firebug 调试 JavaScript 描述 Firebug是一个非常强大的工具,可以帮助您发现代码发现错误的错误并解决错误. 在此我们使用Firebug来处理Javascript ...

  5. jQuery 1.9升级指南

    http://www.css88.com/archives/5086 原文地址：http://jquery.com/upgrade-guide/1.9/ 翻译的不对或者不通顺的地方欢迎拍砖留言。 概述 ...

  6. jmespath库解析json

    在测试过程中,经常会去JSON中的某个值,jmespath可以是除了jsonpath的另外一种选择. 下面通过几个例子来说明jmespath在python的使用 jmespath python安装 非 ...

  7. 大数据学习——linux常用命令（二）

    二.目录操作 1 查看目录信息 ls / 查看根目录下的文件信息 ls . 或者 ls ./查看当前目录下的文件信息 ls ../查看根目录下 ls /home/hadoop ls -l . 查看当前 ...

  8. sed命令解析[转载]

    1.简介 sed是非交互式的编辑器.它不会修改文件,除非使用shell重定向来保存结果.默认情况下,所有的输出行都被打印到屏幕上. sed编辑器逐行处理文件(或输入),并将结果发送到屏幕.具体过程如下 ...

  9. 2018-2019 XIX Open Cup, Grand Prix of Korea (Division 2) GYM 102058 F SG函数

    http://codeforces.com/gym/102058/problem/F 题意:平面上n个点  两个人轮流在任意两个点之间连一条线但是不能和已有的线相交,先围成一个凸多边形的获胜,先手赢还 ...

  10. JAVA实现选择排序，插入排序，冒泡排序，以及两个有序数组的合并

    一直到大四才开始写自己的第一篇博客,说来实在有点羞愧.今天写了关于排序的算法题,有插入排序,冒泡排序,选择排序,以下贴上用JAVA实现的代码: public class test5 { public ...