Hỏi về CSS [Lưu trữ] - Diễn Đàn Cần Thơ Online

zeroonea

28-05-2007, 02:21

{@:

- Cho mình hỏi thuộc tính float, clear có ý nghĩa là gì ??, viết ra xem thử thì biết tác dụng nhưng quả thực ko hiểu nó làm việc như thế nào.

<div style="border:1px solid #999999;">
<div style="float:left">
<img src="nothing.jpg" />
</div>
<div>
something for nothing
</div>
<div style="clear:both"></div>
</div>

- Nếu ko có hàng <div style="clear:both"></div> thì trong ví dụ trên, cái border bọc ở ngoài ko bao hết 2 div mà chỉ bao div thứ 2 có chữ something for nothing

- Chả hiểu <div style="clear:both"></div> có tác dụng gì nữa

- Còn mấy giá trị là "inherit" thì hiểu mơ hồ là thừa kế, nhưng chẳng biết nó thừa kế từ cái nào ???

- Còn khi height và width được set là auto thì nó sẽ được tính như thế nào, theo nội dung bên trong (div) ????

:@}

tumickey

28-05-2007, 08:33

clear:

http://www.w3schools.com/css/pr_class_clear.asp

float : http://www.w3schools.com/css/pr_class_float.asp

inherit: http://dorward.me.uk/www/css/inheritance/

minhkhang

28-05-2007, 08:51

thuộc tính float thiết lập nơi mà một hình ảnh hay một text sẽ xuất hiện trong một phần tử khác.
nói cách khác :float: value; định vị trí hiển thị của một đối tượng so với đối tượng chứa nó và không làm ảnh hưởng đến phần text/image trong đối tượng cha
value:
+ none
+ left
+ right
thuộc tính float không có tính thừa kế

<div style="clear:both"></div> có tác dụng gì :xóa cả 2 thuộc tính canh trái và phải

clear :Để clear thuộc tính left,right của các đối tượng chứa nó
clear: value;
với value:
+ left
+ right
+ both
+ none
giải thích:
+ xóa thuộc tính canh trái
+ xóa thuộc tính canh phải
+ xóa cả 2 thuộc tính canh trái và phải
+ không xóa
ví dụ:
<span style="text-align: right;">
ABC1<br>
<span>ABC2</span>
</span>
kết quả:
ABC1
ABC2 (cả 2 cùng canh phải)

dùng clear
<span style="text-align: right;">
ABC1<br>
<span style="clear: right">ABC2</span>
</span>
ABC1
ABC2

Miracle

28-05-2007, 09:28

{@:

- Cho mình hỏi thuộc tính float, clear có ý nghĩa là gì ??, viết ra xem thử thì biết tác dụng nhưng quả thực ko hiểu nó làm việc như thế nào.

<div style="border:1px solid #999999;">
<div style="float:left">
<img src="nothing.jpg" />
</div>
<div>
something for nothing
</div>
<div style="clear:both"></div>
</div>

- Nếu ko có hàng <div style="clear:both"></div> thì trong ví dụ trên, cái border bọc ở ngoài ko bao hết 2 div mà chỉ bao div thứ 2 có chữ something for nothing

- Chả hiểu <div style="clear:both"></div> có tác dụng gì nữa

- Còn mấy giá trị là "inherit" thì hiểu mơ hồ là thừa kế, nhưng chẳng biết nó thừa kế từ cái nào ???

- Còn khi height và width được set là auto thì nó sẽ được tính như thế nào, theo nội dung bên trong (div) ????

:@}

Lạ nhỉ ?
Mình preview trên firefox thấy nó bao hết trơn luôn !
Mà viết trang css ai lại đi viết kiểu này nhỉ ? :angry::choler:

tumickey

28-05-2007, 12:02

Lạ nhỉ ?
Mình preview trên firefox thấy nó bao hết trơn luôn !
Mà viết trang css ai lại đi viết kiểu này nhỉ ? :angry::choler:

là sao vậy? viết bằng Css thì thường viết theo cách đó .Không dùng table chỉ dùng div . Nhưng cực quá trời phải set kích thước cố định thì khỏe hơn 1 tí nhưng phải canh kỹ.

to minhkhang: hihi bác rành css ghê bửa nào làm 1 chuyên đề với cái nay đi em cũng đang điên đầu về nó :smile:

Miracle

28-05-2007, 12:23

Đơn giản là chưa tận dụng hết ưu thế mà CSS mang lại.
Viết thế thì dùng table sướng hơn !

zeroonea

28-05-2007, 13:10

