首页 / HTML / 迁移html和css之一
迁移html和css之一
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了迁移html和css之一，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含21834字，纯文字阅读大概需要32分钟。
内容图文
一、html元素的理解
html元素，也叫html标签，是用来改变网页结构的作用。也就是说“标记”的作用 ：就是通过给内容添加标签来创建元素的过程。
html标签写法注意点：
01.HTML 标签以 < 开头，以 > 结束，比如表示段落文本的 <p>。
02.标签一般都成对出现，一个开始标签和一个结束标签就在文档中创建了一个元素。
03.结束标签用一个斜杠表示元素的关闭或结束，比如 </p>。
如果要标记一个段落元素，那么可以像下面这样写：
<p>这还是一个段落，段落的标记是p.</p>
有些元素是可以嵌套的。比如，可以使用 em 元素为文本增加强调的语义。
<p>java知识，?<em>乐之者java</em>?都是用心在写教程.</p>
嵌套元素在文档中会形成层次。对上面的例子而言，em 就是 p 的子元素，因为它被p 包含着。 （相应地，p 是 em 的父元素。 ）
在元素相互嵌套的时候，子元素不能超出父元素之外，因为这样就会破坏层次，比如：
<p>This?could?cause?<em>unexpected</p>
<p>results</em>,?and?is?best?avoided.</p>
像上面这样胡乱交叉嵌套就不对了。
有些标签永远不会成对出现，比如指向一张图片的 img。虽然 HTML5 不再强制要求，但你经常也会看到这种标签的自关闭写法，也就是在末尾的 > 之前加一个斜杠：
<img?src="photo.jpg"?/>
HTML5 之后，这种自关闭的标签就变成了可选的，因此下面的代码跟前面的代码功能一样：
<img?src="photo.jpg">二、html的属性是什么？
任何 HTML 元素都具有与众不同的属性，就像千人千面，各不相同。如何为html指定属性呢，形式如下（在开始标签中）：
<?标签名?属性="?值"></标签名>
属性名后面是等于号，然后是放在双引号中的属性值（也可以放在单引号中），注意是英文状态的引号。
不同的元素拥有不同的属性。比如，a 是一个链接元素，有 href 属性，这个属性的值就是链接的 URL。 （href 是 HTTP reference 的简写。 ）
?<a?href="http://www.roadjava.com/">乐之者java</a>
有些属性可以指定给任何元素，比如 class 和 id，即html元素可以拥有相同的属性，因为这些属性是公共的。
class 和 id 是最有用的两个属性，因为通过它们可以找到特定的内容。而且，CSS和 JavaScript 代码也依赖它们定位元素。
id，见名知意，就是标识符的意思，每个元素只能有一个 ID，而且同一个 ID值 在整个页面中也只能出现一次。
三、html注释的写法
随着代码越来越多，越来越复杂，最好的做法是添加注释。注释就是你描述代码用途和实现方式的一些备注。如果你跟我一样，几个星期之后才会重新看一看代码，那很可能早就忘了以前是怎么想的了。注释就能起到提醒的作用，在未来给你提供一个向导。
HTML 中的注释是这样来写的：
<!--?这里是注释的内容?-->
位于 <!-- 和 --> 之间的内容都会被浏览器忽略掉。
注释的作用：
再回首，不至于恍然如梦，注释给你的作用就是提醒。
注释掉一些不执行的代码，让放在注释里面的代码不再执行。
四、dom的层次结构
DOM（Document Object Model，文档对象模型）指的是 HTML 标签的层次结构。每一对 HTML 标签（有时候则是一个标签，即单标签，例如img，br等）都是一个元素，对这些元素，我们一般用拟人化的方法来称呼它们，比如：父元素、子元素、同胞元素、祖先元素和后代元素。
举个例子，对下面的 HTML 来说：
<html>
????<body>
????????<h1>Breaking?News</h1>
????????<p></p>
????</body>
</html>
body 是其子元素 h1 和 p 的父元素，而 h1 和 p 则互为同胞元素。页面中的所有元素都是 html 的后代元素。
浏览器通过解析 DOM 来操作页面内容，因为dom的结构看起来像一个树，因此我们也称这个解析的过程为“渲染dom树”。编码的人员在实现可视化时，最关心的是DOM。因为我们的代码必须在 DOM 层次中寻找元素，然后为它们应用样式和行为。
dom并不是单单只有html中才有的概念，xml中也有dom的概念，dom是w3c制定的一个标准，供遵守它的语言来实现。
五、css3中的单位vh
vh：即viewport height，指的是视口高度，所谓视口，就是你浏览器可视区域的大小（浏览器的高度-地址栏高度-书签栏高度），这里vh的作用是相对于视口的高度，视口高度总被平分为100个单位来计算。比如
font-size:8vh
如果视口高度是800px,800/100=8px(8px即此时视口1个单位的高度)，font-size就应该是8*8px=64px。
<%@?page?language="java"?contentType="text/html;?charset=utf-8"?pageEncoding="utf-8"%>
<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>布局</title>
<style>
div{
width:100px;
height:100px;
background:?red;
}
section{
width:50px;
height:?100vh;
background:?green;
}
</style>
</head>
<body>
<div>
<section></section>
</div>
</body>
</html>
因为section的高度为100vh,即section的高度应该是充满视口，如下：
六、css里的长度单位rem和em
rem是什么？
rem是css3中新增加的一个单位属性,根据页面的根节点的字体大小（(font size of the root element)）进行转变的单位。root或者叫做根节点指的什么？就是html标签。也就是说一个页面里面的rem是多少px，是由html标签上的font-size属性来定的。rem的初始值是16px，也就是说在没有设置根节点的font-size的时候，1rem=16px
例：(下面例子中的根节点是html ，它的字体大小是100px，所以根节点下面的元素(儿子元素或者所有的后台元素)所设置的rem都是根据100px来计算的，比如1rem即时100px,0.45rem就是45px咯。)
<html>
????<head>
????????<style>
????????????html,body{?font-size:?100px;??}
????????????div{
????????????????background:red;
????????????????width:1rem;
????????????????height:0.45rem;
????????????}
????????</style>
????</head>
????<body>
????????<div></div>
????</body>
</html>
页面显示效果如下：
em是什么？
em也是一个相对单位，em单位是根据父元素的字体大小来进行转变的单位。
-
em的值并不是固定的；
-
em会继承父级元素的字体大小。
例,下面的例子中因为父元素的字体大小是100px，所以子元素的1em就是父元素的字体大小，即100px了：
<section?style="font-size:100px;">
????<div?style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；
</section?>
rem与em的区别与联系：
rem和em都是根据font-size字体大小来计算本身在本页面所代表的长度大小的。
rem的参照物是html标签的font-size,如果参照物没有设置font-size,那么默认就是16px.
em的参照物是父标签的font-size,如果参照物没有设置font-size,那么默认就是16px.
七、CSS盒子模型
css处理网页时，认为每个元素都包含在一个不可见的盒子里。
区分几个概念：
1.内容的宽度和高度：width/height
2.元素的宽度和高度：
宽度=左border+左padding+width+右padding+右border
3.元素空间的宽度和高度：
宽度=左margin+左border+左padding+width +右padding+右border +右margin
子元素都是放在内容区的，我们通过width和height属性设置的就是内容区的宽与高。那么这个width和height是不是所有的html标签都可以直接设置宽高值呢？
不是的。
css中元素被分为3种：
块级元素=所有容器级别标签+文本级别里的p
行内块级元素=文本级别里的img
行内元素=其余的(去掉p和img)文本级别标签
注意：在dom标准流中，块级元素或者行内块级元素才能直接设置宽高，行内元素需要转化为块级或者行内块级之后才能设置width和height。
八、块级元素、行内块级元素、行内元素之间的相互转化
块级元素、行内块级元素、行内元素之间的相互转化是通过css的display属性来完成的。
行内元素虽然直接设置宽高后是没有效果的，但是可以通过display来修改元素的显示模式。
display
可选值:
--block
--inline
--inline-block
--none:被设置为none的元素将不显示，而且不再占有页面的空间，这点与visibility是不同的。
visibility
可选值:
--visible
--hidden：与display不同，还会占据空间
九、css的overflow
overflow:规定了当内容溢出元素框时发生的事情
当标签的内容超出定义的宽度和高度时，浏览器会让内容溢出盒子。为了不让内容溢出盒子等奇怪现象发生，可以使用overflow。overflow也可以使用overflow-x和overflow-y来进行分别的控制。
可选值:
--visible：默认值，内容不会被修剪，会呈现在元素框之外。
--hidden：内容会被修剪，并且其余内容是不可见的。
--scroll：不论是否需要，浏览器都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
--auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，就是让浏览器自己选择如何来处理。
如下面的例子：
<html>
<head>
<style?type="text/css">
div?
{
background-color:blue;
width:150px;
height:150px;
overflow:?scroll;
}
</style>
</head>
<body>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为?scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有
可能即使元素框中可以放下所有内容也会出现滚动条。默认值是?visible。
</div>
</body>
</html>
十、内边距(边内补白)padding
内边距(边内补白)
语法：
padding：上 [右] [下] [左]
另外css中也提供了padding-top、padding-right、padding-bottom、padding-left以便进行分别控制,会让元素看起来更宽、更高。
举几个例子：
padding:5px,表示上、→、下、左内边距都是5px。
padding:1px 2px,表示上下padding为1px，左右为2px.
padding:1px 2px 3px,表示padding-top为1px,padding-right和padding-left为2px,padding-bottom为3px.
另外，说一个跟padding有关的css属性，box-sizing
box-sizing:border-box，表示的是这样的一个意思：
div?
{
background-color:blue;
width:150px;
height:150px;
padding?:1px?2px?3px?4px;
}
当你设置了div的width和height，又设置了其padding之后，这个div的元素的宽度和高度就增大了,比如其元素宽度就变为了150+2+4=156px,这个元素因为设置了padding的缘故占据的空间也会增大，可能导致布局的错乱，这个时候设置div的box-sizing为border-box之后，就可以让div占据的空间不变的同时又有你设置的padding，其实说白了“box-sizing:border-box”作用就是自动缩减你设置的width和height的作用。
十一、css的boder属性
边框border
语法：
border:[border-width] border-style [border-color]，例：border:1px solid black;
注意：
同样，css中也提供了border-top[-width/-style/-color]、border-right[-width/-style/-color]、border-bottom[-width/-style/-color]、border-left[-width/-style/-color]以便进行分别控制每个方位的边框宽度、样式、颜色。
boder-style的可用取值如下图所示，常用的我用红框标记了出来：
input表单元素的边框消除：消除input边框：outline:none;
十二、margin属性
外边距
语法：
margin:上 [右] [下] [左]
另外css中也提供了margin-top、margin-right、margin-bottom、margin-left以便进行分别控制。
注意：margin:0 auto使元素居中。使用margin需要提防外边距垂直方向的塌陷(合并)现象
十二、css reset
css中有些设置可能是项目中通用的设置，比如img去掉边框，body，html设置padding和margin为0，字体font的统一风格的设定，一般我们在新开一个项目的时候会有个reset.css或者common.css就是用来做这种事情的，这些东西也不需要你自己写，因为你自己可能也想不了这么全面，以前比较早的时候用的都是yui的css reset，就是来做这个事情。
不过，现在很多框架都自己带了这些初始化reset的内容，我们也不需要太关心了，但是这个道理还是要知道的。
举几个reset的例子，来看看这些reset里面都reset了些什么。
内外边距：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;
padding:0}
设置字体：
body{font-family:'微软雅黑';font-size:13px;color:#000;backgroud:#fff;}
a{text-decoration:?none;}
使不具备继承特性的标签具有继承：
a,input,select,textarea{color:inherit;font-family:inherit;font-size:inherit;}
img{
border:0?none;/*ie里面是none*/
}
十三、网页排版方式以及float应该注意的问题
网页的排版方式无非就三种：
1.标准流：网页中默认的布局方式
块级元素
行内元素
行内块级元素
2.浮动流：把网页自上而下分成一行行的话，元素默认会自上而下自左向右地排列，这种现象就称为文档流。但是一个块级元素总是占据了一行的位置，为了能在网页上面的一行布局多个块级元素，就出现了浮动。浮动是常见的一种网页排版方式。css通过float来实现元素的浮动。
float的可用值：
--left
--right
注意点：
被float的元素不区分css的3种元素类别(width和height设置了都可以生效)
浮动的规则
浮动的逻辑过程
浮动停靠现象
浮动字围现象
浮动引发的高度问题
3.定位流(局部)：css中通过position来实现定位。
十四、float浮动应该注意的几个问题解析
上篇教程列出了浮动应该注意的几个问题，这篇教程来看看这几个问题具体该怎么理解。
float浮动的规则：
同方向浮动的先后顺序：后浮动的找先浮动的
不同方向浮动的寻找规则：各自往各自的方向去找先浮动的
半脱离标准流：浮动后的位置跟浮动前的位置有关
浮动的逻辑过程：
浮动元素脱标（脱离文档标准流），其他元素整体来填坑，浮动元素根据其脱标前的位置（这就是前边说半脱离标准流的原因）浮动。红色的字怎么理解呢？
拿上面这个图来说，如果设置div2浮动float:right，div2会float到当前行的最右边，而不会float到div1或者div3所在的行，为什么？这就是红色字说的浮动会“根据其脱标前的位置”进行浮动。
浮动的停靠现象：
父元素中，一行不足以容纳浮动元素的时候，浮动元素会往下一行停靠，如下示意图：
举个例子，有如下html代码：
<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>无标题文档</title>
<style>
.first{
width:400px;
height:400px;
background:red;
}
.second{
width:100px;
height:100px;
background:green;
float:left;
}
.third{
width:200px;
height:200px;
background:yellow;
float:right;
}
.four{
/*width:101px;
height:101px;*/
width:201px;
height:201px;
background:pink;
float:right;
}
</style>
</head>
<body>
??<div?class="first">
?? <div?class="second"></div>
????????<div?class="third"></div>
????????<div?class="four"></div>
??</div>
</body>
</html>
根据浮动停靠的原则，显示的结果如下我们就能很好的理解了：
浮动的字围现象:
浮动的元素并不会覆盖文字，文字反而会围在浮动元素的周围。
举个例子，有如下的html：
<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>无标题文档</title>
<style>
img{
float:left;
}
.inner{
width:300px;
height:300px;
background:red;
}
</style>
</head>
<body>
<div>
???? <img?src="wine.jpg">
????????750ml*6瓶，一喝就醉！！葡萄美酒夜光杯,欲饮琵琶马上催。醉卧沙场君莫笑，古来征战几人回。
????????<div?class="inner">
???????? 123文字文字 文字文字 文字文字 文字文字 文字文字 文字文字
???????? 文字文字 文字文字
???????????? 文字文字 文字文字 文字文字 文字文字 文字文字 文字文字
???????????? 文字文字 文字文字 文字文字 文字文字
????????</div>
????</div>
</body>
</html>
根据浮动的字围现象，很好的可以理解页面显示如下：
十五、浮动练习之ul实现导航条
float浮动练习之ul实现导航条，案例最终效果如下：
怎么实现的呢，下面是实现的html代码：
<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>02-ul练习导航条</title>
<style>
</style>
</head>
<body>
<ul>
????????????<li>网页</li>
????????????<li>知道</li>
????????????<li>文库</li>
????????????<li>新闻</li>
????????????<li>贴吧</li>
????????????<li>音乐</li>
????????????<li>金融</li>
????????</ul>
</body>
</html>
下面是控制float的css代码：
*{
margin:0;
padding:0;
}
ul{
list-style:none;
width:710px;
height:50px;
background:#ccc;
margin:0?auto;
margin-top:100px;
font-weight:bold;
}
ul?li{
float:left;
width:100px;
line-height:50px;
text-align:center;
border-right:1px?solid?rgba(0,0,0,0.6);
}
ul?li:nth-child(3){
background:skyblue;
}
ul?li:last-child{
border-right:0;
}
十六、浮动练习之图文混排
这次分享的“浮动练习之图文混排”这个案例做完后的效果是这样的：
这里用到的知识点是float浮动的字围现象。
代码如下：
<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>练习图文混排</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color:#eee;
}
dl{
width:400px;
height:150px;
background-color:#fff;
margin:10px?auto
}
dl?dt{
float:left;
}
dl?dt?img{
width:150px;
height:150px;
}
dl?dd{
width:250px;
height:150px;
float:right;
}
dl?dd?h3{
line-height:50px;
color:green;
margin:0?10px;
font-size:16px;
}
dl?dd?p{
line-height:24px;
color:#000;
margin:0?10px;
font-size:12px;
}
????</style>
</head>
<body>
<dl>
<dt><img?src="wine.jpg"/></dt>
<dd>
<h3>葡萄酒</h3>
<p>750ml*6瓶，一喝就醉！！葡萄美酒夜光杯,欲饮琵琶马上催。醉卧沙场君莫笑，古来征战几人回。</p>
</dd>?
</dl>
</body>
</html>
十七、浮动的清除
html元素不浮动且不设置宽高的情况下，块级元素宽度都是一行，高度自动包裹内容;行内元素宽高都是自动包裹。
浮动会引发的高度问题，如下分析：
1.子元素float(或者绝对定位)之后且没有设置父元素(不浮动)宽高的情况下，那么父元素宽高都为0，所以才有浮动的清除。
2.父元素浮动后，里面的子元素不浮动，那么父元素的宽高都是自动包裹子元素，因为父元素浮动了，下面的元素会顶上来，所以这个时候也要清除浮动。
针对上面float引发的高度问题，css里面通过clear来清除浮动。
clear
可选值
--left
--right
--both
清除浮动的方法：
1、设置高度
2、给后边的盒子添加clear以及解决父元素一起下来的问题
3、外墙法
4、内墙法
5、伪元素选择器
6、给前面浮动的元素设置overflow:hidden
我把这六种清除浮动的方法都写在一个html中，大家看注释就行了，就不单独一个个的分开写了，太累了。
<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>清除浮动的方法</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,
blockquote,th,td{margin:0;padding:0}
body{
background:#efefef;
/* border:1px?solid;*/
}
.box1{
background:red;
/*清除浮动方法1：要想让box2的p不跟box1里面的p浮动后在一行，就要给box1设置高度*/
/*height:20px;*/
/*清除浮动方法6：给box1设置overflow属性*/
overflow:hidden;
}
.box2{
/*
清除浮动方法2：给后边的盒子添加clear
none：默认，左边找左边，右边找右边
left：左边的不再找左边
right：右边不找右边
both：两边都不找
加入clear的盒子margin-top失效，因为margin-top的对象box1已经没有高度了，这时对象就变成body，
body是box2的父容器，
父容器没有边框会一起下来（这种现象除了设置边框还可以通过给父元素设置overflow:hidden来解决），
可以给body加边框演示
*/
???/*?clear:both;*/
background:blue;
/*margin-top:50px;*/
}
p{
width:100px;
background:yellow;
float:left;
}
.outWall{
clear:both;
}
.h20{
height:20px;
}
.innerWall{
clear:both;
}
/*清除浮动方法5：采用伪元素选择器，本质上跟内墙法一样。
height:0;设置宽高不起作用因为没有设置display
visibility:hidden;让添加的内容不可见*/
/*.box1::after{
content:"";
height:0;
display:block;
visibility:hidden;
clear:both;
}*/
/*让伪元素选择支持ie6*/
.box1{
*zoom:1;
}
</style>
</head>
<body>
<div?class="box1">
<p>我是段落1</p>
<p>我是段落1</p>
<p>我是段落1</p>
<!--清除浮动方法4：内墙法：写在第一个浮动元素容器所有浮动元素的最后边。box2的margin-top有效了，
box1的margin-bottom有效，
这时候设置margin一般使用innerWall这个div的高度-->
<!--<div?class="innerWall?h20"></div>-->
</div>
<!--清除浮动方法3：外墙法：写在两个浮动元素容器的中间。box2的margin-top有效了，box1的margin-bottom无效，
这时候设置margin一般使用outWall这个div的高度-->
<!--<div?class="outWall?h20"></div>-->
<div?class="box2">
<p>我是段落2</p>
<p>我是段落2</p>
<p>我是段落2</p>
</div>??
</body>
</html>
页面效果如下：
十八、css属性定位属性position介绍与z-index属性
position
可选值
--relative
--absolute
--fixed
相对定位relative：
相对于元素在标准流里的位置进行移动，不脱离标准流，周围的元素完全不受影响，区分css的3种元素类型，position:relative开始相对定位，使用top、right、bottom、left进行控制位置，如果不设置，即便开启了相对定位元素位置也不受影响。相对定位的元素层级提升，可以覆盖文本流中的其他元素了。方位词top、right、bottom、left取值百分比的时候针对的是父元素的百分比
绝对定位absolute：
绝对定位默认相对于body为参考点，如果祖先元素也是定位流（相对/绝对/固定），那么绝对定位的元素参考点就是它的祖先元素，脱标，不区分css的3种元素类型(直接设置宽高就生效，没必要再通过display转化之后再设置宽高)，如果同时有多个祖先元素是定位流（相对/绝对/固定），那么绝对定位的元素参考点就是离他最近的祖先元素。
position:absolute开始相对定位，使用top、right、bottom、left进行控制位置，如果不设置，即便开启了绝对定位元素位置也不受影响。方位词top、right、bottom、left取值百分比的时候针对的是父元素的百分比。
固定定位fixed：
固定定位的元素被锁定在屏幕的某个位置上，不随页面的滚动而滚动。脱标，不区分css的3种元素类型(直接设置宽高就生效，没必要再display)，position:fixed开始相对定位，使用top、right、bottom、left进行控制位置，如果不设置，即便开启了固定定位元素位置也不受影响。
z-index
当元素开启定位以后就才可以使用该属性，用于指定元素的层级，值越大层级越高，越显示在上层，如z-index:999。
css position属性的语法格式：
position：static | absolute|relative | fixed | sticky
默认值：static
适用于：除display属性定义为table-column-group | table-column之外的一切元素
继承性：无
功能说明：
position属性用于指定一个元素在文档中的定位方式
当position的值为非static时，其层叠级别通过z-index属性定义。当position取值为absolute的时候，如果四个偏移属性top，right，bottom，left都没有设置，那么该元素会紧随在其前面的兄弟元素之后，但在位置上不影响常规流中的任何元素。
static | absolute|relative | fixed | sticky取值含义解释：
static：被static修饰的html对象遵循着标准流。此时4个定位偏移属性（即：top,right,bottom,left）不会起作用。
relative：被relative修饰的html对象依旧遵循标准文档流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute：对象脱离标准流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
fixed：与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
sticky：这个是css3中新增的一个属性，对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中有时会见到的吸附效果。
举个小例子：
需求：如何让一个div在水平方向和垂直方向都居中？
<!DOCTYPE html>
<html>
<head>
<title>div在水平方向和垂直方向都居中</title>
<meta charset="utf-8">
<style>
#div {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 40px;
margin: -20px 0 0 -75px;
padding: 0 10px;
background: rgb(255,100,50);
line-height: 2.5;
text-align:center;
}
</style>
</head>
<body>
<div id="div">水平、垂直都居中</div>
</body>
</html>
效果如图：
十九、定位position练习之导航条
上篇文章介绍了一下css中的position定位属性，一般在开发中，我们使用最多的就是子绝父相来应用position实现元素的定位。什么叫子绝父相呢？就是子元素使用absolute定位，而父元素使用relative定位，因为使用absolute的时候，如果父元素有定位，那么absolute相对的就是自己的父元素。当然除了父元素，你也可以是祖先元素，不管是父元素还是祖先元素，你都要分清你设置为position：absolute的元素是参照谁来定位的，这一点理清了其他都不是问题。
这篇文章我们来举个例子，使用子绝父相，效果展示如下：
这个小小的hot图标就是通过定位来实现布局的，下面是代码：
<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>11-子绝父相实现带图片的导航条</title>
<style>
</style>
</head>
<body>
<ul>
????????????<li>网页</li>
????????????<li>知道</li>
????????????<li>文库<img?src="hot.gif"/></li>
????????????<li>新闻</li>
????????????<li>贴吧</li>
????????????<li>音乐</li>
????????????<li>金融</li>
????????</ul>
</body>
</html>
css代码：
*{
margin:0;
padding:0;
}
ul{
list-style:none;
width:710px;
height:50px;
background:#ccc;
margin:0?auto;
margin-top:100px;
font-weight:bold;
}
ul?li{
float:left;
width:100px;
line-height:50px;
text-align:center;
border-right:1px?solid?rgba(0,0,0,0.6);
}
ul?li:nth-child(3){
background:skyblue;
position:relative;
}
ul?li:last-child{
border-right:0;
}
img{
position:absolute;
top:-1px;
/*让绝对定位的元素水平居中,使用Margin:0?auto无效,百分比针对的是父元素*/
left:50%;
margin-left:-11px;/*图片宽度的一半*/
}
二十、网页开发设计原则
网页开发设计原则总结：
从外到内：先写外部元素的css
从上到下：比如先开发头部，再是内容区，再是尾部，这样可以避免互相影响，可能我说你不太懂，反正这是经验之谈了，写多了css代码就知道了
垂直方向多采用标准流
水平方向多采用浮动流，
嵌套用padding
兄弟用margin
内容总结
以上是互联网集市为您收集整理的迁移html和css之一全部内容，希望文章能够帮你解决迁移html和css之一所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。