Today's goal:
· Be able to tell three kinds of elements positioning mechanism
· Be able to tell the meaning of the four kinds of targeting methods position
· Be able to understand the difference between absolute and relative positioning of
· Be able to say a fixed location usage scenarios (ad)
· Name four sides can be positioned offset properties used
· Be able to understand the relative positioning of the parent element set, set absolute positioning child elements of meaning
· Able to understand and use the Save mode attribute in css3
· Be able to understand the new css3 attribute selectors
· Be able to understand the new css3 pseudo-class selectors
· Be able to understand the new css3 pseudo-element selectors
A positioning (focus)
Positioning of use:
1.4 kinds of targeting: static, relative, absolute, fixed
2.4 kinds of edge offset properties: left, right, top, bottom
Note: The offset value is an accurate understanding of "how many pixels from what position." The top: 100px; 100 pixels from the top (go down)
1. Static positioning
All standard streams are static positioning
grammar:position:static
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:static;/* 设置静态定位 */
top:20px;/* 设置边偏移 */
}
.box1{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
| Renderings |
|---|
 |
to sum up:
1. with less work, because the addition of static positioning, the standard flow element is
2. The offset value is invalid static positioning
Be used: generally the elements already set is reduced to the standard stream positioned
We later said positioning does not contain static positioning
2. The relative positioning
With respect to position themselves at the position of the standard moving stream
grammar:position：relative
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:relative;/* 设置相对定位 */
top:20px;/* 设置边偏移 */
left:30px;
}
.box1{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
| Renderings |
|---|
 |
to sum up:
1. The relative positioning of the reference standard in the self-position flow offset, the starting point is the position of the own mobile standard stream
2. The standard will not affect the flow of the elements, without departing from the document flow, after moving, the standard stream itself also occupies space, occupying a position of real or standard flow position (not in the soul of the flesh forever)
3. can cover over the standard stream
Usage scenarios: fine-tuning elements with absolute positioning and to achieve results
3. Absolute positioning
From the parent element has been set up to find immediate parent element positioning ourselves as the offset reference, can not be found to continue looking up, until the stop html
grammar:position:absolute
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:absolute;/* 设置绝对定位 */
top:20px;/* 设置边偏移 */
left:30px;
}
.box1{
width:200px;
height:200px;
background:#f00;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
| Renderings |
|---|
 |
to sum up:
1. Reference disposed through positioning offset position (relative / absolute / fixed) direct parent element or immediate ancestor elements, has been found to not higher looking until html
2. The flow will be from the standard, no longer inherit parent's width (whether block or element row elements, wherein the content depends on the size of the box), can define the width and height, the standard does not occupy the space stream
3.margin: auto set off for absolutely positioned elements do not work
4. Set the time offset direction, a horizontal or vertical setting can only, a plurality of no significance
Usage scenarios: the relative positioning with the use of (usually with relative positioning, but not absolute, is relative positioning)
Father with child Jedi
Case:
1. Let the box vertically centered horizontally (horizontal center, also centered vertically)
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid #000;
position:absolute;/* 设置绝对定位 */
top:50%;/* 设置上边偏移 */
margin-left:-50px;/* 往左边移动自身宽度的一般 */
left:50%;/* 设置做边偏移 */
margin-top:-50px;/* 往上面移动自身高度的一半 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| Renderings |
|---|
 |
2. Add logo picture
| Effect icon |
|---|
 |
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:290px;
height:163px;
position:relative;/* 父元素设置相对定位 */
}
.logo{
width:52px;
height:36px;
background:url(2.png);
position:absolute;/* 设置logo为绝对定位，父元素为相对定位，偏移位置相对父元素 */
right:0;/* 最右边 */
top:0;/* 最上面 */
}
</style>
</head>
<body>
<div class="box">
<img src="1.gif" />
<span class="logo"></span>
</div>
<div class="box">
<img src="1.gif" />
<span class="logo"></span>
</div>
</body>
Summary: parent element using relative positioning (without departing from the standard flow, does not cover the plurality of write), the sub-element absolute positioning (with respect to the position of the parent box) with the parent child must ---
3. FIG layout rotation (Jingdong Example)
| Effect icon |
|---|
 |
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:590px;
height:470px;
margin:0 auto;
border:1px solid #000;
position:relative;/* 设置相对定位，因为左右按钮和下面的小圆点都需要在当前元素上面 */
}
ul,ol{
list-style:none;
padding:0;
margin:0;
}
ul li{
display:none;
}
ul li.on{
display:block;
}
ol{
width:152px;
height:18px;
position:absolute;/* 设置绝对定位，相对于父元素进行偏移 */
left:46px;/* 左边偏移 */
bottom:20px;/* 下面偏移 */
}
ol li{
float:left;
width:10px;
height:10px;
border-radius:50%;
border:1px solid #fff;
margin:4px;
}
ol li.on{
width:4px;
height:4px;
border:4px #999 solid;
background:#fff;
}
.box>a{
text-decoration:none;
color:#fff;
background:#666;
width:24px;
height:40px;
display:block;
text-align:center;
line-height:40px;
position:absolute;/* 设置绝对定位，相对父元素进行偏移 */
top:50%;/* 上边偏移 */
margin-top:-20px;/* 向上移动自身高度的一半，已达到居中的效果 */
}
.box>a.left{
left:0; /* 左按钮左边偏移为0，在最左边 */
}
.box>a.right{
right:0; /* 右按钮右边偏移为0，在最右边 */
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="on"><a href="###"><img src="img/banner1.jpg" /></a></li>
<li><a href="###"><img src="img/banner2.jpg" /></a></li>
<li><a href="###"><img src="img/banner3.jpg" /></a></li>
</ul>
<ol>
<li class="on"></li>
<li></li>
<li></li>
</ol>
<a class="left" href="###"><</a>
<a class="right" href="###">></a>
</div>
</body>
4. Fixed Location
In the browser as a reference offset, and the fixed scroll positioning invalid
grammar:position:fixed
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width:300px;
height:200px;
background:#abcdef;
position:fixed;/* 设置固定定位，相对于浏览器窗口 */
left:50%;
top:50%;
margin-left:-150px;
margin-top:-100px;
}
.text{
width:20px;
}
</style>
</head>
<body>
<div class="text">
日照香炉生紫烟，遥看瀑布挂前川。
飞流直下三千尺，疑是银河落九天。
</div>
<div class="box"></div>
</body>
| Renderings |
|---|
 |
