01/10/2018, 01:15

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

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

vũ xuân quân viết 03:31 ngày 01/10/2018

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.

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

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.

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 ???)

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

*grab popcorn* viết 03:20 ngày 01/10/2018

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

Long Dragon viết 03:26 ngày 01/10/2018

Ở 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%)

3 div: block, overlay, popup này độc lập với nhau. làm gì có parnet element của div popup.

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.

À đú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 … ?

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.

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 ?

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.

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 ?

Cao Phong viết 03:19 ngày 01/10/2018

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

duy hoang viết 03:19 ngày 01/10/2018

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

Long Dragon viết 03:21 ngày 01/10/2018

(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

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

nó khác với px cố định là độ phân giải ra sao nó cũng ko thay đổi.

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

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

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

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

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 ?)

Còn height thì độ cao khác nhau di chuyển đc nên thường dùng px để cố định.

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ỉ ?

Cao Phong viết 03:28 ngày 01/10/2018

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.

Long Dragon viết 03:31 ngày 01/10/2018

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ì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à

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.

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è:

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 ?)

Còn height thì độ cao khác nhau di chuyển đc nên thường dùng px để cố định.

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ỉ ?

Cao Phong viết 03:21 ngày 01/10/2018

Đâ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 Vĩnh viết 03:17 ngày 01/10/2018

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

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

Long Dragon viết 03:24 ngày 01/10/2018

xong xóa đi position: fixed rùi f5 kiểm tra với thuộc tính top: 50%;

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 ?

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.

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ỉ ?

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.

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à:

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

mà !

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.

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

thế là mất cả đêm để thay thế chỉnh sửa nhưng vẫn ko đc là bình thường

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 Vĩnh viết 03:25 ngày 01/10/2018

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

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ĩ

Long Dragon viết 03:20 ngày 01/10/2018

À, 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

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 ???)

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

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

Kollein Vĩnh viết 03:24 ngày 01/10/2018

position:fixed;

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

Long Dragon viết 03:20 ngày 01/10/2018

Vì nó đang trạng thái này mà!

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% ?

đang trạng thái height = window.height

Quát đu diu min ?

Kollein Vĩnh viết 03:31 ngày 01/10/2018

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% ?

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

Quát đu diu min ?

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

Long Dragon viết 03:20 ngày 01/10/2018

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

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 Vĩnh viết 03:16 ngày 01/10/2018

Vậy trong trường hợp này position: relative; có tác dụng không nhỉ ?

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

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ỉ ?

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

Long Dragon viết 03:24 ngày 01/10/2018

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

À, 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ỉ ?)

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

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 ?

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

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ỉ ?

Kollein Vĩnh viết 03:16 ngày 01/10/2018

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 ?

Thì chính là Parent Selector

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

Phần lớn chúng ta nhầm tưởng những hệ thống phức tạp phải là Programming Language. Cái đó cũng chính là giới hạn của tư tưởng và dẫn đến cái kết cụt ngủn, không thấy được chiều sâu (thấy được bản chất của hệ thống đó). Nếu bạn nhìn rộng và toàn vẹn hơn sẽ hiểu ra không có hệ thống nào phức tạp hơn cái nào mà chỉ là do bạn ngầm định nó là phức tạp thôi… những cái phức tạp cũng là như cái cơ bản chỉ trên bình phong là khác nhau bản chất cũng như thế thôi.

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ỉ ?

Cái đó là công cụ, bạn phải nhận định rõ là muốn tìm hiểu sâu về CSS thì nên học từ đầu và học cho chắc. Công cụ thì bạn cũng hiểu là giúp ta đỡ tốn thời gian, nhưng mặt trái của nó cũng khá rõ ràng

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Long Dragon

0 chủ đề

0 bài viết

Tác giả nổi bật