Hỏi về 1 đoạn code HTML + CSS

phamhoanglong · July 31, 2018, 11:05am

E có 1 đoạn code HTML + CSS như sau dùng để tạo 1 cửa sổ popup
HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Learn HTML & CSS</title>
	<link rel="stylesheet" type="text/css" href="./test4.css" />
</head>
<body>
	<div class="block"></div>
	<div class="overlay"></div>
	<div class="popup">This is a popup-window.</div>
</body>
</html>

CSS:

.block {
	width:600px;
	height:800px;
	background-image: url("http://www.minimalisti.com/wp-content/uploads/2012/01/Building-architecture-Global-Bank-Tower.jpg");
	background-repeat: no-repeat;
	margin:auto;
	border:2px solid red;
}
.overlay {
	background-color: black;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	opacity:0.4;
	filter:alpha(opacity=40);
}
.popup {
	width:800px;
	height:300px;
	border:3px solid black;
	text-align: center;
	line-height: 300px;
	background-color: white;
	font-size:30px;
	font-weight:bold;
	position:fixed;
	top:50%;
	left:50%;
	margin-top: -150px;
	margin-left: -400px;
}

Kết quả:

Ở phần code CSS, trong selector .popup{}, tại sao mình lại có thể ghi top:50%; left:50%; được vậy ạ ? (vì parent element của thằng <div class="popup"> chưa có set width và height bằng 100%)
Còn 2 dòng dưới, em thử thay margin-top:-150px; thành margin-bottom:150px; (2 cái này tương đương nhau) nhưng sao lại không được ạ ? Tương tự, em thử thay margin-left:-400px; thành margin-right:400px; nhưng cũng không được luôn cần lắm 1 lời giải thích ^^

Em thử thay nội dung trong selector .popup{} của code CSS lại như sau:

.popup {
	width:60%;
	height:40%;
	border:3px solid black;
	background-color: white;
	font-size:30px;
	font-weight:bold;
	position:fixed;
	top:30%;
	left:20%;
	display: flex;
	justify-content: center;
	align-items: center;
}

thì trình duyệt vẫn hiển thị kết quả bình thường như khi nãy.
Vậy thì câu hỏi e đặt ra là vì sao mình có thể set width và height bằng 60% với 40% được ạ ? (vì parent element của thằng <div class="popup"> ấy chưa set width và height luôn ???)

E thanks mn nhiều !!!

masoivn · January 11, 2017, 8:18am

Theo như anh tìm hiểu CSS, anh biết chút chút thôi.

3 thuộc tính này đi với nhau: position, top, left

Tại sao lại ghi top:50%, left:50%. Vì muốn div popup nằm giữa màn hình trình duyệt. Nên tính từ top 0 vô 50% và tính từ left 0 vô 50%.
liên quan đến 2 thuộc tính này margin-top: -150px; margin-left: -400px;
Khi không có thuộc tính này thì div popup không nằm giữa màn hình trình duyệt.
Tại sao có giá trị -150px, -400px. Vì tính từ vị trí top:50%, left: 50%. -150px xem tiến lên top mà +150px là tiến về bottom. Tương tự cho left.
margin-top: -150px khác với margin-top: 150px. margin-left cũng tương tự.
3 div: block, overlay, popup này độc lập với nhau. làm gì có parnet element của div popup.

Giá trị của popup này khác với popup kia nên không có việc hiển thị kết quả bình thường giống nhau được.Trong thiết kế Web thay đổi giá trị 1 chút đã khác nhau rồi.

Như trả lời ở trên 3 div này độc lập nhau thì muốn thiết lập heigh và width như thế nào cũng được.

Ngoài lề: lần sau em có thể tìm hiểu cách hiểu thị của css như thế nào bằng công cụ firebug. Giờ các trình duyệt firefox, chrome đều hỗ trợ hết rồi

drgnz · January 11, 2017, 9:09am

Vì class .popup có position là fixed -> Bây giờ nó theo viewport của website chứ không còn là theo div cha nữa.
http://www.w3schools.com/cssref/pr_class_position.asp

phamhoanglong · January 11, 2017, 12:28pm

À đúng rồi, em quên mất là khi set position cho div thì nó theo viewport của body luôn chứ không theo thằng cha nào nữa =))
Mà đính chính lại thì position:relative và position:fixed là nó lấy viewport theo body, còn position:absolute là lấy theo parent element của nó (đang có position:relative) đúng không anh @masoivn @drgnz … ?

Em thử thay đoạn code đó lên trên source code thì thấy website, popup, … đồ vẫn hiển thị bình thường mà anh ?