to sum up:
1. will flow out of the document, does not occupy space standard streams
2. does not inherit the parent element's width and height, width and height needs to define itself
3.margin: auto elements fixedly positioned on the ineffective
4. With the scroll bar to scroll will not forever fixed position in the browser window (starting point of the movement: the browser window, scroll bars to set the fixed positioning of elements invalid)
Usage scenarios: Advertising commonly used in the lower right corner of the page "Back to the top", or the left and right sides of the site
Case:
Jingdong rightmost small list
| Case renderings |
|---|
 |
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
.container{
height:2000px;
border-right:5px #7A6E6E solid;
}
ul{
list-style:none;
padding:0;
margin:0;
position:fixed;
right:5px;
top:50%;
margin-top:-95px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#"><img src="img/1.jpg" /></a></li>
<li><a href="#"><img src="img/2.jpg" /></a></li>
<li><a href="#"><img src="img/3.jpg" /></a></li>
<li><a href="#"><img src="img/4.jpg" /></a></li>
<li><a href="#"><img src="img/5.jpg" /></a></li>
</ul>
</div>
</body>
Four kinds of positioning summary
| Positioning mode | Are possession off the mark position | You can use the offset edge | Moving the reference position |
|---|---|---|---|
| Static static | Not marked off, the normal mode | Can not | Normal mode |
| Relative positioning relative | Not off the mark, occupies a position | can | Position relative to itself |
| Absolute positioning absolute | Completely off the mark, does not occupy the position | can | With respect to the parent mobile position location |
| Fixed positioning fixed | Completely off the mark, does not occupy the position | can | Position relative to the mobile browser |
The cascading effect of the positioning element
Stack level control "positioning" elements
grammar:z-index:值
Value:
1. Digital:
A positive number, the larger the number, the higher the level, the closer the user
Negative number, the lower the level, the farther away from the user
Same 2.auto :( default values) and the level of the parent element
3. A positive number than the big auto, auto smaller than the negative
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 两个盒子都设置相对定位并偏移，中间有重叠的部分，默认后设置的会覆盖先设置的 */
.box{
width:100px;
height:100px;
background:#f00;
position:relative;
top:50px;
z-index:2;/* 设置层叠高一点，会覆盖后设置的 */
}
.box1{
width:200px;
height:200px;
background:#0f0;
position:relative;
left:50px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
| Renderings |
|---|
 |
to sum up:
1.z-index only effective for positioning elements (but not including static positioning)
2.z-index larger the value, the higher level
3. If the parent element has compared the level of the (parent element "has a" z-index of the time, and the value is not auto), then between the sub-elements and sub-elements will not go to comparison
Topic : big box to suppress the large box, large box inside the child element pressed on the box
Two and distinguishing, css3 and the css2
css3 on the basis of the original added a lot of css attribute selectors, pseudo-class selectors, selectors and pseudo object animation
H5=html5 + css3 +js
Large front-end: js
1. Save mode within
It can bring padding padding and border impact of increased box removed
grammar:box-sizing:border-box;
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#099;
border:20px solid #333;
padding:50px;
box-sizing:border-box;/* 设置内减模式 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| Renderings |
|---|
 |
Summary: margin not to affect the size of the box
2. Add attribute selectors
a) syntax:元素[属性^=值]
Select property to specify the value of the beginning of the character elements
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
[name^='user']{
color:red;
}
</style>
</head>
<body>
<div name="username">这是盒子1</div>
<div name="user-name">这是盒子2</div>
<div name="name user">这是盒子3</div>
<div name="user_name">这是盒子4</div>
<div name="user">这是盒子5</div>
</body>
| Renderings |
|---|
 |
b) Syntax:元素[属性$=值]
Select property to specify the value of the end of the character elements
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/* 属性值以指定字符结尾的元素 */
[name$="e"]{
color:red;
}
</style>
</head>
<body>
<div name="username">这是盒子1</div>
<div name="user-name">这是盒子2</div>
<div name="name user">这是盒子3</div>
<div name="user_name">这是盒子4</div>
<div name="user">这是盒子5</div>
</body>
| Renderings |
|---|
 |
3. Add pseudo class selector
| Pseudo class selector | effect |
|---|---|
| :root | It can be understood as the root |
| li:first-child | Representatives identify the parent element in the first li child element |
| li:last-child | Li representatives find the last child element of the parent element |
| li:nth-child(n) | Find out the n-th li child element of the parent element |
| li:nth-child(even) | Representatives identify the parent element odd li children |
| li:nth-child(odd) | Representatives identify the parent element in the even of li children |
| li:empty | Representatives to find an empty label li child element of the parent element content |
| li:nth-of-type(n) | Find the first few li tag |
| li:first-of-type | Find the first li tag |
| li:last-of-type | To find the last tag li |
| li:only-child | Yuiitsuko element |
Summary: Key: li: first-child li: last-child li: nth-child (n) li: nth-child (2n + 1) odd elements
4. 2d conversion effect
You may be provided movement, rotation, size
grammar:transform:值
a) Mobile
Syntax:transform:translate(值1,值2);
Values: a first value representative of lateral movement of the pixel, the second pixel value represents the longitudinal movement of
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
}
.box:hover{
transform:translate(50px,20px); /* 横线移动和纵向移动 */
/*transform:translateY(50px);*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| Renderings |
|---|
 |
Learn a trick: x-axis is provided only moving or y-axis and may be used translateX translateY, which can only set a value
b) rotating
Syntax:transform:rotate(角度);transform-origin:横向坐标 纵向坐标;
Value:
1. writing angle: Digital deg.
2. The longitudinal and transverse coordinates of the center of rotation of coordinates determined, may be a pixel, or the keyword (left, right, top, bottom, center), is not set, the default is the center point of the center of rotation
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
margin:200px;
border-left:10px solid #0f0;
border-bottom:10px solid #00f;
}
.box:hover{
transform:rotate(45deg);/* 设置旋转和角度 */
transform-origin:left top;/* 设置旋转的圆心 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
| Renderings |
|---|
 |
c) Zoom
Syntax:transform:scale(值)
Value: multiple, can be an integer, it can be a decimal
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:200px;
height:200px;
background:#f00;
}
.box:hover{
transform:scale(2);
}
</style>
</head>
<body>
<div class="box">
</div>
<p>asdf</p>
</body>
| Renderings |
|---|
 |
Learn this: if there are two values, the first representative of a ratio of the width, height and the second represents the ratio
5.过渡效果
是一个动画的效果
语法：transition:动画css属性 过渡时间秒数 速度类型 延迟的秒数
取值：第一个值，写css属性名称，就是要发生改变的css属性，第二个值是时间单位s秒，第三个值是发生改变的曲线linear匀速，ease先慢后快再慢，第四个值可以定义动画在几秒后开始
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
img{
display:block;
margin:50px auto;
border:1px solid #000;
/* 加过渡效果，必须是在元素原本的样式上面加，不在伪类上加 */
transition:transform 2s linear;
}
img:hover{
transform:scale(1.5);
}
</style>
</head>
<body>
<img src="img/meinv.jpg" />
</body>
| 效果图 |
|---|
 |