css盒子模型

来源：互联网发布：js设置input边框颜色编辑：程序博客网时间：2024/06/10 02:47

CSS盒子模型

盒子模型的原理图：

这里写图片描述
细节说明：
1.html元素都可以看成一个盒子。
2.盒子模型的参照物不一样，则使用的css属性不一样，比如从div的角度看，是margin-right,从div2看，则是margin-left。
3.如果你不希望破坏外观，则尽量使用margin布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），margin如果过大，盒子内容被挤到盒子外边去，但是盒子本身没有变化。

盒子模型详细图：

这里写图片描述

小范例1：
这里写图片描述
源代码：
box.html:

<html><head><link rel="stylesheet" type="text/css" href="box2.css"></head><body><div class="div1"><ul class="faceul"><li><img src="tupian.jpg"><a href="#">海滩</a></li><li><img src="tupian.jpg"></li><li><img src="tupian.jpg"></li><li><img src="tupian.jpg"></li><li><img src="tupian.jpg"></li><li><img src="tupian.jpg"></li><li><img src="tupian.jpg"></li><li><img src="tupian.jpg"></li><li><img src="tupian.jpg"></li><li><img src="tupian.jpg"></li><li><img src="tupian.jpg"></li><li><img src="tupian.jpg"></li></ul></div></body></html>

box.css:

body{    margin:0px;    padding:0px;}.div1{    width:500px;    height:300px;    border:1px solid gray;    margin-left:200px;    margin-top:100px;}.div1 img{    width:100px;    height:30px;}/*faceul用于控制显示图片区域宽度和高度*/.faceul{    width:350px;    height:250px;    border:1px solid red;    list-style-type:none;    padding:0;}/*用于控制单个图片区域大小*/.faceul li{    width:50px;    height:60px;    border:1px solid blue;    float:left; /*左浮动*/    margin-left:5px;    margin-top:5px;}.faceul img{    width:50px;    margin-top:5px;}.faceul a{    font-size:5px;    margin-left:12px;    margin-top:0px;}a:link{    text-decoration:none;    color:black;}

小范例2：
这里写图片描述

源代码：
boxshili.html

<html><head><link rel="stylesheet" type="text/css" href="boxshili.css"></head><body><div class="div1"><div><span class="span1"><font class="font1">美丽风景</font><a href="#">更多风景</a></span><ul class="faceul"><li><img src="风景一.jpg"><br/><a href="#">风景一</a></li><li><img src="风景二.jpg"><br/><a href="#">风景二</a></li><li><img src="风景三.jpg"><br/><a href="#">风景三</a></li></ul></div><div><span class="span1"><font class="font1">诱惑美食</font><a href="#">更多美食</a></span><ul class="faceul"><li><img src="美食一.jpg"><br/><a href="#">美食一</a></li><li><img src="美食二.jpg"><br/><a href="#">美食二</a></li><li><img src="美食三.jpg"><br/><a href="#">美食三</a></li></ul></div><div><span class="span1"><font class="font1">优美建筑</font><a href="#">更多建筑</a></span><ul class="faceul"><li><img src="建筑一.jpg"><br/><a href="#">建筑一</a></li><li><img src="建筑二.jpg"><br/><a href="#">建筑二</a></li><li><img src="建筑三.jpg"><br/><a href="#">建筑三</a></li></ul></div></div></body></html>

boxshili.css

body{    margin:0 auto;    width:1000px;    height:1000px;    border:1px solid blue;}/*定义几个常用字体*/.font1{    font-weight:bold;    font-size:18px;    font-style:italic;    margin:4px 0 0 4px;}.span1{    display:block;}.span1 a{    float:right;}   .div1{    width:330px;    height:370px;    font-size:10px;    /*border:1px solid gray;*/}.div1 img{    width:80px;    height:50px;}/*定义几种超链接样式*/a:link{    text-decoration:none;}.faceul{    width:350px;    height:75px;    list-style-type:none;    padding:0;    font-size:10px;}.faceul li{    float:left;    width:100px;    height:78px;    margin:4px;     text-align:center; /*表示放在该元素的其他元素会居中放置*/}.faceul img{    margin-top:2px;}

阅读全文

0 0