search

Home >Web Front-end >HTML Tutorial >CSS study notes three_html/css_WEB-ITnose

CSS study notes three_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:53:341059browse

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>

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>


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

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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：I'll give you a minute to read it. I have a question to ask about the CSS reference issue of single-line and multi-line textbox controls_html/css_WEB-ITnoseNext article：I'll give you a minute to read it. I have a question to ask about the CSS reference issue of single-line and multi-line textbox controls_html/css_WEB-ITnose

Related articles

See more