HTML&CSS基础-内联和块元素

HTML&CSS基础-内联样式和内部样式表作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介层叠样式表(Cascading Style Sheets) css可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,可以将整个网页想象成一层一层的结构,层次高的将会覆盖层次低的. 而CSS就可以分为网页的各个层次设置样式. 二.使用火狐(Mozilla Firefox)浏览器的Tilt插件的3D效果来看层叠…

HTML&CSS基础-内联框架

css 内联与块

内联元素可以理解为不能直接设置宽度和高度元素,比如span,你为他设置宽度和高度没有效果,除非你把它设置成块级元素. 如下面的代码把display:block;属性值去掉的话,宽度和高度都不会起作用了. 1 <span style="width:100px;height:100px;display:block;"></span> margin可以控制内联和块级元素的间距,而不光是内联元素. 主要注意他们之间的转换问题,如块级元素加float属性会变为内联元素.…

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <…

Box Model,边距折叠，内联和块标签，CSSReset

一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算三.内联与块级标签 3.1.行内标签与块标签区别 3.2.隐藏 3.3.行内块标签 3.4.菜单示例四.重置浏览器默认样式 4.1.CSSReset 4.1.1.MT css reset 4.1.2.PC css reset 4.1.3.PPTV css reset 4.1.4 YUI css reset…

CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <…

CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset

目录一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算三.内联与块级标签 3.1.行内标签与块标签区别 3.2.隐藏 3.3.行内块标签 3.4.菜单示例四.重置浏览器默认样式 4.1.CSSReset 4.1.1.MT css reset 4.1.2.PC css reset 4.1.3.PPTV css reset 4.1.4 YUI css res…

HTML基础内联样式改进三毛语录

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML:基础内联样式</title> </head> <body> <h1 style="text-align:center">三毛语录</h1> <p style="font-size:18px;"&…

内联(行级)元素不能设置margin-top

内联(行级)元素不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-right属性.如果需要设置行级元素的margin-top或margin-bottom属性,必须将行级元素转换成内联块级元素或块级元素.…

HTML&CSS基础-内边框

CSS内联--与块级元素区别

内联元素:1.内联元素(inline)不会独占一行,相邻的内联元素会排在同一行.其宽度随内容的变化而变化. 2.内联元素不可以设置宽高 3.内联元素可以设置margin,padding,但只在水平方向有效. 块状元素:1.块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 2.块级元素可以设置宽高 3.块级元素可以设置margin,padding 内联块状元素inline-block:简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现(可以设置宽高和margin值…

HTML中为何P标签内不可包含块元素？

起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和block-line块元素,因为HTML里几乎所有元素都属于内联元素或者块元素中的一种. in-line这个词有很多种解释:内嵌.内联.行内.线级等,但是,它们都是表示相同的意思,在这里我们选择习惯的叫法–内联. 先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元…

<%%>创建内联代码块(表达)

其实<%%>很早之前见过它,将一个小的功能仅.别人不理解.今天偶尔,我们看到它的真面目,今天,给大家分享. 语法代码块呈现(<%%>)定义了当呈现页时运行的内联代码或内联表达式,它的详细语法例如以下: <%code%>//内联代码 <%=expression%>//内联表达式使用内联代码能够定义独立的行或代码块. 它是呈现页面的过程中运行的server代码. 关于嵌入式代码块的使用说明,例如以下:ASP.NET网页中支持嵌入式代码块.主要用于保留与旧的A…

html css的内联样式内部样式表外部样式表的优先级

http://www.w3school.com.cn/html/html_css.asp 这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式,但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面. 其实总结来说,就是--就近原则(离被设置元素越近优先级别越高).…

<%%>创建内联代码块(表达式)

其实<%%>很早之前就见过了,只是会用一点功能,其它的不甚了解.今天偶尔见到了它的庐山真面目,现在共享给大家. 语法代码块呈现(<%%>)定义了当呈现页时执行的内联代码或内联表达式,它的具体语法如下: <%code%>//内联代码 <%=expression%>//内联表达式使用内联代码可以定义独立的行或代码块.它是呈现页面的过程中执行的服务器代码.关于嵌入式代码块的使用说明,如下:ASP.NET网页中支持嵌入式代码块,主要用于保留与旧的ASP技术的向后…

巧用CSS居中未知高度的块元素

在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position .parent { width: 200px; height: 200px; margin: auto; border: 1px solid red; position: relative; } .child { position: absolute; width: 100px; height: 50%; to…

IE6 行内定义成块元素后高度失效

问题描述: ie6下,空标签块元素height定义失效,表现为除设置的height值外还会显示N像素额外的高度. 实际运用中,若标签为空且定义了小于14px的高度,再加入一背景图的话,会发现该元素高度同其它浏览器不同,即定义的高度始终会显示成height:14px . 问题代码如下: .demo{width:200px;height:6px; background:#f00 url(images/demo.jpg) no-repeat center bottom;} <div class="…

p标签内不能含有块元素。

原来一直听网上这样说.自己并没有实际遇到过.上例子. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <style> *{margin:0;padding:0;} .wrapper{width:300px;margin:200px auto;border:1px solid #666;padding…

css解决内联元素间的空白间隔

在内联元素的父级元素上设置font-size: 0px;即可.例如: <div class="wrap"> <ul> <li class="part1">1</li> <li class="part2">2</li> <li class="part3">3</li> <li class="part4">…

Asp.Net 之 <%%>相关内联代码块用法

1.<%@ ... %> 用来添加命名空间引用,如:<%@ import namespace="system.data"> 2.<% ... %> 用来嵌入服务端代码,如: < % for(int i=0;i<100;i++) { Reaponse.Write(i.ToString()); } %> 3.<%# %> 是在绑定控件DataBind()方法执行时被执行,用于数据绑定如: < %# Container.…

MVC 之 <%%>相关内联代码块用法

1.<%@ ... %> 添加引用; 2.<% ... %> <%%>之间可以执行服务端代码,如<% foreach (DataRow dataRow in dt.Rows)%>,页面加载时,会把<%%>之间的内容执行并输出. 3.<%= ... %> 获取服务端变量值,比如服务端有一个session["name"]="Joe",View中可用<%= session["name&…

html+css基础知识

这是自己学习html时候做的一些记录,供大家参考 <!-- 块和内联块元素:独占一行的元素 div p h ul div没有任何语义,就是一个纯粹的快元素就是为了方便布局 span是内联元素(行内元素):只会占用自身大小的元素,不会占用一行常见的内联元素:a img iframe span span没有任何意义,可以设置样式块元素主要用来实现页面布局,内联元素主要选中文本设置样式一般情况下只是用块元素去包含内联元素,内联元素不去包含块元素 a元素可以包含任何元素,除去本身 p元素中不能…

Code笔记之：CSS块级元素、内联元素概念

文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><). 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流…

CSS 中的内联元素、块级元素以及display的各个属性的特点

CSS的内联元素和块级元素块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元…

CSS文档流与块级元素和内联元素

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆css布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流将窗…

CSS文档流与块级元素和内联元素（文档）

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆css布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文…

CSS块级元素、内联元素概念

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即…

从文档流来看内联元素和块元素的css排版

veda原创[抄录]讲得很好存自己这里看从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理…

CSS 中的内联元素、块级元素、display的各个属性的特点

CSS的内联元素和块级元素块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元…

【HTML&CSS基础-内联和块元素】的更多相关文章