Hướng dẫn css and javascript interview questions - câu hỏi phỏng vấn css và javascript

Một quá trình xác định quy tắc CSS nào sẽ được áp dụng cho một phần tử. Nó thực sự xác định quy tắc nào sẽ được ưu tiên. Kiểu nội tuyến thường thắng sau đó ID sau đó giá trị lớp (hoặc bộ chọn thuộc tính hoặc phân loại thuộc tính), bộ chọn phổ quát (*) không có tính đặc hiệu. Bộ chọn ID có độ đặc hiệu cao hơn các bộ chọn thuộc tính.

Kết xuất tiến bộ là tên được đặt cho các kỹ thuật được sử dụng để cải thiện hiệu suất của trang web (đặc biệt, cải thiện thời gian tải nhận thức) để hiển thị nội dung để hiển thị càng nhanh càng tốt.

Chúng tôi có thể thực hiện kết xuất tiến triển của trang bằng cách tải tải hình ảnh lười biếng. & nbsp; chúng ta có thể sử dụng API của người quan sát giao lộ để lười tải hình ảnh. API làm cho nó đơn giản để phát hiện khi một phần tử đi vào chế độ xem và thực hiện một hành động khi nó thực hiện. Khi hình ảnh đi vào chế độ xem, chúng tôi sẽ bắt đầu tải hình ảnh.

Một đoạn trích mẫu được đưa ra dưới đây.

* {
  color: "green";
  font-size: 20px;
  line-height: 25px;
}

Dịch () không làm cho trình duyệt kích hoạt sơn lại và bố cục và thay vào đó chỉ hoạt động trên bộ hợp tác. Vị trí tuyệt đối kích hoạt việc sơn lại hoặc DOM Reflow. Vì vậy, dịch () cho hiệu suất tốt hơn.

* {
  color: "green";
  font-size: 20px;
  line-height: 25px;
}

Không, các trình duyệt sẽ tải xuống CSS theo thứ tự xuất hiện trên trang HTML.

@Support trong CSS có thể rất hữu ích để quét nếu trình duyệt hiện tại có hỗ trợ cho một tính năng nhất định.

ul {
  line-style: none;
  border: solid 1px #ccc;
}

Định vị tuyệt đối là một cơ chế định vị rất mạnh mẽ cho phép người dùng đặt bất kỳ yếu tố nào bất cứ nơi nào họ muốn ở một vị trí chính xác. Các thuộc tính CSS phải, trái, trên, dưới cùng và xác định các vị trí chính xác mà bạn cần để đặt phần tử. Trong định vị tuyệt đối, các điểm sau cần được xem xét:

• Phần tử mà định vị tuyệt đối được áp dụng được loại bỏ khỏi quy trình làm việc bình thường của tài liệu HTML.
  • Bố cục HTML không tạo bất kỳ không gian nào cho phần tử đó trong bố cục trang của nó.
• Các yếu tố được định vị so với tổ tiên được định vị gần nhất. Nếu không có tổ tiên như vậy, thì phần tử được đặt liên quan đến khối container ban đầu.
• Vị trí cuối cùng của phần tử được xác định dựa trên các giá trị được cung cấp cho đỉnh, phải, trái, dưới cùng.

Thuộc tính tràn trong CSS được sử dụng để chỉ định xem nội dung phải được cắt hay các cuộn phải được thêm vào vùng nội dung khi kích thước nội dung vượt quá kích thước container được chỉ định nơi nội dung được đặt. Nếu giá trị của tràn bị ẩn, nội dung sẽ được cắt, đăng kích thước của container do đó làm cho nội dung trở nên vô hình. Ví dụ,

ul {
  line-style: none;
  border: solid 1px #ccc;
}

Nếu nội dung của DIV rất lớn và vượt quá chiều cao 50px, nội dung sẽ được cắt POST 50px và phần còn lại của nội dung không được hiển thị.

Chúng ta có thể thêm thuộc tính

#container .box {
	float: left;
	padding-bottom: 15px;
} 

