Bài giảng Lập trình Web - Chapter 2: CSS Positioning
CSS Positioning
Positioning – what is it?
Positioning refers to the layout of the items
on your page.
It also refers to the “position” descriptor in
CSS rules (more on this later)
Normal Flow – no “positioning”
Left to Right, Top to Bottom
Normal Flow – no “positioning”
Top left of the page = (0,0)
Left to Right, Top to Bottom
Normal Flow
The yellow box is the container (more on this)
This is a paragraph If the next paragraph
to which I have set fits next to it on the
the width.
right, it will line up.
Normal Flow
This is a paragraph However, if the second
to which I have set paragraph is too wide to fit
the width.
the container, it will shift
down.
Normal Flow
This is a paragraph
to which I have set
the width.
However, if the second
paragraph is too wide to fit
the container, it will shift
down.
This is the basic principle of Normal Flow
Box Model
All of the items in your webpage generate invisible “boxes” –
you have to figure out how all of those boxes will fit into your
page, like a puzzle.
Image
with link
Small print
text, bullet
list
Image
Set of links
(navigation)
Regular text
Box Model
Margin
Border
Padding
Content
Margin and Padding
styleX {
TRBL
margin: 10px 10px 10px 10px;
padding: 5px 5px 5px 5px; }
top – right – bottom - left
OR
styleX {
margin: 10px;
padding: 10px; }
OR
Shorthand:
Just one number = all 4 sides
Two numbers = top/bottom, left/right
styleX {
margin: 10px 15px; padding: 5px 10px; }
Interrupt the Flow
When you want to do fancier
• Absolute
• Relative
• Float
layout, you can position “boxes”
or “containers.” By doing this,
you interrupt the normal (top to
bottom, left to right) flow. You
can do this in three ways; Float,
Absolute, and Relative.
Float
HTML
<div>
This is the normal This text is
flow of a document; floated right.
from top to bottom,
left to right. When the floated text is
added, it moves to the top right
corner of the containing element, in
this case the <div>. Normal text
flows around the floated text.
<p> This is the
normal…</p>
<p class=“float”>This
text is floated
right.</p>
</div>
CSS
.float {float:right;}
Absolute
HTML
<div>
This is the normal flow of a
<p> This is the
document; from top to bottom, left
to right. When you add the
normal… <span
class=“abs”> This
text is absolutely
positioned.</span>…
top to bottom… </p>
This text is
absolutely positioned text, it
absolutely
moves to the coordinates you set
positioned.
based on the top left corner of the
containing element, in this case
the <div>. Normal text flows over
the absolutely positioned text.
There is no gap where the text is
taken from.
</div>
CSS
.abs {position: absolute;
top: 40px;
left: 80;}
This text is relatively
positioned.
Relative
HTML
<div>
This is the normal flow of a
document; This text is relatively
positioned from top to bottom, left
to right. When you add the
relatively positioned text, it moves
to the coordinates you set based
on the top left corner of the
containing element, in this case
the <div>. Normal text flows as
normal, but a gap is left where the
relative text used to be, and the
text overlaps with the newly
positioned relative text if they are
in the same area.
<p> This is the
normal… <span
class=“rel”> This text
is relatively positioned.
</span> … from top to
bottom…</p>
</div>
CSS
.rel {position: relative;
top: -50px;
left: -150px}
Before and After Pseudo-
elements
E:before and E:after
• E:before or E:after can be used to add
contents before or after a element <E>.
• We will deal come to these when we
discuss generated contents properties.
• This will be coming up after the examples
for selectors that we will discuss now.
Example
Example
18 trang
20640
Free
Bạn đang xem tài liệu "Bài giảng Lập trình Web - Chapter 2: CSS Positioning", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- bai_giang_lap_trinh_web_chapter_2_css_positioning.ppt
