div+css第三天_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

div+css第三天_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:31 PM

一、行内元素和块元素

行内元素(inline element),又叫内联元素：内联元素只能容纳文本和其他内联元素。

常见的内联元素有：,,

块元素(block element):块元素一般都从新行开始，可以容纳文本，内联元素和其他块元素，即使内容不能占满一行，块元素也要把整行占满。

常见的块元素有：

二、案例

运行效果：

从案例我们可以看出，行内元素只占能显示自己内容的宽度,不会占满整行；而块元素不管内容有多少，都会占满整行。

三、行内元素和块元素的区别

1.行内元素只占内容的宽度，块元素不管内容多少要占据全行

2.行内元素只能容纳文本和其他行内元素，块元素可以容纳文本，行内元素和块元素(与浏览器的版本和类型有关)

3.一些css属性对行内元素不生效，比如：margin,left,right,width,height,建议尽可能使用块元素定位(与浏览器的版本和类型有关)

四、细节

尽管我给块元素设置了宽度，它们还是占据了整行，看效果：

五、块元素和行内元素相互转换

display:inline;------>块元素转为行内元素

display:block;------>行内元素转为块元素

案例：

大家注意观察前后的区别，span转为了块元素，占据了整行，而div转为行内元素，没有占据整行了。

上面案例最终的代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>行内元素和块元素</title> 6 <style type="text/css"> 7 .sp1{ 8     background:red; 9     display:block;/*我转为块元素了*/10 }11 .div1{12     background:gray;13     width:200px;14     display:inline;/*我转为行内元素了*/15 }16 .p1{17     background:#CC0;18     width:200px;19 }20 </style>21 </head>22 <body>23 <span class="sp1">我是行内元素span1</span>24 <span class="sp1">我是行内元素span2</span>25 <input name="username" type="text" value="我是行内元素input"/>26 <div class="div1">我是块元素div1</div>27 <div class="div1">我是块元素div2</div>28 <p class="p1">我是块元素段落1</p>29 <p class="p1">我是块元素段落2</p>30 </body>31 </html>

六、css文件之间的相互引用

语法：@import url('被引用的css文件地址');

七、标准流和非标准流

流：html元素在网页中显示的顺序

标准流：在html文件中，写在前面的元素在前面显示，写在后面的元素在后面显示

非标准流：在html文件中，当某个元素脱离了标准流，那么它就处于非标准流

八、css中的盒子模型

九、盒子模型入门案例

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <link href="box1.css" rel="stylesheet" type="text/css" /> 6 <title>盒子模型</title> 7 </head> 8 <body> 9 <div class="div1">10     <img  src="/static/imghwm/default1.png"  data-src="img1.jpg"  class="lazy" / alt="div+css第三天_html/css_WEB-ITnose" >11 </div>12 </body>13 </html>

View Code

 1 @charset "utf-8"; 2 /* CSS Document */ 3  4 body{ 5     border: 1px solid #F00; 6     width: 500px; 7     height: 500px; 8     /*让body自动居中*/ 9     margin: 0 auto;10 }11 12 /*盒子模型*/13 .div1{14     width: 120px;15     heigth: 120px;16     border: 1px solid blue;17     margin: 5px 0px 0px 5px;18     /*padding-top: 5px;*/19     /*设置padding，div会根据里面的内容自适应*/20 }21 .div1 img{22     width: 50px;23     height: 50px;24     margin: 5px 0px 0px 5px;25 }

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

See all articles