In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
This article mainly introduces how to use border attribute and display attribute in css. It is very detailed and has certain reference value. If you are interested, you must finish it.
Introduction to how to use border attribute and display property border property in css
The border property sets the element border.
There are three elements of the border, such as weight, linetype and color.
Border linetype attribute value description table such as: attribute refers to the description none definition without borders. Hidden is the same as "none". Except when applied to tables, where hidden is used to resolve border conflicts. Dotted defines a dotted border. Rendered as solid lines in most browsers. Dashed defines dashed lines. Rendered as solid lines in most browsers. Solid defines a solid line. Double defines double lines. The width of the double line is equal to the value of border-width. Groove defines a 3D groove border. The effect depends on the value of border-color. Ridge defines a 3D ridge border. The effect depends on the value of border-color. Inset defines a 3D inset border. The effect depends on the value of border-color. Outset defines a 3D outset border. The effect depends on the value of border-color. Inherit states that the border style should be inherited from the parent element. Border direction attribute value description table such as: attribute description border-top setting element top border. Border-bottom sets the bottom border of the element. Border-left sets the left border of the element. Border-right sets the right border of the element. Frame practice
Practice code:
Frame. Box {width: 200px; height: 100px; border: 1px solid red;} smile is the original belief
Note: the border color can be omitted and defaults to black. If the other two properties are not written, the border will not be displayed.
Practice of setting the orientation of element borders
Code block
Frame .box {width: 200px; height: 100px; border-top: 2px double red; border-bottom: 2px ridge lawngreen; border-left: 2px inset darkorange; border-right:2px groove darkblue;} smile is the introduction to the original faith display attribute
The display attribute means display, and the display attribute can convert inline elements to and from block-level elements, setting the hidden element to the display state or setting the hidden element to the hidden state.
The description table of the display attribute value is as follows:
The attribute value describes inline to convert block-level elements to inline elements. Block function: 1. Convert inline elements to block-level elements. 2. Set the hidden elements to display state. None sets the displayed elements to be hidden. Display attribute practice
Use the property value of the display property to set the wide height of the span tag for block and set a background color.
Code block
Convert span tags to block-level elements. Box {width: 200px; height: 100px; display: block; background-color: red;} smile is the original belief
Note: if inline elements use display: block;, you have block-level element features.
Use the attribute value of the display attribute to inline to convert the H2 tag to an inline element.
Code block
Convert H2 tags to inline elements. Box {width: 200px; height: 100px; display: inline; background-color: red;} smile is the original belief
Note: if block-level elements use display: inline;, they have the characteristics of inline elements.
The above is all the content of this article entitled "how to use border attributes and display attributes in css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 273
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.