<div id="container">
	<div class="box">div>
	
	<div class="box-2">div>
div>

<div class=”box”>div>

Hãy xem xét chúng tôi có phần tử div có chiều cao và chiều rộng chiếm 20% kích thước màn hình và chúng tôi có một phần tử đoạn văn có chiều cao 1,2EM và chiều rộng 20%. Nếu chúng ta muốn căn chỉnh phần tử đoạn văn ở trung tâm (theo chiều dọc và chiều ngang), chúng ta sẽ viết các kiểu sau:

ul {
  line-style: none;
  border: solid 1px #ccc;
}

Thuộc tính lề sử dụng mà chúng ta có thể tạo không gian xung quanh các yếu tố. Chúng ta cũng có thể tạo không gian cho các đường viền được xác định ở ngoại thất. Chúng tôi có các thuộc tính sau để xác định lề:

• margin-top
• margin-right
• margin-bottom
• Thuộc tính lề-bên trái của chính nó có các giá trị như:
  margin property by itself has the values as:
• Tự động-Trình duyệt tự động tính toán lề trong khi chúng tôi sử dụng điều này.
• Độ dài - Giá trị của thuộc tính này có thể có tính bằng PX, PT, CM, EM, v.v ... Các giá trị có thể dương hoặc âm.
• % - chúng ta cũng có thể cung cấp giá trị tỷ lệ phần trăm dưới dạng ký quỹ cho phần tử.
• kế thừa - Sử dụng thuộc tính này, các thuộc tính ký quỹ có thể được kế thừa từ các phần tử cha.

Thuộc tính đệm được sử dụng để tạo không gian xung quanh nội dung phần tử và bên trong bất kỳ đường viền nào đã biết. Phần đệm cũng có các sản phẩm phụ như:

• Đá đệm
• padding-right
• padding-bottom
• padding-left

Cần lưu ý rằng phần đệm không cho phép các giá trị âm.

Từ hình ảnh dưới đây, chúng ta có thể thấy rằng lề là thực thể ngoài cùng của mô hình hộp CSS nằm bên ngoài biên giới trong khi phần đệm nằm trong biên giới.

Chúng ta có thể sử dụng khái niệm của quầy CSS. Điều này cho phép chúng tôi điều chỉnh sự xuất hiện của nội dung dựa trên vị trí trong một tài liệu. Trong khi sử dụng điều này, trước tiên chúng ta cần khởi tạo giá trị của thuộc tính truy cập phản hồi là 0 theo mặc định. Cùng một thuộc tính cũng được sử dụng để thay đổi giá trị thành bất kỳ số nào chúng ta cần. Sau khi khởi tạo, giá trị bộ đếm có thể được tăng hoặc giảm bằng cách sử dụng thuộc tính phản ứng. Tên của bộ đếm không thể là các từ khóa CSS như không có, ban đầu, ban đầu, kế thừa, v.v. Nếu các từ khóa CSS được sử dụng, thì việc khai báo sẽ bị bỏ qua.

Hãy xem xét một ví dụ như được hiển thị dưới đây:

ul {
  line-style: none;
  border: solid 1px #ccc;
}

Ở đây, chúng tôi đang cố gắng đạt được tính năng tăng số lượng tự động và hiển thị cho thẻ H2. Bất cứ nơi nào chúng tôi sử dụng thẻ H2, nội dung sẽ được tiền tố bởi "Header 1:", "Header 2:", "Header 3:" ETC.

Cả hai đều là lớp giả (pseudo-Classes là những từ khóa chỉ định trạng thái đặc biệt của phần tử đã chọn). Lớp giả

#container .box {
	float: left;
	padding-bottom: 15px;
} 

<div id="container">
	<div class="box">div>
	
	<div class="box-2">div>
div>

<div class=”box”>div>

