首页 > 代码库 > CSS学习笔记三

CSS学习笔记三

2024-08-04 00:13:12   213人阅读

CSS盒子模型:


早期的网页设计主要是表格,后来主要是div+css

盒子模型：

1.边框：border：

border-top、border-bottom、border-left、border-right

2.内边距：padding：

padding-top、padding-bottom、padding-left、padding-right

3.外边距：margin：

margin-top、margin-bottom、margin-left、margin-right


CSS的布局


语法：
float : none |left |right
取值：
none :　默认值。对象不飘浮
left :　文本流向对象的右边
right :　文本流向对象的左边

语法：
clear : none |left |right | both
取值：
none :　默认值。允许两边都可以有浮动对象
left :　不允许左边有浮动对象
right :　不允许右边有浮动对象
both :　不允许有浮动对象


<style type="text/css">
/*body{    因为浏览器的不同，肯能在开发时，改变body外边框的值
margin:0px;
}*/

div{
border:#000000;
padding-top:10px;
padding-bottom:50px;
padding-left:100px;
padding-right:150px;
/*padding:10px 50px 100px 150px ;/*上右下左*/
}

#div_1{
background-color:#FF0000;
/*margin-left:200px;*/
float:left;/**/
}
#div_2{
background-color:#FF9900;
float:left;
/*clear:left;*/
}
#div_3{
background-color:#3300FF;
/*clear:right;*/
}
</style>
</head>

<body>
	<div id="div_1">1号盒子</div>
	<div id="div_2">2号盒子</div>
	<div id="div_3">3号盒子</div>
</body>


CSS的定位：

语法：
position : static |absolute |fixed | relative
取值：
static :　默认值。无特殊定位，对象遵循HTML定位规则
absolute :　将对象从文档流中拖出，使用 left， right ， top， bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body对象。而其层叠通过 z-index属性定义
fixed:　未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative :　对象不可层叠，但将依据 left， right ， top， bottom等属性在正常文档流中偏移位置


<style type="text/css">
div{
border:#000000 solid 1px;
height:100px;
width:200px;
}
#div_0{
background-color:#66FF99;
height:400px;
width:400px;
position:absolute;
/*position:static;*/
top:100px;
left:100px;
}
#div_1{
	background-color:#FF0000;
	/*position:absolute;*/  /*假设父对象div_0没有定义position，比如是static，那么他的定位属性相对于body，有就是相对于div_0 */
	position:relative;
	left: 80px;/*通过一个小程序可以实现数值的改变，进而实现该盒子在页面飘动的效果*/
	top:50px;/*这个数值是相对于body而言的*/
	
}
#div_2{
background-color:#FF9900;
width:200px;
}
#div_3{
background-color:#3300FF;
}

</style>
</head>

<body>
	<div id="div_0">
		<div id="div_1">1号盒子</div>
		<div id="div_2">2号盒子</div>
		<div id="div_3">3号盒子</div>
	</div> 
</body>

总结来说，如果外区域有定义过position，那么内区域定义的position属性值是针对外区域而言，如果没有那么内区域针对的是body而言


CSS的图文混排


<style type="text/css">
#imgtext{
border:#3333FF dashed 1px;
width:280px;
}
#img{
float:right;
}
#text{
color:#F6C;
font-family:"华文隶书";
}

</style>
</head>

<body>
	<div id="imgtext">
		<div id="img">
			<img src=http://www.mamicode.com/"file:///C|/Users/Public/Pictures/Sample Pictures/1.jpg" height="200px" width="200px" alt="" />>

总结来说，如果外区域有定义过position，那么内区域定义的position属性值是针对外区域而言，如果没有那么内区域针对的是body而言


CSS图像签名

<style type="text/css">

#imgtest{
border: #FF0000 dotted 1px;
    width: 350px;
    /*margin: 50px;*/
    position: absolute;/*防止图像动了,而文字未动,所以在imgtext也要定位*/
    top:50px ;
}

#text{
    font-family: "华文隶书";
    font-size: 20px;
    position: absolute;
    top: 30px;
    left: 10px;
}

</style>
</head>
<body>
<div id="imgtest">
    <div id="img">
         <img src=http://www.mamicode.com/"1.jpg" height="300px" width="280px"/>>
csdn里的图片是图片文字可以一起保存的,这个图片保存的话,文字是保存不下来


CSS学习笔记三


联系
我们