CSS study notes three_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS study notes three_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:53:34

Original

1034 people have browsed it

CSS box model:

Early web design was mainly tables, and later it was mainly div css

Box model:

1. Border: border:

border-top, border-bottom, border-left, border-right

2. Padding: padding:

padding-top, padding-bottom, padding-left , padding-right

3. Margin: margin:

margin-top, margin-bottom, margin-left, margin-right

CSS layout

Syntax:

float : none | left | right

Values:

none	:	默认值。对象不飘浮
left	:	文本流向对象的右边
right	:	文本流向对象的左边

none

Default value

. The object does not float

left

Text flows to the right of the object

right

Text flows to the left of the object

Syntax:

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

clear :

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>

Copy after login

Values:

none	:	Default value. Allow floating objects on both sides
left	:	No Allow floating objects on the left
right	:	Do not allow the right There are floating objects
both	:	No floating objects are allowed

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

CSS positioning:

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

Copy after login

Syntax:

position:
static |

absolute

| fixed |

relative

Values:

static	:	Default value <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 Copy after login . No special positioning, the object follows HTML positioning rules
absolute	:	Drag the object out of the document flow and use left, right, top, bottom and other properties to absolutely position it relative to its closest parent object with the most positioning settings. If no such parent object exists, the body object is used. The cascade is defined through the z-index attribute
fixed	:	Not supported . Object positioning follows the absolute ( absolute) method. But some specifications must be followed
relative	:	Objects cannot be stacked , but the position will be offset in the normal document flow based on left, right, top, bottom and other attributes

In summary, if the outer area has defined position, then the position attribute value defined in the inner area is for the outer area. If not, then the inner area The area is for the body

<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="1.jpg" height="300px" width="280px"/>    </div>    <div id="text">        小狗    </div></div></body>

Copy after login

CSS image and text mixing

In summary, if position is defined in the outer area, then the position attribute value defined in the inner area is for the outer area. If not, then the inner area is for the body CSS Image Signature The pictures in csdn can be saved together with the picture and text. If you save this picture, the text cannot be saved