CSS布局技巧详解-优快云博客

本文链接：https://blog.youkuaiyun.com/fendou4533/article/details/10138581

大部分内容摘抄网上的知识点

* { margin: 0; padding: 0; }

不同的浏览器厂商出于自己的专利都有默认的属性值（如margin、padding、line-height）。但对于开

发者来讲，无疑让我们花很多时间进行兼容的处理。全局设置能够使所有的浏览器（大多数）默认值重

新渲染成统一的值。初学者用得最多的恐怕就是* { margin: 0; padding: 0; }了

margin:0 auto; 居中问题

转http://blog.youkuaiyun.com/leikey/article/details/5905162

很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题！margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小一在这里说两个典型的错误引起的不能居中的问题：

1、没有设置宽度
<div style="margin:0 auto;"></div>
看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！

2、没声明DOCTYPE
①DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分！

②看看下面的代码，是不是很熟悉？像这样的，在文档最顶端，所有代码之上的乱七八糟的东西，就是用来声明DOCTYPE的！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

③你有三种选择，用来声明DOCTYPE
* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

④至于选择哪种。。使用过度的就可以了。。

说了半天，margin:0 atuo;不起作用，不能居中的话，看看你的文档最顶端有没有声明DOCTYPE，没有就复制粘贴一下，就可以了！

还有就是 margin:0 auto; 和 margin-left:auto; margin-right:auto;的现实效果有时间还不一样，其原意可能在于设置了margin-top的高度不为0时，会出现意想不到的效果。

css属性，text-indent:-999px;什么意思？

就是把该元素内的文字移到屏幕外面去，让我们肉眼看不见，
有时候是因为如某栏目名称的文字或者logo的文字已经用背景图片代替了，
我们不需要眼睛看见那些文字，但是希望搜索引擎可以搜到，就可以用这个把文字“隐藏”的属性。
虽然眼睛看不见，但是搜索引擎或者盲人用的软件能知道

网页制作中的CSS+DIV：dl,dt,dd分别表示什么意思啊

<dl>标记定义了一个定义列表，定义列表中的条目是通过使用<dt>标记(“definition title”，定义标题)和<dd>标记(“definition description”，定义描述)创建的。<dt>给出了术语名，<dd>标记给出了术语的定义。
也就是说<dt>用来创建列表中的上层项目，<dd>用来创建列表中最下层项目，<dt>和<dd>都必须放在<dl>< /dl>标志对之间。
<dl>
<dt>我们在做列表标题</dt>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
<dd>我们在做列表</dd>
</dl>

可以理解成ul 和li的扩展。dt是标题，dd是该标题的内容，dl是外层包裹 （ 有点类似表格里面的 th tr）

css 用display-block扩大a标签点击范围后的问题

给a标签设置display:block后，它会根据盒模型计算a标签的实际大小。
这时候，你可以使用hover伪类使a的整个盒模型生效。
.link a{display:block;padding:2px 10px;}
/*这样，a标签的范围就是文字上下各扩出2px左右各扩出10px/*
然后
.link a:hover{background:#newcolor;}
就能实现你要的效果。
你所说的不要点击效果，要记住lovehate的前后顺序，以及各自代表的意义。
hover即onmouse的效果，active是点击效果。

CSS 问题中 li{display:inline;}的作用

display:inline 这个是和float联合使用的，调整兼容性使用到的！防止ie6中margin值加倍！

css 布局总结

margin:0 auto; 居中问题

css属性，text-indent:-999px;什么意思？

网页制作中的CSS+DIV：dl,dt,dd分别表示什么意思啊

css 用display-block扩大a标签点击范围后的问题

CSS 问题 中 li{display:inline;}的作用

CSS 问题中 li{display:inline;}的作用