HTML+CSS+DIV实战演练笔记

最新推荐文章于 2024-06-04 12:05:50 发布

qq_15288543

最新推荐文章于 2024-06-04 12:05:50 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_15288543/article/details/76944575

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简单工具：sublime Firebug

浮动布局

可以使div并排布局

<style type="text/css">
	#div1{

		width: 100px;
		height: 100px;
		background: red;
		float: left;
	}
	#div2{

		width: 100px;
		height: 100px;
		background: blue;
		float: left;
	}#div3{

		width: 400px;
		height: 400px;
		background: yellow;
	}
</style>
</head>

    <body>
    	<div id="div1">左边</div>
    	    	<div id="div2">右边</div>
    	    	    	<div id="div3">普通</div>

效果图：

div1 和div2 漂浮到左边之后，接下来的div被div1和div2所覆盖，怎么解决这样的情况？

*在div3加入属性 clear：left、right、both 不许有漂浮块在上面

页面布局演练：往往我们会在整个页面中声明一个最大块的div

    	<div id="container">
    		
    		<div id="header"></div>
    		<div id="main">
    			<div id="lside"></div>
			<div id="rside"></div>
    		</div>
    		<div id="footer"></div>
    	</div>

① lside和rside在main中漂浮时，main需要设置高度，否则footer不显示 注意：定义id不能用数字，否则没有效果

②当区域无法装下多个漂浮div时，会换到下一行中

注意：文件编码与charset声明的一致

盒子模型

外边距

：盒子与盒子之间的距离 margin ，margin-top,left,right,bottom

单独设置上下左右比较麻烦，可以在margin中统一设置，它会顺时针进行设置，没有的选择对边的值。

                 margin: 10px 20px;

边框

： border

三要素：宽，形状，颜色 border: 5px solid red; border-top,left,right,bottom

也可以单独设置边框的三要素

border-top-style:solid;
border-top-width:9px;
border-top-color: red;
CSS控制边框画三角形：

#triangle{
width: 0px;
height: 0px;
border-top: 50px solid white;
border-left: 50px solid white;
border-right: 50px solid white;
border-bottom: 50px solid yellow;
}

内边距

：（文字）内容到盒子边框的距离 padding 它和margin一样可以上下左右单独设置（共同设置）

当父div中有个子div，要使二者保持距离，是用父div的padding还是用子div的margin？

答：尽量用子div的margin，padding主要用在文字内容上，布局用margin （盒子与盒子用margin 盒子与文字用padding）

** paddding处的颜色就是背景色，因为background一直铺到border边框

**加入padding后盒子会变大，width和height设置的是文字部分的宽高，设置的padding、border和margin都是在这之外显示的
总结：一个div占的面积=width/height+padding+border+margin

应用

*利用margin使div页面自适应水平居中-----在最外面的div 设置 margin:0 auto;

* margin重叠现象：相邻的普通元素，上下边距并非普通的相加，而是取其中较大的边距值，这种现象叫做margin重叠

而漂浮float的div之间是不重叠的，而是相加

*内联元素 in-line(行内元素)： 只在行内起作用，不换行，设置宽高是没有意义的,竖直方向上不可以设置margin和padding，水平方向上可以设置。
* span和div可以相互转化 display：block； display：inline；属性是none的话，会隐藏。

CSS控制文本

p标签段落缩进：文本位置下划线字间距

text-indent: 20px;
text-align: center;
text-decoration: underline;
letter-spacing: 5px;

对文字的控制：

font-style: italic; 斜体
font-weight: bold;
font-size: 12px;
line-height: 3px; 行高
font-family: "SimHei";字体
使用一个font可以设定，需按照顺序
标题一般用微软雅黑（无衬线） sans-serif 正文用宋体（有衬线） serif
并且，你选择的字体，客户机可能没有，默认会是宋体。这时，可以排列多个字体逗号隔开

背景图片

可以background统一设置：
background-image: url("1.png"); /* 倒入图片*/
background-repeat: no-repeat; /* 根据图片大小设置铺排*/
background-attachment : fixed 固定图片位置，滚动滚动条位置不变
background-position: top right; 还有bottom等等属性值
还可以用像素精确控制左上角是（0,0）点，控制div较小，可以只显示特定区域的图片
background-position: -150px -190px;
在我们设置路径时，到底是相对哪个文件的路径来找？
在我们采用样式表嵌入式的写法的时候，我们是以当前的index.html网页做相对文件，来设置引入图片的路径，所以设置图片路径的时候只要用
./ 来表示当前同级images文件夹下的图片；但是当我们采用外嵌式的写法，应当是以我们当前的index.css文件所在路径做为相对路径找起。
此时的图片应该为当前index.css文件的上一级css文件夹的同级images文件夹下的图片。

*选择器的优先级不用死记，根据工具（firebug）确定即可
*相同的元素，如li在不同的浏览器下，显示的效果稍有不同，可以通过css强制让所有元素的属性值都一样
*新闻的标题用h标签，段落用p标签
* img标签的使用<img src="" alt="" title="鼠标一上去，显示"> 图片是内联(正常的内联元素不能设置宽高)替换元素，替换元素是能设置宽和高的，可以将其转成块，去掉margin。
有序列表和无序列表
ul和ol的list-style-type一般都设置成none，一般设置背景图片
表格： table tr td
border-collapse : separate | collapse
超链接<a> title属性显示鼠标放上去的内容

<a href="http://www.baidu.com" target="_blank" title="请点击">百度,新窗口打开</a>
<a href="4.html #p1">p1锚点</a>
<a href="4.html #p2">p2锚点</a>
<a href="4.html# p3">p3锚点</a>
<a name="p1"></a> 或者使用id属性
p1 
<a name="p2"></a>
p2
<a name="p3"></a>
p3

伪类

css允许我们对a标签的4种状态设置各自的css特性，叫做cdd伪类

a:link a:hover a:active(一般不会写) a:visited

字符实体看手册如大于号，小于号，人民币符号

尺寸的表示：

①使用像素表示②用百分比表示

px表示文字大小，em是相对大小，指父元素中的1个倍的大小，默认理解为父元素的font-size就是1个em单位

利用行高将文字居中，

行高设置与导航栏（ul嵌li嵌a）的高度一样 line-height:37px;

相对定位与绝对定位：
相对定位是指元素在其正常位置，偏移某些尺寸。position: relative;

绝对定位是指相对于父元素的top，left，right，bottom来定位
*但是，用绝对定位时，父元素要求有position属性才行，否则将依据父的父，父的父......body，哪个祖先有position属性，
相对于哪个祖先，直到body。
父元素 position:relative; 它飘在父元素的上空，不占用位置，想让谁飘在上方，设置z-index，看谁飞的高显示谁

其他：

#nav a{
font-size: 16px;
font-family: "楷体";
text-decoration: none;
color: red;
display: block;//将a标签改成块状元素,就可以设置宽和高了
width: 80px;
height: 20px;
text-align: center;//水平居中
line-height: 20px; //竖直居中

}
#nav a:hover{

color:green;
background: url("images/nav_on.gif"); //鼠标放上来时，只改变文字部分的样式，因为a标签是内联元素
}

div宽高：①像素表示②百分比表示：相对于父元素的宽高
字体大小：①像素表示②em表示：em是相对大小，父元素的font-size为1单位em

框架集：
<frameset>和<frame>