Ví dụ: trong phần dưới của mã, nếu chúng ta đưa ra nth-con (4) cho lớp ví dụ, thì con thứ 4 của lớp ví dụ được chọn không phân biệt loại phần tử. Ở đây, đứa con thứ tư của lớp ví dụ là phần tử div. Phần tử được chọn và một nền màu đen được thêm vào nó.

ul {
  line-style: none;
  border: solid 1px #ccc;
}

Lớp giả

#container .box {
	float: left;
	padding-bottom: 15px;
} 

<div id="container">
	<div class="box">div>
	
	<div class="box-2">div>
div>

<div class=”box”>div>

Ví dụ, trong phần mã bên dưới, nếu chúng ta cung cấp

#container .box {
	float: left;
	padding-bottom: 15px;
} 

<div id="container">
	<div class="box">div>
	
	<div class="box-2">div>
div>

<div class=”box”>div>

ul {
  line-style: none;
  border: solid 1px #ccc;
}

Sprites CSS được sử dụng để kết hợp nhiều hình ảnh trong một hình ảnh lớn hơn. Chúng thường được sử dụng để biểu thị các biểu tượng được sử dụng trong giao diện người dùng. Ưu điểm chính của việc sử dụng Sprites là:

• Nó làm giảm số lượng yêu cầu HTTP để nhận dữ liệu của nhiều hình ảnh khi chúng chỉ được thu thập bằng cách gửi một yêu cầu duy nhất.
• Nó giúp tải xuống các tài sản trước giúp hiển thị các biểu tượng hoặc hình ảnh khi di chuột hoặc các trạng thái giả khác.
• Khi có nhiều hình ảnh, trình duyệt thực hiện các cuộc gọi riêng để có được hình ảnh cho mỗi người trong số chúng. Sử dụng Sprites, hình ảnh được kết hợp trong một và chúng ta chỉ có thể gọi cho hình ảnh đó bằng một cuộc gọi.

Hãy xem xét một ví dụ trong đó ứng dụng của chúng tôi yêu cầu 3 hình ảnh như hiển thị bên dưới (không có phần Sprites). Nếu chúng tôi đang cố gắng tải hình ảnh một cách độc lập, chúng tôi yêu cầu 3 yêu cầu HTTP khác nhau để lấy dữ liệu. Nhưng nếu chúng ta có các sprites CSS trong đó cả 3 hình ảnh được kết hợp thành 1 được phân tách bởi một số không gian, thì chúng ta chỉ yêu cầu 1 yêu cầu HTTP.

Chúng ta có thể truy cập từng hình ảnh từ sprite bằng cách truy cập các thuộc tính định vị như trong mã bên dưới:

ul {
  line-style: none;
  border: solid 1px #ccc;
}

Trong mã trên, chúng tôi đang cố gắng truy cập từng phần tử - biểu tượng nhà, trước và tiếp theo - từ tệp sprite bằng cách sử dụng các thuộc tính bên trái, chiều rộng. Hình ảnh được hiển thị trong phần IMG bằng thuộc tính nền. Xin lưu ý rằng nguồn của hình ảnh (thuộc tính SRX của thẻ IMG) chỉ là một tệp là

#container .box {
	float: left;
	padding-bottom: 15px;
} 

<div id="container">
	<div class="box">div>
	
	<div class="box-2">div>
div>

<div class=”box”>div>

Tweening là quá trình lấp đầy các khoảng trống giữa các chuỗi chính, tức là giữa các khung chính đã được tạo. KeyFrames là những khung hình đại diện cho điểm bắt đầu và điểm kết thúc của hành động hoạt hình. Tweening liên quan đến việc tạo các khung chính trung gian giữa hai hình ảnh cho ấn tượng rằng hình đầu tiên đã phát triển trơn tru với hình ảnh thứ hai. Với mục đích này, chúng tôi sử dụng các thuộc tính như biến đổi - ma trận, dịch, tỷ lệ, xoay, v.v.

Trong ví dụ dưới đây, chúng tôi đang tạo các khung trung gian của các phần tử đoạn để trượt qua từ đầu đến cạnh phải của trình duyệt.

