2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展

1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果
#container{width:1002px;margin: 0px auto;}    竖直方向上margin: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
时间: 2024-12-22 07:44:14

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

关于网页导航栏制作的几种方法与常见问题解决(新人向)

无序列表是html页面排版经常用到的非常实用的标签,但是新手在使用无序列表时,经常会在横向排版上出现问题,笔者在这里提供了笔者在使用无序列表制作网页导航栏时的几种方法与常见问题的解决问题.(以css内部样式为例) [注:有同学之前问过我怎么制作一张网页,但只会html,本文用到均为css.故说明:若急需制作导航,无css技术基础的,在<head>标签中加<style rel="stylesheet" type="text/css"><s

javascript和css实现垂直方向自适应的三角提示菜单

这是一个比较简单实用的菜单,最重要的是他不需要引用jQuery库.菜单在垂直方向上能做到自适应,当主菜单靠近顶部,子菜单将会在下面,当主菜单靠近底部,子菜单在上面.运用Modernizr的触摸检测功能,我们可以让子菜单的响应在pc上是hover,而在触摸设备上是点击.例子中还示范了如何在宽度比较窄的情况下如何调整布局.分享一个最好用的UI前端框架! html代码: .代码 <ul id="cbp-tm-menu" class="cbp-tm-menu">

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

最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨. 引子 日常业务迭代过程中,flex已经是前端工程师解决常见布局的神兵利器.但是随着使用的深入,偶然会发觉flex对于简单的布局足够直接迅速,但是对于稍稍复杂一些的布局,就需要层层的包裹分组来解决.举个栗子,下图是我们常见的布局图: 如果flex容器之中仅仅只有三个元素,彼此分离,我们借助于justify-content就足够应付.但是如果其

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

首先看一下问题案例 .wrapper{ width: 100px; height: 100px; background-color: aqua; margin-top: 100px; margin-left: 100px; } .inner{ width: 50px; height: 50px; margin-top: 100px; margin-left: 50px; background-color:black; } <div class="wrapper"> <

小tip: margin:auto实现绝对定位元素的水平垂直居中

转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容性不错的主流用法是: .element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度

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

参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin-bottom是不是真的是无效的? 接下来就这个问题将具体分析: 1.行内元素拥有盒子模型么 答案是是的.没错,行内元素跟块级元素一样,同样拥有盒子模型. 2.行内元素的padding-top,padding-bottom和margin-top,margin-bottom是否无效 答案同样是是的.盒子

用CSS让未知高度内容垂直方向居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo</title> <style type="text/css"> #outer{ width:500px; height:200px; margin: 50px auto; border:1px solid #CCC; display:table; tex

margin:auto你真的理解么

含义 margin:auto是具有强烈计算意味的关键字,用来计算元素对应方向应该获得的剩余空间大小 填充规则 (1) 如果一侧定值,一侧auto,则auto为剩余空间大小 (2) 如果两侧均是auto,则平分剩余空间 <style> .father { width: 300px; background-color: #f0f3f9; } .son { width: 200px; height: 120px; margin-right: 80px; margin-left: auto; back

块级元素水平和垂直方向居中的方式

块级元素水平和垂直方向居中的方法一共三种 1.先设置块级元素的宽高,然后利用定位和外边距将元素在水平和垂直方向上居中 示例: <style> .father{ width: 100%; height: 500px; position: relative; } .son{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; back