Bài tập Task 5

CSS ELEMENT POSITIONING

border-radius: 100%;  để tạo khung hình tròn

#best_friend{

 border: 4px solid #00C957; :tạo ô vuông tròn nhưng đứt nét

#best_friend{

 border: 4px dashed #00C957; :tạo ô vuông tròn liền nét 

<div id="inline-block"></div> : để khóa các dòng bên trong lại, hay nếu mà nó bị CSS đổi mầu thì lock lại ra màu trắng @@

bên CSS nếu viết :  display:inline-block; : sẽ làm cho các ô xếp theo hàng ngang từ trái qua phải.

display:inline; : sẽ gộp tất ô lại.

display:none;  : không in ra lệnh gì hết.

margin: auto;  : in ô đó ra giữa

margin-top: 20px; : từ cạnh trên của ô đó tính cách ra lề là 20px;

margin-right: 50px; từ cạnh phải của ô đó tính cách ra lề phải là 50px;

margin-bottom: 10px; từ cạnh dưới của ô đó tính cách ra lề bên dưới là 50px;

margin-left: 5px; từ cạnh trái của ô đó tính cách ra lề trái là 50px;

margin-top: -20px; : đẩy ô đó lên trên 20px so với mặc định

CSS viết :  float: right; chuyển phần tử qua phải.

clear:both; nếu 2 cái ô đang bị chèn ngang vào nhau thì sẽ tự động sắp đặt vị trí chuẩn để hiển thị hết ô ra màn hình

position:absolute : định vị giá trị tuyệt đối

#inner{

position: relative;

 margin-left: 200px;

} xét vị trí tương đối , cách mép trái 200px

Ảnh hoàn thành bài

Created HTML and CSS