Chính vì nó độc lập thì dựa vào đâu để thằng div popup nó canh để set theo value % được anh ?
Ví dụ nếu có đoạn code sau:

<html>
<head>
<style>
.block {
       background-color: red;
       width: 100%;
       height: 100%; /* Not worked! */
}
</style>
</head>
<body>
       <div class="block">Lorem ipsum dolor sit amet.</div>
</body>
</html>

Về cơ bản, thằng width: 100%; vẫn hoạt động bình thường, nhưng thằng height: 100%; thì không như vậy, em nghĩ là do parent element của thằng div là html, body chưa được set giá trị nên height nó không hiển thị 100% được ? (còn set value theo đơn vị px thì cố định nên bình thường)
Nhưng nếu height không set value % được thì cũng nảy sinh ra vấn đề là sao width lại set value % được ?

kimidattara2910 · January 12, 2017, 12:58am

(1) vì body đã đc set mặc định là width là 100%, tức là dù có thêm cái này vào hay ko thì nó vẫn là 100% cho nên căn 50% là nó tự auto ra giữa theo độ phân giải màn hình, nó khác với px cố định là độ phân giải ra sao nó cũng ko thay đổi.

(2) vì khi dùng margin-top: -150px nó sẽ tính theo số px từ trên xuống, còn set bottom thì nó sẽ tính từ dưới lên, ví dụ như bài trình bày height 1000px thì top-150 nó sẽ năm ở vị trí -150px, còn bottom; 150 thì nó sẽ nằm ở vị trí top: -850px. Cho nên ko thể bù trừ cho nhau đc áp dụng cho cả left, right, top, bottom.

(3) nếu ko set giá trị width thì nó sẽ mặc định 100%, tương tự ko set height cũng vậy nhưng là 100% tính từ khoảng cách từ top đến hàng chữ kết thúc là gọi là bottom, tức cả bài trình bày đó có height là 100%. Dài đến đâu độ cao tới đó nó vẫn tính là 100%.
Nó khác cố định px ở chổ là 1 khi đã cố định px cho height thì khi nội dung vượt quá height này nó sẽ bị tràn ra ngoài chứ ko tự kéo dài theo %.

(4) trong trường hợp muốn phá vỡ sự “100% của width” thì tạo 1 div có position: relative rồi tạo thêm 1 div con có pos: absolute thì box con này sẽ căn view theo box ngoài có relative.

Nhìn chung set theo % thường dùng cho width vì độ phân giải hay trình duyệt to nhỏ thế nào thì nó vẫn tự co dãn hiển thị đúng code. Còn height thì độ cao khác nhau di chuyển đc nên thường dùng px để cố định.

duysexy · January 12, 2017, 1:58am

cứ cha là position relative còn con là absolute

phamhoanglong · January 12, 2017, 4:59am

Vậy là chỉ có height chưa được mặc định 100% đúng không bạn ?

Mình chưa hiểu câu này lắm

Nhìn chung thì margin-left: -150px; là kéo cái box qua trái 150px, còn margin-right: 150px; là đẩy cái box qua trái 150px
=> 2 cái này tương đương nhau mà nhỉ ?
Tương tự, margin-top: -150px; là kéo cái box lên trên top 150px, margin-bottom: 150px; là đẩy cái box lên trên top 150px
=> 2 cái này cũng tương đương nhau ???
Cái vấn đề này vẫn chưa giải đáp được ý của mình

Chỗ này mình cũng chưa hiểu lắm
“Khoảng cách từ top” có nghĩa là mép trên cùng của màn hình website đúng không ?
Còn “hàng chữ kết thúc gọi là bottom” là sao nhỉ ? (trong code html đâu có đoạn text nào đâu ?)

Hừm … “độ cao khác nhau” có nghĩa là chiều cao màn hình website của mỗi PC khác nhau đúng không bạn nhỉ ?

kimidattara2910 · January 12, 2017, 11:24am

Khoảng xách từ top là rừ div đc thể hiện, trong trường hợp ko có div thì nó là từ dưới cái thanh địa chỉ trình duyệt.
Còn margin đó là về nguyên lí 2 cái div khác nhau, trong trường hợp bạn để 2 cái margin trong cùng 1 div thì nó lấy cái margin đầu tiên.

Mỗi màn hình có độ phân giải khác nhau như 4k, 2k, full HD, HD, LHD. Cho nên hiển thị cũng sẽ khác nhau, nếu bạn dùng màn hình full HD để code mà ko căn resolution thì ở màn hình độ phân giải khác sẽ hiển thị sai.

Về lí luận thì có rất nhìu cho nên cứ phải thực hành nhìu tự nhiên biết, nói ko chẳng giải quyết đc j đâu.

