Differences between elements in CSS, which sounds similar

1.visibility vs display

Options: i) visibility: hidden / visible
             ii)display: none/inline/block

Difference : "visibility" will occupy the screen space even if it is hidden. But "display" will not take up any screen space if it is invisible(display:none).

NB: Use 'display' attribute more, as on need basis the screen space will be occupied.

2. readonly vs disbaled 


Both of the above attributes can be used to make the HTML elements non-editable.

But the additional thing that Disabled does is, the user cant even highlight to copy the text, not to select the checkbox etc. Also those disabled fields are not been submitted to the server, in subsequent post backs.

So better to use disabled, if we want to make the control readonly as well as in accessible by the user in all means. :-)

For Example: 

Sample - 1	produces this
READONLY>
DISABLED> ;

It's important to understand that READONLY merely prevents the user from changing the value of the field, not from interacting with the field. For many types of fields, READONLY is irrelevent because you don't normally change the value. In checkboxes, for example, you can check them on or off (thus setting the CHECKED state) but you don't change the value of the field. DISABLED, however, actually prevents you from using the field. Notice in these examples that you can set the checkboxes even though they are "read only":

Sample -2	produces this
READONLY>Krishna READONLY>Rama	Krishna Rama
DISABLED>Krishna DISABLED>Rama	Krishna Rama