Nếu bạn định xây dựng một bố cục trang web tuyệt vời, bạn sẽ cần biết về lề, đường viền, phần đệm và nội dung. Mọi thành phần trong thiết kế web, cho dù đó là hình ảnh hay văn bản, đều sử dụng một hộp có các thuộc tính này. Bạn có thể dễ dàng xây dựng các bố cục phức tạp bằng cách thử với mô hình hộp. Trong bài viết này, chúng tôi sẽ phân tích Mô hình Hộp CSS và chỉ cho bạn cách sử dụng các thuộc tính này với các ví dụ thực tế.
Mô hình hộp CSS là một tiêu chuẩn do World Wide Web Consortium tạo ra . Nó mô tả tất cả các phần tử trong tài liệu HTML dưới dạng các hộp hình chữ nhật với kích thước riêng của chúng. Các hộp này chứa một khu vực nội dung và các khu vực lề, đường viền và phần đệm xung quanh tùy chọn. Vì vậy, chúng ta hãy khám phá các phần của một hộp CSS.
Hãy khám phá bốn lớp của mô hình hộp CSS.
Vùng nội dung chứa nội dung chính của phần tử có thể là hình ảnh, văn bản hoặc bất kỳ dạng nội dung đa phương tiện nào. Bạn có thể sửa đổi kích thước của các phần tử cấp khối bằng cách sử dụng thuộc tính chiều cao và chiều rộng .
Phần đệm là khoảng trống giữa hộp nội dung và hộp viền của nó. Mặc dù nó nằm xung quanh nội dung của bạn dưới dạng khoảng trắng, bạn có thể sử dụng màu nền để hình dung sự khác biệt. Bạn có thể áp dụng các thuộc tính padding-top , padding-right , padding-bottom và padding-left để sửa đổi không gian.
Đường viền bao bọc nội dung và vùng đệm. Bạn có thể thay đổi kích thước và phong cách biên giới sử dụng biên giới-width , border-style , và border-color tài sản.
Lớp cuối cùng của mô hình hộp được sử dụng rộng rãi để tạo khoảng trống giữa các phần tử. Lề bao bọc nội dung, vùng đệm và vùng viền. Bạn có thể sử dụng các thuộc tính margin-top, margin-right , margin-bottom và margin-left . Bạn cũng có thể cung cấp cho thuộc tính ký quỹ một giá trị âm hoặc tự động để đạt được một số kỹ thuật đặt vị trí tuyệt vời.
Hãy xây dựng một dự án nhỏ để chứng minh mô hình hộp cơ bản với hộp nội dung và các thuộc tính đệm, đường viền và lề. Bạn có thể đi với nội dung văn bản, hình ảnh hoặc phương tiện. Chúng tôi sẽ bắt đầu bằng cách đảm bảo rằng nó được cấu trúc đúng.
Mô hình hộp CSS
Đầu ra:
Bạn có thể sử dụng các tính năng tích hợp trong trình duyệt của mình, chẳng hạn như Công cụ dành cho nhà phát triển Chrome , để xem điều gì đang xảy ra. Chúng tôi đang sử dụng hai hình ảnh từ Unsplash. Để đơn giản, chúng tôi sẽ ẩn hình ảnh điện thoại thông minh bằng cách sử dụng display: none; cho đến khi chúng ta cần nó sau này.
/************************* BASIC STYLING *************************/ * { margin: 0px; padding: 0px; } body { display: flex; flex-direction: row; } .display { display: none !important; }
Bây giờ, hãy tạo kiểu cho hộp nội dung của chúng ta. Đầu tiên, chúng ta sẽ thiết lập chiều cao và chiều rộng của hình ảnh. Ngoài ra, tạo màu nền giúp hình dung tốt hơn. Vì vậy, chúng ta hãy làm điều đó.
/************************* CONTENT BOX *************************/ .content-box { display: flex; flex-direction: row; justify-content: center; align-items: center; /* Styling the content box using height and width properties */ background-color: #fdf; height: 20em; width: 30em; }
Bạn có thể đặt từng thuộc tính padding-top , padding-right , padding-bottom và padding-left hoặc sử dụng tốc ký. Cố gắng sử dụng tốc ký nếu có thể, vì nó có thể giúp bạn tiết kiệm thời gian. Hãy xem cách hoạt động của padding.
/************************* PADDING *************************/ /* Applying padding */ padding-top: 5em; padding-right: 2em; padding-bottom: 8em; padding-left: 2em; /* Padding shorthand */ /* top/right/bottom/left */ padding: 5em 2em 8em 2em; /* top/horizontal/bottom */ padding: 5em 2em 8em;
Đầu ra:
Trong khi áp dụng thuộc tính đường viền, hãy đảm bảo rằng bạn đang sử dụng thuộc tính màu đường viền để tạo cho đường viền một màu khác biệt với nền. Bạn có thể chọn kiểu đường viền riêng lẻ hoặc cùng một lúc bằng cách sử dụng thuộc tính tốc ký. Điều này cũng áp dụng cho thuộc tính chiều rộng đường viền .
Bạn cũng có thể đặt bán kính đường viền để cung cấp cho hộp các góc được làm tròn với bán kính tính bằng px , rem , em hoặc phần trăm.
/************************* BORDER *************************/ /* Applying border properties */ /* Set the border color */ border-color: rgb(148, 234, 255); /* Select border style */ border-top-style: solid; border-right-style: dashed; border-bottom-style: groove; border-left-style: ridge; /* border-style shorthand */ /* top/right/bottom/left */ border-style: solid dashed groove ridge; /* Set border width */ border-top-width: 4em; border-right-width: 2em; border-bottom-width: 2em; border-left-width: 2em; /* border-width shorthand*/ /* top/right/bottom/left */ border-width: 4em 2em 2em 2em; /* top/horizontal/bottom */ border-width: 4em 2em 2em; /* border property shorthand */ /* border: 4em solid rgb(148, 234, 255); */ /* Set border-radius */ border-radius: 5em; border-radius: 20%;
Đầu ra:
Bạn có thể căn giữa một hộp theo chiều ngang bằng cách sử dụng tự động margin: 0 , miễn là nó có chiều rộng xác định.
/************************* MARGIN *************************/ /* Applying margin properties */ margin-top: 4em; margin-right: 5em; margin-bottom: 3em; margin-left: 5em; /* Margin shorthand */ /* top/right/bottom/left */ margin: 4em 5em 3em 5em; /* top/horizontal/bottom */ margin: 4em 5em 3em; /* Using auto margin */ margin: 3em auto;
Đầu ra:
Bạn có thể chỉ định thuộc tính ký quỹ bằng cách sử dụng một, hai, ba hoặc bốn giá trị. Các giá trị có thể là độ dài, tỷ lệ phần trăm hoặc một từ khóa như auto . Hãy hiểu cách nó hoạt động:
Lưu ý rằng bạn cũng có thể sử dụng các phím tắt này cho các thuộc tính đệm và đường viền.
Xem thêm: Bảng gian lận thuộc tính CSS3 cần thiết
Bạn đã bao giờ sử dụng một mức lợi nhuận âm chưa? Để hình dung nó, hãy xóa màn hình: không có để hiển thị hình ảnh thứ hai của chúng ta, sau đó đặt một lề âm.
/* .display { display: none !important; } */ .content-box { display: flex; flex-direction: row; align-items: center; background-color: #fdf; height: 20em; width: 30em; padding: 5em 2em 8em; border-style: solid dashed groove ridge; border-width: 4em 2em 2em; border-radius: 20%; /* Using negative margin */ margin: 3em -20em 3em 5em; }
Đầu ra:
Mô hình hộp cho phép bạn xác định không gian giữa các phần tử, thêm đường viền và dễ dàng tạo bố cục phức tạp. Bạn có thể bắt đầu ngay lập tức để tạo một trang web tuyệt vời. Trong khi đó, bạn có thể khám phá chi tiết thuộc tính hộp viền và thử với đoạn mã trên.
Bạn nên hiểu rằng có những phương pháp khác để bố trí nội dung trong CSS. Chúng bao gồm CSS Grid và CSS Flexbox. Khi bạn cảm thấy hài lòng với mô hình hộp, bạn nên tiếp tục tìm hiểu về các lựa chọn thay thế này.
Trong khi bạn có thể sử dụng máy tính đồ họa trên máy tính của mình, trình thông dịch ngôn ngữ lập trình Python có thể đóng vai trò như một máy tính bàn. Đó là một trò đùa chạy phổ biến trong cộng đồng Python mà nó đã được đề cập trong hướng dẫn chính thức. Đây là cách bạn có thể sử dụng Python làm máy tính.
Là một lập trình viên, bạn nên chấp nhận những thách thức để tồn tại và xây dựng một số kỳ quan trong lĩnh vực phát triển hoặc lập trình. Do đó, nếu bạn đang muốn học một ngôn ngữ lập trình nâng cao để nâng cao kỹ năng nghề nghiệp của mình, thì Java là một trong những triển vọng tốt nhất.
Học một ngôn ngữ lập trình mới như Python sẽ trở nên dễ dàng nếu bạn có một lộ trình toàn diện nêu chi tiết những khái niệm nào cần học khi mới bắt đầu và cách tiến bộ hơn nữa để đạt được cột mốc quan trọng tiếp theo. Ngay cả những lập trình viên trung cấp cũng nên thường xuyên học lại những kiến thức cơ bản của họ để xây dựng nền tảng vững chắc cho bản thân.
Ngày nay, việc xây dựng một trang web hoặc ứng dụng điều chỉnh giao diện người dùng của nó tùy thuộc vào trình duyệt hoặc thiết bị. Có hai cách tiếp cận để đạt được mục tiêu này. Đầu tiên liên quan đến việc tạo các phiên bản khác nhau của trang web hoặc ứng dụng của bạn cho các thiết bị khác nhau. Nhưng nó không hiệu quả và có thể dẫn đến các lỗi không thể đoán trước.
Làm việc với các con số là một phần không thể thiếu trong lập trình. Mọi ngôn ngữ lập trình đều cung cấp hỗ trợ để thao tác với các con số theo nhiều cách khác nhau. Trong bài viết này, bạn sẽ học cách tìm tổng số chữ số trong một số nguyên bằng cách sử dụng các phương pháp lặp lại, dựa trên nhật ký và dựa trên chuỗi.
Vùng chứa rất có lợi cho việc phát triển, triển khai và quản lý phần mềm trong môi trường ảo. Docker hữu ích trong quá trình container hóa, nhưng nó không phải là nền tảng duy nhất xung quanh. Nếu bạn đang tìm kiếm một số lựa chọn thay thế cho Docker, không cần tìm đâu xa. Danh sách này giới thiệu một số lựa chọn thay thế Docker hiệu quả và giàu tính năng để sử dụng trong dự án tiếp theo của bạn.
SQL so với NoSQL: Cơ sở dữ liệu tốt nhất cho dự án tiếp theo của bạn là gì?
Nhúng các dịch vụ của bên thứ ba vào các bài đăng WordPress của bạn là một cách thú vị để thu hút sự quan tâm của khách truy cập. Nội dung được nhúng cũng cung cấp các dấu hiệu trực quan giúp quét dễ dàng hơn. WordPress đã làm cho việc thêm loại nội dung này trở nên dễ dàng.
Node.js là một môi trường thời gian chạy JavaScript cho phép bạn chạy JavaScript bên ngoài trình duyệt web, làm cho nó trở thành một lựa chọn phổ biến để phát triển tất cả các loại ứng dụng. Một phần của sự phổ biến của nó là do có rất nhiều gói NPM để giúp nhà phát triển dễ dàng trải nghiệm.
Solidity là ngôn ngữ lập trình được sử dụng bởi các hợp đồng thông minh trên chuỗi khối Ethereum. Nó là một ngôn ngữ lập trình hướng đối tượng, được định kiểu tĩnh.
Huy hiệu GitHub có thể tăng cường khả năng đọc của kho lưu trữ bằng cách cung cấp cho người dùng một cách nhanh chóng để nắm bắt các chỉ số về kho lưu trữ. Các huy hiệu có thể được nhúng vào README.md của bạn để làm rõ tầm quan trọng và sự cần thiết của dự án của bạn đối với các nhà phát triển khác. Kết quả là, độc giả có được ý tưởng thực sự nhanh chóng về kho lưu trữ bằng cách kiểm tra các huy hiệu đính kèm.
Ngày lễ kỷ niệm quốc tế là một cách tốt đẹp để công nhận các vấn đề xã hội, ngày lịch sử và sự nghiệp tương ứng. Ngày Quốc tế Lập trình viên tôn vinh vai trò của các lập trình viên trong việc cải thiện cuộc sống hàng ngày. Thế giới văn minh mà chúng ta đang sống là sản phẩm của quá trình làm việc chăm chỉ của các lập trình viên.
Cho dù là truy vấn cơ sở dữ liệu hay kết quả của các phép toán, phương pháp định dạng chuỗi Python cung cấp một cách năng động và hấp dẫn hơn để trình bày kết quả cho người dùng.
Đầu năm nay, Microsoft đã phát hành phiên bản xem trước của Visual Studio 2022 vào thế giới lập trình hoang dã. Đây là một tin tốt! Đó là một IDE cực kỳ phổ biến, nhưng do phải điều chỉnh hoặc thậm chí có thể là một cuộc đại tu, với tốc độ thay đổi trong hệ sinh thái DevOps mà nó đang phát triển mạnh.
Số liệu phần mềm là các thước đo được sử dụng để định lượng các khía cạnh khác nhau của phần mềm của bạn. Những khía cạnh này có thể bao gồm từ chi phí, chất lượng và hiệu quả của nhóm phát triển.
Là người dùng Windows, có lẽ bạn đã ít nhất một lần bắt gặp từ .NET Framework. Khung phần mềm do Microsoft phát triển cho phép bạn xây dựng và chạy các chương trình C #, C ++, F # và Visual Basic. Phiên bản .NET mới nhất là 4.8, nhưng máy tính của bạn có thể cần phiên bản .NET cũ hơn (như .NET 3.5) để chạy một số ứng dụng.
Nếu bạn là một nhà phát triển Python, bạn có thể hưởng lợi rất nhiều từ mảng các khung công tác có sẵn. Trong khi một số khuôn khổ phù hợp nhất với các hệ sinh thái lớn, những khuôn khổ khác chuyên phục vụ các mục tiêu phát triển cụ thể. Đọc tiếp để tìm hiểu các tính năng cơ bản, cách sử dụng và sự khác biệt giữa hai khung Python: Flask và CherryPy.
Nhiều lập trình viên thích giải quyết các vấn đề toán học phức tạp bằng cách sử dụng mã. Nó giúp rèn luyện trí óc và cải thiện kỹ năng giải quyết vấn đề. Trong bài viết này, bạn sẽ học cách tìm các hình vuông và hình khối hoàn hảo có n chữ số nhỏ nhất và lớn nhất bằng Python, C ++ và JavaScript. Mỗi ví dụ cũng chứa đầu ra mẫu cho một số giá trị khác nhau.
Việc chạy Python từ thiết bị đầu cuối thường không thể tránh khỏi. Tuy nhiên, nếu bạn mới cài đặt Python trên Windows 10 lần đầu tiên, thì việc chạy Python qua Windows Terminal chỉ có thể thực hiện được nếu nó được thêm vào biến môi trường Windows PATH.
Câu lệnh if là động lực của lập trình logic. Do đó, việc nắm bắt tốt hơn về Pythons nếu là một bổ sung đáng kể cho kỹ năng lập trình Python của bạn.
Trong khi bạn có thể sử dụng máy tính đồ họa trên máy tính của mình, trình thông dịch ngôn ngữ lập trình Python có thể đóng vai trò như một máy tính bàn. Đó là một trò đùa chạy phổ biến trong cộng đồng Python mà nó đã được đề cập trong hướng dẫn chính thức. Đây là cách bạn có thể sử dụng Python làm máy tính.
Là một lập trình viên, bạn nên chấp nhận những thách thức để tồn tại và xây dựng một số kỳ quan trong lĩnh vực phát triển hoặc lập trình. Do đó, nếu bạn đang muốn học một ngôn ngữ lập trình nâng cao để nâng cao kỹ năng nghề nghiệp của mình, thì Java là một trong những triển vọng tốt nhất.
Học một ngôn ngữ lập trình mới như Python sẽ trở nên dễ dàng nếu bạn có một lộ trình toàn diện nêu chi tiết những khái niệm nào cần học khi mới bắt đầu và cách tiến bộ hơn nữa để đạt được cột mốc quan trọng tiếp theo. Ngay cả những lập trình viên trung cấp cũng nên thường xuyên học lại những kiến thức cơ bản của họ để xây dựng nền tảng vững chắc cho bản thân.
Ngày nay, việc xây dựng một trang web hoặc ứng dụng điều chỉnh giao diện người dùng của nó tùy thuộc vào trình duyệt hoặc thiết bị. Có hai cách tiếp cận để đạt được mục tiêu này. Đầu tiên liên quan đến việc tạo các phiên bản khác nhau của trang web hoặc ứng dụng của bạn cho các thiết bị khác nhau. Nhưng nó không hiệu quả và có thể dẫn đến các lỗi không thể đoán trước.
Làm việc với các con số là một phần không thể thiếu trong lập trình. Mọi ngôn ngữ lập trình đều cung cấp hỗ trợ để thao tác với các con số theo nhiều cách khác nhau. Trong bài viết này, bạn sẽ học cách tìm tổng số chữ số trong một số nguyên bằng cách sử dụng các phương pháp lặp lại, dựa trên nhật ký và dựa trên chuỗi.
Vùng chứa rất có lợi cho việc phát triển, triển khai và quản lý phần mềm trong môi trường ảo. Docker hữu ích trong quá trình container hóa, nhưng nó không phải là nền tảng duy nhất xung quanh. Nếu bạn đang tìm kiếm một số lựa chọn thay thế cho Docker, không cần tìm đâu xa. Danh sách này giới thiệu một số lựa chọn thay thế Docker hiệu quả và giàu tính năng để sử dụng trong dự án tiếp theo của bạn.
SQL so với NoSQL: Cơ sở dữ liệu tốt nhất cho dự án tiếp theo của bạn là gì?
Nhúng các dịch vụ của bên thứ ba vào các bài đăng WordPress của bạn là một cách thú vị để thu hút sự quan tâm của khách truy cập. Nội dung được nhúng cũng cung cấp các dấu hiệu trực quan giúp quét dễ dàng hơn. WordPress đã làm cho việc thêm loại nội dung này trở nên dễ dàng.
Node.js là một môi trường thời gian chạy JavaScript cho phép bạn chạy JavaScript bên ngoài trình duyệt web, làm cho nó trở thành một lựa chọn phổ biến để phát triển tất cả các loại ứng dụng. Một phần của sự phổ biến của nó là do có rất nhiều gói NPM để giúp nhà phát triển dễ dàng trải nghiệm.
Solidity là ngôn ngữ lập trình được sử dụng bởi các hợp đồng thông minh trên chuỗi khối Ethereum. Nó là một ngôn ngữ lập trình hướng đối tượng, được định kiểu tĩnh.
