【codecademy summary】html+css borders

In the style.css, add the following code can see the box:

* { border: 1px solid rgba(0, 0, 0, 0.3); }

-------------------------------------------------------------------------------------------------------------------

 

To modify the default dimensions an element's box in CSS, you can use the width and height properties.

Because a web page can be viewed through displays of deffering screen size, the content on the web page can suffer from those changes in size.To avoid this problem, CSS offers some properties that can limit how narrow or how wide an element's box can be size to.

　　min-width: ensures a minimum width for an element's box.

　　max-width: ensures a maximum width for an element's box.

or

　　min-height /max-height

 

---------------------------------------------------------------------------------------------------

overflow

The overflow property controls what happens to content when it spills, or overflows, outside of its box.

exmaple:

　　overflow: hidden - when set to this value, any content that overflows be hidden from view.

　　overflow: scroll - when set to this value, a scrollbar will be added to the element's box so that the rest of the content can be viewed by scrollong.

 

-------------------------------------------------------------------------------------------------------------------

 

border

 

The border's style can be set with the border-style property. This property can take on one of the following values:

　　border-style: 

　　solid/ dashed/ dotted/ double/ groove/ inset/ outset/ ridge/ hidden or none

 

We can control the thickness, or width, of borders with the border-width. The value of broder-width is given in pixels.

exmaple:

　　border-width: 5px/ thin/ medium/ thick;

or 

　　border-width: 3px 1px 2px 1px ( top right bottom left)

or

　　border-top-width

　　border-right-width

　　border-bottom-width

　　border-left-width

 

The color of a border can also be cusomized with the border-color property.

exmaple:

　　border-color: rgb(22, 77, 100);

 

And you can includes all of them:

　　border: 3px solid rgb(22, 77, 100);

 

The corners of an element's border box can be modified with the border-radius property.

exmaple:

　　border-radius: 5px;

The code in the exmaple above will set all four conrners of border to a radius of 5px.

or

　　border-radius:100%;

The code in the exmaple creates a div that is a  perfect circle.

 

 

 

　　

 

转载于:https://www.cnblogs.com/guangluwutu/p/6527289.html