Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use border attribute and display attribute in css

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.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report