{@:

@CED: chỉ là 1 ví dụ nhỏ thui

<div style="border:1px solid #999999;">
<div style="float:left">
<img src="New Folder/fe770_small.jpg" />
</div>

<div style="float:left">
something for nothing
</div>
</div>

- Thử cop đoạn này xem có bao hết ko, nhớ cho cái hình bự bự ra mới thấy được(test trên FF2)

- Dùng table load chậm rì.

@minhkhang: để <div style="clear:both"></div> thì xóa 2 thuộc tính canh trái phải của cái nào (theo như ví dụ trên), theo bạn nói thì nó xóa những thành phần chứa trong nó, nhưng ở đây để bên dưới 2 cái div thì nó tác dụng lên đâu???, tại sao để dưới 2 cái div thì parent div mới bao hết 2 div ????

- những khái niệm thì ai cũng biết, nhưng tác dụng ngoài thực tế thì chả hiểu thế nào.
--- EDIT:

Mới xem cái clear

left No floating elements allowed on the left side
right No floating elements allowed on the right side
both No floating elements allowed on either the left or the right side
none Default. Allows floating elements on both sides

:@}

tumickey

28-05-2007, 15:51

:d
demo ne http://www.divshare.com/download/759406-8e0 div 100% :D

Miracle

28-05-2007, 17:19

Bạn có biết dùng CSS & DIV nhanh hơn Table ở điểm nào không ?

{@:
- Dùng table load chậm rì.
:@}

Bạn thử viết một cái bảng như vậy bằng table xem kích cỡ file nào to hơn ? :canny:

zeroonea

28-05-2007, 17:48

{@:

- Không phải load chậm do dung lượng file mà do Browser parse Table để hiển thị lâu hơn parse Div

- Khi cấu trúc site bảng lồng nhau phức tạp sẽ thấy rõ, dùng div load nhanh hơn. Xem thêm

http://www.webcredible.co.uk/user-friendly-resources/web-usability/speed-up-download-time.shtml
http://www.hotdesign.com/seybold/index.html

- Với lại các spider engine thích mí web dùng div hơn.

:@}

Miracle

29-05-2007, 11:15

- Mình không quan tâm đến việc nó dựng có nhanh hay không trên trình duyệt vì máy tính bây giờ rất mạnh rồi !

Bạn nên đưa các thuộc tính của thẻ div vào class và id, và dùng một file css để chứa riêng các giá trị style

* Như vậy sẽ giảm dung lượng của trang web, file css có thể không cần phải load lại nhiều lần
* Có thể thay đôi giao diện nhanh chóng bằng cách thay đổi file css (vd như forum punbb.org)

zeroonea

29-05-2007, 18:39

{@:

- Trong thực tế đó là điều tất nhiên, nhưng trong cái ví dụ trên phải viết chung dzo cho mí bạn thấy với lại cho nhanh, bạn ko hiểu hả.

:@}

Miracle

30-05-2007, 00:27

Ok, chịu luôn !!!
......................

nhtuong

30-05-2007, 08:06

Chút nữa là mình quên, trong buổi báo cáo mình có nhắc đến việc dùng CSS định dạng cho XML. Các bạn test thử cho vui nhé! :haha:

File data.xml:

<?xml-stylesheet href="style.css" type="text/css"?>
<AAA>
<BBB>
<EE>EE EE EE EE EE EE EE EE EE EE EE EE EE EE EE EE EE EE EE EE EE </EE>
<CCC>CCC CCC CCC </CCC>
<HH>HH HH HH HH HH HH HH HH HH HH HH HH HH HH HH HH HH HH HH HH HH HH </HH>
<DDD>DDD DDD DDD </DDD>
<FF>FF FF FF FF FF FF FF FF FF FF FF FF FF FF FF FF FF FF FF FF FF </FF>
</BBB>
</AAA>

File style.css:

BBB {
width: 80pt;
border: solid thin red;
clear: left;
}
EE {
width: 20pt;
clear: left;
color:red;
}
CCC{width: 20pt;
border: solid thin green;
clear: both;
}
FF{width: 20pt;
float: left;
}
HH{width: 20pt;
clear: both;
}
DDD {width: 20pt;
border: solid thin blue;
float: left;
}

Miracle

01-06-2007, 14:43

Không tương thích lắm

IE hiện một đằng, Firefox hiện một nẻo

nhtuong

02-06-2007, 09:27

Cái này thì mình chịu! Tùy vào bạn muốn làm gì mà customize nó lại. Mình muốn dùng clear và float demo coi chơi xem có "khoái" không thôi!

tumickey

02-06-2007, 12:14

uhm nếu theo các xu hướng lập trình web mới thì bây giờ dùng thẻ div thì lỗi thời rùi.tham khảo 1 số bài viết sau:
http://www.somerandomdude.net/projects/webdev/divless/
http://divless.com/
... (google với từ khoá divless là cả đống )

thiệt ra dùng gì cũng được nhưng ưu tiên là cái này hiệu quả cao, giảm dung lượng tính tuỳ biến cao hơn.
Tạm thời mấy cái js, css chưa chuẩn lắm cho các trình duyệt cho nên ta đành chịu cực 1 tí. Tuỳ vào dự án mà ta ứng dụng cái nào cho phù hợp, không nhất thiết cái nào cũng dùng div, hay table :D