CSS 学習ノート three_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS 学習ノート three_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:53:34

オリジナル

1053 人が閲覧しました

CSS ボックスモデル:

初期の Web デザインは主にテーブルでしたが、その後は主に div+css になりました

ボックスモデル:

1。

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

2. パディング: パディング:

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

3. マージン: マージン: マージン上、マージン下、マージン左、マージン右

CSS レイアウト

構文:

float:

none | right 値:

none

テキストはオブジェクトの右側に流れますテキストはオブジェクトの左側に流れます

:	デフォルト値。オブジェクトはフロートしません	left
:		right
:

構文:

クリア:

none

right

両方値: なし

浮遊オブジェクトは左側では許可されません浮遊物は許可されていませんそうです浮遊物は許可されません

デフォルト値。浮遊オブジェクトは両側で許可されます	左	:
	右	:
	両方	:

<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 の配置:

構文:

位置 :

静的 | 固定

相対

値: 静的 :

デフォルト値

。特別な配置はなく、オブジェクトは HTML の配置ルールに従いますオブジェクトが使用されます。そして、そのカスケードは z-index 属性を通じて定義されます ) 方式に従います。ただし、従うべき仕様がいくつかあります

<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>

ログイン後にコピー

要約すると、外側の領域に位置が定義されている場合、内側の領域で定義されている位置属性値は外側の領域用になります。ボディ

絶対	:	最も近い親を基準とした left、right、top、bottom およびその他の属性を使用して、オブジェクトをドキュメントフローの外にドラッグします位置設定が設定されているオブジェクトは絶対的に配置されます。そのような親オブジェクトが存在しない場合は、 body
fixed	:	はサポートされていません。オブジェクトの位置決めは絶対 (absolute
	相対	: オブジェクトは積み重ねることはできませんが、左、右、上、下、その他の属性に基づいて通常のドキュメントフロー内でオフセットされます

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="file:///C|/Users/Public/Pictures/Sample Pictures/1.jpg" height="200px" width="200px" alt="" />		</div> 		<div id="text">			这是一朵水仙花,呵呵呵呵呵呵呵呵呵呵呵呵呵呵asdsad最新的身份的广泛的广泛覆盖vbxcv大哥哥哥哥哥asdds的双方各持续持续持续弟弟！			撒反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复			反复！		</div>	</di

ログイン後にコピー

要約すると、エリアに位置が定義されている場合、位置属性は内側の領域で定義されています。値は外側の領域用です。そうでない場合は、内側の領域が本体用です。
リーリー

csdnでは写真とテキストを一緒に保存できますこの画像を保存するとテキストは保存できません