html学习之CSS控制宽高背景
该笔记为自学html设计笔记，所有知识点为自己整理，如有疑问请浏览十八哥php教程，教程链接，点击这里。
知识梳理：1、html中的<head>和<body>分别为文本网页的头部和主体部分，其中head主要是定义html的类型和属性，比如title是标题部分，meta是机器搜索时的索引；body是html呈现的主体部分，是浏览网页可以看到得那一部分。
2、CSS 的引入方式
①外部链接一个CSS文件，我们在HTML头部分标明：<link href="css/my.css" rel="stylesheet" type="text/css"/>
②头部直接写入CSS: <style type="text/css"> div{margin:0;padding:0;border:1px solid red;}</style>
③外接多个CSS文件时：<style type="text/css"> @import url(my.css); </style>
④直接在html标签里写入对这个标签的CSS控制，如：<div style="border:1px solid red;">测试信息</div>
3、定义html中的块属性可以在head中定义，例如
<style type="text/css"> div{ height: 300px; width: 500px; background: red; } </style>
上例实现所有的div属性都为所定义的，如果要想实现自定义的div属性，可以通过下面的例子实现
<style type="text/css"> div{ height: 300px; width: 500px; background: red; } #up{ background: green; } #center{ background: blue; } #bottom{ background: black; } </style>
正文部分：CSS控制宽高
利用div控制宽高
<div id="up"></div> <div id="center"></div> <div id="bottom"></div>
利用浮动来控制块的左右布局
例子
#up{
background: green;
float: left;
}
清除浮动
clear: left;
clear: both;
利用margin设置四个方向上的间距值
margin: 10px;
margin-top：10px;
margin-right:10px;
margin-left:10px;
margin-bottom:10px;
border的三要素：宽度、形状和颜色
盒子与文字之间的距离用padding设置间距
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
