首页 > 代码库 > html学习之CSS控制宽高背景

html学习之CSS控制宽高背景

2024-07-25 19:27:01   211人阅读

该笔记为自学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控制宽高背景


联系
我们