首页 > 代码库 > html学习之CSS控制宽高背景
html学习之CSS控制宽高背景
该笔记为自学html设计笔记,所有知识点为自己整理,如有疑问请浏览十八哥php教程,教程链接,点击这里。
知识梳理:1、html中的<head>和<body>分别为文本网页的头部和主体部分,其中head主要是定义html的类型和属性,比如title是标题部分,meta是机器搜索时的索引;body是html呈现的主体部分,是浏览网页可以看到得那一部分。
2、CSS 的引入方式
①外部链接一个CSS文件,我们在HTML头部分标明:<link href="http://www.mamicode.com/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设置间距
html学习之CSS控制宽高背景