CSS ( Case Cadding Style)
Published: 2021-12-19 17:49:07

****                               CSS QUESTION ANSWER

1.What is CSS Flexible Box Layout  ?
answer: CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated..

2.What is  grid-template-columns in CSS ?

Answer: Only a block container element can be a grid element. The grid-template-columns property specifies the number (and the widths) of columns in a grid layout.
The values are a space separated list, where each value specifies the size of the respective column.
3.What Is REM in CSS?
Answer:the rem unit means "The root element's font-size".The <li> elements inside the <ul> with a class of rems take their sizing from the root element ( <html> ). This means that each successive level of nesting does not keep getting larger.
4.What is Z index in CSS?
answer:Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index.: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).
5.What is a viewport in CSS?

CSS Viewport is defined as the visible area on a window screen which refers to the displays of the mobile devices. ...also In simple terms, viewport helps web browsers to break pages and add them on a small screen in a readable format .
 
6.What is overflow CSS?
The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. The overflow property has the following values: auto - Similar to scroll , but it adds scrollbars only when necessary.
 
7.What is Boxsizing?
The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height .
 
8.What is EM in CSS?
Answer: The em is simply the font size. In an element with a 2in font, 1em thus means 2in. ... Declarations such as text-indent: 1.5em and margin: 1em are extremely common in CSS. The ex unit is rarely used. Its purpose is to express sizes that must be related to the x-height of a font.
 
 
9.What is initial scale ?
Answer: The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale , minimum-scale , and user-scalable properties control how users are allowed to zoom the page in or out.
10.What is pseudo class in CSS?
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.
 
11. Flexible Box Layout  in Details ?
 
Answer :  Flex box has a content areaEach box has a content area (which contains its content—text,descendant boxes, an image or other content, etc.) and also have surrounding padding, border, and margin areas; the size of each area is specified by corresponding properties, and can be zero (or in the case of margins, negative). The following diagram shows how these areas relate and the terminology used to refer to the various parts of the box:

 
The various areas and corner of a typical box.
The margin, border, and padding can be broken down into top, right, bottom, and left segments, each of which can be controlled independently by its corresponding property.
The perimeter of each of the four areas (content, padding, border, and margin) is called an edge, and each corner can be broken down into a top, right, bottom, and left side. Thus each box has four edges each composed of four sides:
 
12. What is the use of CSS Opacity?
The CSS opacity property is used to specify the transparency of an element. In simple word, you can say that it specifies the clarity of the image. In technical terms, Opacity is defined as the degree to which light is allowed to travel through an object. For example:
<style>    
img.trans {    
    opacity: 0.4;    
    filter: alpha(opacity=40); /* For IE8 and earlier */    
}    
</style>