Display: block will lead to line breaks. I have not carefully read the detailed documentation. It takes a lot of effort to solve similar problems today.
Copy the problematic page Code as follows:
<HTML>
<Table width = 80>
<Tr>
<TD nowrap>
<Font style = "display: Block"> abcdefghigklmnopqrstuvwxyz 1234567890 </font>
<Font style = "display: Block"> abcdefghigklmnopqrstuvwxyz 1234567890 </font>
</TD>
</Tr>
</Table>
</Html>
I don't want the fonts in the two font to be two rows. You have always considered modifying the CSS attribute of TD during the modification and have never seen any effect. Later I found that it was font'sStyle= "Display: Block ". After modification, it will be fine.
After modification:
<HTML>
<Table width = 80>
<Tr>
<TD nowrap>
<Font style = "display: inline"> abcdefghigklmnopqrstuvwxyz 1234567890 </font>
<Font style = "display:Inline"> Abcdefghigklmnopqrstuvwxyz 1234567890 </font>
</TD>
</Tr>
</Table>
</Html>
--------------------------
Summary: Many people usually modify the display and hide attributes of elements by calling Javascript: Display: block and display: none. Do not ignore the problem that display: block will cause line breaks.
--------------------------
Appendix:
1. All display parameters:
DisplayWhether to set the attribute and how to display elements.
Inheritance: No
DescriptionThis attribute defines the type of the display box generated by the element when the layout is created. For HTML and other document types, it is dangerous to use the display without caution, because it may violate the display hierarchies defined in HTML. For XML, Because XML does not have the built-in hierarchical structure, all display is absolutely necessary.
Note: css2 has values compact and marker, but it has been removed from css2.1 due to lack of extensive support.
Javascript syntaxCSS attributes can also be dynamically changed through a piece of JavaScript.
Script Syntax:object.style.display="none"
In our HTML Dom tutorial, you can find more details about the display attribute.
In our HTML Dom tutorial, you can also find the complete style object reference manual.
Examplep { display: block }li { display: list-item }table { display: table }td, th { display: table-cell }Possible Value
| Value | Description |
|---|---|
| None | This element is not displayed. |
| Block | This element is displayed as a block-level element with a line break before and after it. |
| Inline | Default value. This element is displayed as an inline element, and there is no line break before and after the element. |
| Inline-block | The block element in the row. (Newly added value of css2.1) |
| List-item | This element is displayed as a list. |
| Run-in | This element is displayed as a block-level element or Inline element based on the context. |
| Compact | Compact is a value in CSS, but it has been deleted from css2.1 due to lack of extensive support. |
| Marker | CSS has a value of marker, but it has been deleted from css2.1 due to lack of extensive support. |
| Table | This element is displayed as a block-Level Table (similar to <Table>), with a line break before and after the table. |
| Inline-table | This element is displayed as an inline table (similar to <Table>) without line breaks before and after the table. |
| Table-row-group | This element is displayed as a group of one or more rows (similar to <tbody> ). |
| Table-header-group | This element is displayed as a group of one or more rows (similar to <thead> ). |
| Table-footer-group | This element is displayed as a group of one or more rows (similar to <tfoot> ). |
| Table-row | This element is displayed as a table row (similar to <tr> ). |
| Table-column-group | This element is displayed as a group of one or more columns (similar to <colgroup> ). |
| Table-Column | This element is displayed as a cell column (similar to <Col>) |
| Table-Cell | This element is displayed as a table cell (similar to <TD> and <TH>) |
| Table-Caption | This element is displayed as a table title (similar to <caption>) |
Original article: http://www.w3school.com.cn/css/pr_class_display.asp
2,Line feed caused by display: Block
# Divheader # divnav # divlogo {margin-Right: 5px; width: 205px; Height: 72px; float: Left; position: relative ;}
# Divheader # divnav # divlogo A: Link, A: visited, A: hover, A: active {
Width: 200px;
Height: 67px;
Text-Decoration: none;
Display: inline;
Float: left;
Position: relative;
Border: # f00 0px solid;
}
Most people can easily confuse the display and visibility attributes of CSS. They seem to have no difference, but they actually have a big difference.
The visibility attribute is used to determine whether the element is displayed or hidden. Visibility = "visible | hidden" is used to indicate that the element is displayed. Visibility indicates that the element is hidden. When visibility is set to "den", although the element is hidden, it still occupies its original position.
Table
The best way to understand table-related performance attribute values is to imagine an HTML table. Table is the initial performance. You can use table-row to simulate table-cell to simulate TD.
The display attribute goes further. You can use table-column, table-row-group, table-column-group, table-header-group, table-footer-group, and table-caption. You can use columns to build tables directly, which is faster than using rows in HTML.
Finally, inline-table sets that the table does not wrap before and after.
Using a CSS table seriously compromises availability. HTML should be used to deliver semantics, so if you have table data, you can use HTML tables. Using a CSS table only produces bad data. Without CSS data, it cannot be read.
The difference between display: none and visibility: hidden is that display: None completely removes the display of elements. Visibility: hidden keeps the element position but the visual content is invisible. For example, if the second segment of 3 is set to display: none, the first segment will only follow the third segment. If it is set to visibility: hidden, the Section will be blank.
The difference between inline and bolck is that
Display: inline; Same row
Display: block; line feed
In DW, the Chinese version is translated as "positioning". common attributes include relative and absolute ).
Many of my friends still don't know how to use this command. Here I will explain it in detail: Position: relative; indicates relative positioning, the label with this attribute located can be moved up, down, left, and right within the range to which it belongs. The movement here is different from the position changes produced by padding or margin. Padding and margin are a margin of the element itself and the padding distance is not really moving, and the elements defined as relative are actually moving, the resulting movement distance is from the margin of the margin to the inside of the parent label.
Position: absolute; indicates absolute positioning. If an element of this attribute is defined, its position is calculated based on in the upper left corner of the browser and is above the floating normal element. This attribute can be used when you need to locate an element somewhere in the browser content area.
So there is a problem, and most of the web pages we make are centered, so I need this element to follow a certain element position in the webpage, no matter how much the resolution is, its position is always targeted at a certain element in the page, so the pure absolute is not feasible.
The correct solution is to define the parent element of the element as position: relative; (correct: it can be the parent or the position: absolute;. Thank you for choosing old9) the element to be absolutely located is set to position: absolute; then the value of top, right, bottom, and left is set, in this way, the reference standard is the upper left side of padding in the upper left corner of the parent level.
Original article: http://crazier9527.javaeye.com/blog/361184
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
