Khởi động linh hoạt 4
|
Trong bài này, chúng ta sẽ ôn lại flexbox và cách căn giữa nội dung trong css. Chúng ta sẽ sử dụng các thuộc tính đã giới thiệu để sắp xếp các khối trong bài 26 về hiệu ứng thu phóng và độ dốc. Áp dụng nhiều cách khác nhau để thực hiện yêu cầu Show Nội dung chính
Video – Bài tập về flexbox và cách căn giữa nội dung trong cssNội dung yêu cầu"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn  + Sắp xếp 6 khối thành 2 thành, khoảng cách giữa các khối đều nhau. Sử dụng lại các khối làm ở bài 26 + Biểu tượng giống như nằm chính giữa các khối khi di chuột Hướng dẫn chi tiết+ Đặt chiều rộng của khối bao bên ngoài vừa đủ cho 3 khối Bài viết cùng chủ đề bài 29. Cách tạo responsive cho web bài 28. Cách tạo hoạt hình trong css "Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni". Sắp xếp các khối+ Cách 1. Use flexbox with display thuộc tính. uốn cong; . không gian giữa; . làm cong; + Cách 2. use float. bên trái; . lớp. con thứ n(3){lề-phải. 0px} để bỏ lề cho khối thứ 3, nhưng khối thứ 6 vẫn có lề phải. Vì vậy chúng ta sẽ sử dụng là. lớp. con thứ n(3n){lề-phải. 0px} n sẽ tự động là 1 2 3 4 … Căn giữa cho icon like+ Cách 1 dùng display. uốn cong; . trung tâm; . Thuộc tính align-items. chiều dọc căn giữa + Cách 2. căn chỉnh văn bản. center căn giữa theo chiều ngang. Chiều dọc sử dụng vị trí. tuyệt đối; . 50%, lợi nhuận trên cùng. – 1/2 chiều cao của biểu tượng Các thuộc tính đã dẫn hướngCác thuộc tính thường dùng+ hình nền. -webkit-linear-gradient(trái, đỏ 0%, cam 50%, vàng 100%), hiệu ứng đổ màu gradient + biến đổi. scale(2), zoom effect, zoom to thu small + kích thước hộp. hộp viền, chiều rộng cố định và chiều cao + biến đổi. rotate(-45deg) to rotate block div angle 45 độ + bán kính đường viền. 5px; + kích thước nền. cover, for always full 100% blocks + tệp đính kèm nền. đã sửa (cố định hình nền khi cuộn trang) + nth-child(3) to override css for các đoạn giống nhau + lề. auto, auto canh biên + chuyển đổi văn bản. chữ hoa, tự động viết hoa + bóng hộp. 2px 2px 7px; + chuyển tiếp. 0. 4s; + nổi. left (right) default blocks + tràn. ẩn giấu + hiển thị. block, biến thẻ không xuống dòng thành khối để thuộc tính lề + hiển thị. inline, variable to the cards not down line + lề và phần đệm, biên tính từ đường viền của khối ra bên ngoài, lề tính từ đường viền của khối vào bên trong nội dung + biên giới. viền, 1px (độ dày) đen (màu) đặc (nét rõ) + căn chỉnh văn bản. canh lề + cỡ chữ. size + font-weight : bold độ đậm nhạt, giống như thẻ + họ phông chữ. type letter hay font chữ + kiểu chữ. chữ nghiêng. tạo chữ nghiêng + trang trí văn bản. không có, gạch dưới + chiều cao dòng. 20px. extension line + màu sắc. (color signature) used green, red or color code + màu nền. (màu nền) đen + hình nền. url(nguồn hình ảnh), hình nền Các thuộc tính flexboxtrưng bày. uốn cong; . inline-flex hướng uốn + row, by row compatible with float. bên trái + row-reverse, theo hàng từ sau ra trước, float. bên phải; + cột, theo cột từ trên xuống dưới + đảo ngược cột, theo hàng từ dưới lên trên flex-wrap (có xuống dòng hoặc không đủ chiều rộng) + không quấn. ko xuống dòng, chỉ hiện thị trên 1 hàng + bọc. đủ chiều rộng của khối cha thì tự động xuống dòng + bọc ngược. đảo ngược biện minh cho nội dung. canh chỉnh theo chiều ngang cho các khối bên trong + trung tâm. auto base between (tương đương text-align. trung tâm) + flex-start (don to left) + flex-end (don sang must) + space-between ( chia đều trong khối) + space-around (chia đều các khối và hai lề của khối bên ngoài) sắp xếp các mục. canh chỉnh theo chiều dọc (khối bên ngoài phải có độ cố định cao) + căng. tự động xóa toàn bộ chiều cao + khởi động linh hoạt. up on + uốn dẻo. down the bottom + đường cơ sở. chỉ canh chữ cho thẳng hàng + trung tâm. canh giữa theo chiều dọc. Thuộc tính này hỗ trợ rất nhiều cho việc làm web và là thuộc tính mới chỉ có từ CSS 3 Thuộc tính chia lớp+ vị trí. quan hệ; + vị trí. tuyệt đối; + hàng đầu. 10px, vị trí tính từ trên xuống + đáy. 10px, vị trí tính từ dưới lên + trái. 10px, position from side left + phải. 10px, position from side must + bọc ngược. đảo ngược mẫu mã. Tải xuống Nếu có thắc mắc, hãy đặt câu hỏi bằng cách bình luận bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web |