ul {
  line-style: none;
  border: solid 1px #ccc;
}

Ở đây, phần tử đoạn văn chỉ định rằng quá trình hoạt hình sẽ mất 2 giây để thực hiện từ đầu đến cuối. Điều này được thực hiện bằng cách sử dụng thuộc tính

#container> .box {
	float: left;
	padding-bottom: 15px;
}

<div id="container">
	<div class="box">div>
	
	<div>
		<div class="box">div>
	div>
div>

#container> .box {
	float: left;
	padding-bottom: 15px;
}

<div id="container">
	<div class="box">div>
	
	<div>
		<div class="box">div>
	div>
div>

#container> .box {
	float: left;
	padding-bottom: 15px;
}

<div id="container">
	<div class="box">div>
	
	<div>
		<div class="box">div>
	div>
div>

#container> .box {
	float: left;
	padding-bottom: 15px;
}

<div id="container">
	<div class="box">div>
	
	<div>
		<div class="box">div>
	div>
div>

Thuộc tính rõ ràng cùng với phao được sử dụng để chỉ định phía nào của các phần tử nổi không được cho là nổi. Một phần tử có thuộc tính rõ ràng đảm bảo rằng phần tử không di chuyển lên liền kề với phao. Nhưng yếu tố sẽ được di chuyển xuống qua phao.

Hãy cho chúng tôi hiểu điều này với sự giúp đỡ của một ví dụ. Chúng tôi biết rằng các đối tượng nổi không thêm vào chiều cao của các đối tượng nơi chúng cư trú. Hãy xem xét chúng tôi có một phần tử div với lớp FLOATED_DIV, trong một phần tử div khác với ID Main Main_Div.

ul {
  line-style: none;
  border: solid 1px #ccc;
}

Kết quả của mã này sẽ được hiển thị dưới đây. Chúng tôi thấy rằng các hình vuông dự kiến ​​sẽ nằm trong Dev không nằm trong Div cha mẹ chính. Làm thế nào để chúng tôi sửa lỗi này?

Chúng ta có thể làm điều đó chỉ bằng cách thêm dòng

#container> .box {
	float: left;
	padding-bottom: 15px;
}

<div id="container">
	<div class="box">div>
	
	<div>
		<div class="box">div>
	div>
div>

ul {
  line-style: none;
  border: solid 1px #ccc;
}

Kết quả của điều này sẽ là:

Các cách khác nhau để khắc phục các vấn đề cụ thể của trình duyệt.

• Chúng ta có thể viết riêng các kiểu dành riêng cho trình duyệt trong các trang khác nhau và tải chỉ khi trình duyệt cụ thể được sử dụng. Điều này sử dụng kỹ thuật kết xuất phía máy chủ.
• Chúng tôi có thể sử dụng Auto-Prefix để tự động thêm tiền tố nhà cung cấp trong mã.
• Chúng tôi cũng có thể sử dụng Normalize.css hoặc thiết lập lại các kỹ thuật CSS.

Có một số cách để tránh các vấn đề tương thích trình duyệt quá. Chúng như sau:

• Xác thực HTML và CSS: Chúng tôi biết rằng mã sẽ được đọc, giải thích và xử lý khác nhau bởi các trình duyệt khác nhau. Chúng tôi cần xác thực các tệp HTML và CSS của chúng tôi cho các thẻ đóng bị thiếu hoặc thiếu các dấu chấm phẩy trong cú pháp vì có khả năng các trình duyệt cũ sẽ ném lỗi trong khi hiển thị mã. Chúng ta có thể tránh những lỗi đó bằng cách: We know that the code will be read, interpreted and handled differently by different browsers. We need to validate our HTML and CSS files for the missing closing tags, or missing semicolons in the syntaxes because there are chances that the old browsers will throw errors while rendering the code. We can avoid those errors by:
  • Duy trì mã liên kết tốt giúp dễ đọc.
  • Chèn ý kiến ​​tại những nơi cần thiết.
  • Sử dụng các công cụ xác thực như trình xác thực Jigsaw CSS, trình xác thực W3C HTML để xác định các vấn đề cú pháp trong mã.