phamhoanglong · January 12, 2017, 11:36am

Mình có để 2 cái margin trong cùng 1 div đâu nhỉ ? Chỉ có thuộc tính top/left và margin-… thôi mà

Bạn giải thích chung chung quá mình chẳng hiểu gì … (newbie)
Còn vài câu hỏi nữa nè:

kimidattara2910 · January 12, 2017, 12:26pm

Đây là code mình vừa làm http://output.jsbin.com/mohonahamu

Ở đó mình bỏ đi margin, dùng body làm div cha chứ ko dùng thêm div khác.
Bạn thử nhìn code của mình, xong xóa đi position: fixed rùi f5 kiểm tra với thuộc tính top: 50%;
Sau đó lại xóa top: 50% vào rùi thay thành marin-top: -300px rùi f5 lại kiểm tra.
Nếu muốn hiểu rõ hơn về 50% và -300px khác nhau chổ nào thì bạn đổi top thành left: 50%, margin-left: 300px rùi thử nghiệm.

Để điều khiển được vị trí của 1 div thì phải hiểu rõ div đó đang nằm ở đâu và thuộc thành phần nào.

Còn vì sao mà dùng margin-top: -150px lại được mà margin-bottom: 150px lại không đc thì thử định vị trí cố định cho height, dùng border-bottom cho dễ phân biệt rùi thử lại margin-bottom.

Đây là fb của mình, nếu có chổ thắc mắc bạn cứ pm mình để hỏi. https://www.facebook.com/bakajanai2910
Thực ra mấy cái này về cơ bản đều có cách dùng, nhưng cứ ngồi mày mò thì sẽ tìm ra cách dùng khác, nhớ hồi mới học mình cũng có nhiều thắc mắc mà chẳng ai giải đáp, nhiều khi chỉ vì 1 dòng code đó được sử dụng mà nó xung đột với thuộc tính khác, thế là mất cả đêm để thay thế chỉnh sửa nhưng vẫn ko đc là bình thường, nhưng đến khi tìm ra được cách sử dụng thì cái cảm giác sung sướng đó ko diễn tả đc đâu

Kollein_Vinh · January 12, 2017, 1:37pm

[quote=“phamhoanglong, post:7, topic:40547”]
(2) vì khi dùng margin-top: -150px nó sẽ tính theo số px từ trên xuống, còn set bottom thì nó sẽ tính từ dưới lên, ví dụ như bài trình bày height 1000px thì top-150 nó sẽ năm ở vị trí -150px, còn bottom; 150 thì nó sẽ nằm ở vị trí top: -850px. Cho nên ko thể bù trừ cho nhau đc áp dụng cho cả left, right, top, bottom.
[/quote]

Sao lại tương tự được.

phamhoanglong · January 13, 2017, 5:52am

Chỗ này nếu xóa đi position: fixed; thì thuộc tính top không hoạt động => “kiểm tra với thuộc tính top: 50%;” để làm j thế bạn ?

Mình xóa luôn cả 2 thằng top và left và thay bằng margin-top: -300px; thì kết quả như sau:

Mình có thấy gì đặc biệt đâu bạn nhỉ ?

Mình đâu có muốn hiểu rõ hơn về 50% và -300px đâu ??
Cái mình đang thắc mắc là:

mà !

Bạn giải thích luôn cho nhanh đi, mình cũng đang vội code nhiều bài tập lắm
Không thì cho hình minh họa như bạn @Kollein_Vinh ấy, cũng dễ hiểu hơn 1 xíu.
Mà “dùng vị trí cố định cho height” nghĩa là sao ? Đoạn code CSS mình post trên topic có dùng height: 300px; là cố định rồi còn j nữa ??

mình mất mấy ngày vẫn chưa tìm ra câu trả lời đây (bài tập chất thành núi)

@Kollein_Vinh cái picture thứ 2 mình không hiểu bạn nói gì cả

Kollein_Vinh · January 13, 2017, 7:02am

Bây giờ để hiểu bạn xem cái code mẫu này nhé: https://jsfiddle.net/esbgmcba/
Sự thật là chúng không tương tự nhau như bạn nghĩ

phamhoanglong · January 13, 2017, 8:20am

À, mình nhầm thuộc tính margin-bottom với thuộc tính bottom, margin-right với right nên làm mọi người bị hack cmn não
Cảm ơn sự nhiệt tình của 2 bạn @kimidattara2910 và @Kollein_Vinh

Nhưng vẫn còn 1 câu cuối cùng mình chưa được giải đáp

Còn câu trả lời này của anh @kimidattara2910 mình vẫn chưa hiểu gì hết

