迁移html和css之一

乐之者java

于 2021-05-12 13:46:23 发布

阅读量552

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/116704717

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

一、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

乐之者java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
迁移html和css之一

一、html元素的理解html元素，也叫html标签，是用来改变网页结构的作用。也就是说“标记”的作用：就是通过给内容添加标签来创建元素的过程。html标签写法注意点：01.HTML 标签以 < 开头，以 > 结束，比如表示段落文本的 <p>。02.标签一般都成对出现，一个开始标签和一个结束标签就在文档中创建了一个元素。03.结束标签用一个斜杠表示元素的关闭或结束，比如 </p>。如...
复制链接

扫一扫

专栏目录