• Duy trì khả năng tương thích trình duyệt chéo trong bố cục: Khả năng tương thích trình duyệt chéo là điều bắt buộc trong khi phát triển các ứng dụng web. Chúng tôi hy vọng ứng dụng của chúng tôi sẽ đáp ứng trên tất cả các thiết bị, trình duyệt và nền tảng. Một số ảnh hưởng của sự không tương thích bố cục là không đáp ứng của bố cục trong các thiết bị di động, sự khác biệt trong kết xuất bố cục giữa các trình duyệt hiện đại và cũ, v.v. Những điều không tương thích này có thể tránh được bằng cách sử dụng: Cross-Browser compatibility is a must while developing web applications. We expect our application to be responsive across all devices, browsers and platforms. Some of the effects of layout incompatibilities are unresponsiveness of the layouts in mobile devices, the difference in layout rendering between modern and old browsers, etc. These incompatibilities can be avoided by using:
  • Bố cục nhiều cột CSS - để duy trì bố cục thích hợp W.R.T Cột và container.
  • HTML Viewport Metatag - để đảm bảo nội dung được kéo dài đúng trên các thiết bị di động.
  • CSS Flexbox và Grids - Để bố trí các phần tử con tùy thuộc vào nội dung và không gian có sẵn.
  • CSS đặt lại các kiểu dáng - để giảm sự không nhất quán của trình duyệt ở độ cao dòng mặc định, kích thước phông chữ, lề, v.v.
• Kiểm tra các vấn đề của thư viện JavaScript: Đảm bảo các thư viện được sử dụng một cách thận trọng và các thư viện được sử dụng được hỗ trợ bởi các trình duyệt. Ensure the libraries are used judiciously and the ones used are supported by the browsers.
• Kiểm tra từ khóa thẻ doctype: Từ khóa docType có nghĩa là để xác định các quy tắc về những gì cần được sử dụng trong mã. Các phiên bản trình duyệt cũ hơn Kiểm tra thẻ doctype ở đầu và nếu không tìm thấy, kết xuất ứng dụng sẽ không phù hợp. The DOCTYPE keyword is meant for defining rules of what needs to be used in the code. Older browser versions check for DOCTYPE tag at the beginning and if not found, the application rendering won't be proper.
• Kiểm tra trên các thiết bị thực: Mặc dù các ứng dụng có thể được kiểm tra trên môi trường ảo, sẽ có lợi hơn nếu thử nghiệm được thực hiện trên các thiết bị và nền tảng thực. Chúng tôi có thể sử dụng các công cụ như TestSigma cho mục đích này cho phép chúng tôi kiểm tra trong các thiết bị thực sự tương đương. Although applications can be tested on virtual environments, it would be more beneficial if the testing is carried out on real devices and platforms. We can use tools like Testsigma for this purpose that enables us to test in real devices parallelly.

Sự kết luận

CSS đóng vai trò quan trọng nhất trong lĩnh vực phát triển web. Điều này là do CSS giúp đạt được các trang web đẹp, đáp ứng hoặc thích ứng tùy thuộc vào các yêu cầu kinh doanh. CSS giúp xây dựng bố cục nhẹ và linh hoạt hơn giúp tải các trang nhanh hơn và làm cho nội dung hấp dẫn trực quan. CSS liên tục phát triển và đang trở nên mạnh mẽ hơn, từ đó làm cho nó trở thành công nghệ được tìm kiếm nhiều nhất bởi các công ty khác nhau để phát triển các trang web. Trong bài viết này, chúng tôi đã thấy các câu hỏi phỏng vấn được hỏi phổ biến nhất trong CSS, đặc biệt là CSS3.

Tài nguyên hữu ích

• Hướng dẫn CSS
• HTML
• Thực hành mã hóa
• JavaScript
• SASS vs SCSS
• Sách HTML/CSS
• CSS vs HTML