Kollein_Vinh · January 13, 2017, 1:26pm

Vì nó đang trạng thái này mà, có nghĩa là cái .popup no đang trạng thái height = window.height
Bạn set nó 60%, 40% là nó nhận được giá trị như vậy là đúng rồi

phamhoanglong · January 13, 2017, 1:27pm

Cái position: fixed; ấy nó nằm dưới 2 cái width và height mà nhỉ ? (vì theo kinh nghiệm lập trình C++ cùi bắp của mình thì câu lệnh nào ở phía trên sẽ được thực hiện trước ?)
Mà nếu có position: fixed; thì có sao nhỉ ? Vì nó dựa vào đâu để canh 60% với 40% ?

Quát đu diu min ?

Kollein_Vinh · January 14, 2017, 12:36am

CSS: không phải là ngôn ngữ lập trình mà là dạng Styling (dùng để Layout ứng dụng) nó không phân biệt thuộc tính bạn viết trước hay sau trong một Selector (.class hoặc tag-name hoặc pseudo-class hoặc #id).

position:fixed; nó đưa Selector về ngầm định là full-height = window.height (tức chiều cao tối đa của nó = chiều cao màn hình cửa sổ) và full-width cũng tương tự.
Chiều cao tối đa nghĩa là khi set thuộc tính: height:100%;
Còn bạn set 60%, 40% thì nó tính : window.height * 40 / 100 vậy là đúng rồi

phamhoanglong · January 14, 2017, 8:18am

Vậy trong trường hợp này position: relative; có tác dụng không nhỉ ?
Và nếu thế thì khi set height cho thuộc tính nào không được thì chỉ việc để position: fixed; là xong nhỉ ?
hoặc là nếu element nào không thể set width và height với đơn vị % (vì parent element của nó không có hoặc chưa set width & height) thì mình có thể dùng position: fixed; thể giải quyết đúng không a ?

Kollein_Vinh · January 14, 2017, 12:59pm

Không có tác dụng với unit là height: %

Cái này tùy bạn set Unit là % hay px:

set % thì phải dựa trên Parent Selector và TAG mà bạn viết phải có ở trạng thái display: block; thì phần % đó mới hiển thị ( có một số thẻ HTML mà bạn cần lưu ý khi đặt width, height nó không hiển thị được như mong muốc) như thẻ <span> , pseudo-class và lúc đó thuộc tính display: block; cần phải set cho chúng.
set px thì không cần dùng position: fixed; , nó chỉ nên dùng khi bạn muốn tạo một Selector ( BOX ) nào đó nổi lên trên màng hình thoát ra mọi dính líu với các Parent Selector chẳng hạn như POPUP mà bạn đang làm đó.[quote=“phamhoanglong, post:19, topic:40547”]
hoặc là nếu element nào không thể set width và height với đơn vị % (vì parent element của nó không có hoặc chưa set width & height) thì mình có thể dùng position: fixed; thể giải quyết đúng không a ?
[/quote]

Tùy trường hợp nhé, việc Styling không chỉ đơn thuần là làm một cách hời hợt mà bạn cần phải nhìn tổng thể Layout trước, khi viết CSS có kinh nghiệm nhiều bạn sẽ thấy mình viết nhanh và gọn hơn, có nhiều trick để viết. Để dùng css tốt bạn phải thiết kế nhiều Layout, tham khảo các Layout của các trang phức tạp như Youtube, Facebook, Twitter trong source của họ có rất nhiều trick rất hay

phamhoanglong · January 14, 2017, 1:25pm

À, nói mới nhớ, mình có quay lại xem cái position lesson của W3Schools thì mới để ý là họ toàn set value cho position property bằng đơn vị px không, không thấy value là đơn vị %.
Vậy mà trước giờ mình toàn set value cho position property là % mới đau (mà cái này chắc không ảnh hưởng nhỉ ?)

Các thuộc tính như top, left, bottom, right của position: relative; không có tác dụng với unit % hả bạn ?? (mình thử set position: relative; rồi dùng thử unit % cho left thấy nó vẫn cách ra bình thường mà nhỉ )
Mà nếu set value % cho position: relative thì nó sẽ lấy viewport của website hay là của div nào thế bạn ?

Lúc mới bắt đầu học CSS, mình chỉ tưởng nó dùng để thiết kế nên đơn giản thôi, ai ngờ nó cũng phức tạp như khi học C/C++ nữa
Mà hình như có mấy cái khái niệm như CSS Framework, chuyển PSD sang HTML, … giúp hỗ trợ tốt hơn cho việc thiết kế bạn nhỉ ?