html和css元素常用属性,CSS HTML元素布局及Display属性-优快云博客

本篇文章主要介绍HTML的内联元素、块级元素的分类与布局，以及dispaly属性对布局的影响。

1. HTML 元素分类：介绍内联元素、块级元素的分类。

2. HTML 元素布局：介绍内联元素、块级元素的布局。

3. CSS display属性：介绍此属性对布局的影响。

1. HTML元素分类

HTML元素大题可分为内联(inline)元素和块(block)元素。

1.1 内联元素(inline)

①元素显示方式："文本方式"，1个挨着1个，不独自占有1行；

②内嵌的元素也必须是内联元素：如,不能在里面嵌入

③包含的标签有：、、、等等；

1.2 块元素(block)

①元素显示方式：每个元素独自占有1行，相当于前后都带有换行符；

②内嵌的元素可以是内联或块级元素；

③包含的元素有：

~

、

等等；

2. HTML 元素布局展示

2.1 默认展示(未添加width和height属性)

①HTML元素在浏览器展示的方式是：从上到下，从左到右。

②内联元素，是根据浏览器的宽度及自身的width宽度来填充。若当前行剩余空白区域不够，就会换至下一行。

③块级元素，根据内联元素的展示方式展示大概区域；当浏览器的宽度减少时，会自动扩充块级元素的height属性的值，以容纳内嵌元素的展示。

2.1.1 展示页面

2.2 增加了width属性的展示

2.2.1 块级元素(div)增加了width属性

2.3 结论

①当块级元素没设置width属性时，浏览器宽度的变更，会压缩块元素内嵌元素的排版。

②设置块级元素的width属性时，浏览器的width属性值变更，不会影响到块级元素里的内嵌元素的布局，他们(内嵌元素)受父级块级元素的影响。

适用范围：导航条(导航条里有多个a标签，可放在一个div里，并给div附加width属性；以免浏览器缩小，造成导航排版乱掉)；

3.CSS display属性

3.1 主要的值

1) none ：此元素不被显示；

2) block ：此元素按块级元素显示：前后带换行符，自己占一行。内联元素 → 块元素

3) inline ：此元素按内联元素显示：1个挨着1个。块元素 → 内联元素

3.2 display:block 演示

input3 设为了display:block

3.3 display:inline

div 设为了display:inline

==================================系列文章==========================================

本篇文章：2.2 CSS HTML元素布局及Display属性

CSS传统布局之display属性+float属性+position属性

这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

有哪些经常被误用的 HTML、JavaScript、CSS 的元素、方法和属性？

一,以前想要把一个元素(input 之类的)设成只读的时候都是用 disabled,后来发现这是不对的. 因为在 HTML 里面,如果一个元素被设置成 disabled, 那么它的值就不会被发送到 s ...

第一章：前端布局之display属性

css布局学习网站:http://zh.learnlayout.com

多栏多列布局(display&colon;flex)

display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...

【CSS】创建布局

随着对分离HTML元素的语义重要性与其表现的影响的不断强调,CSS在HTML5元素布局方面的作用越来越重要. 1. 定位内容控制内容最简单的方式就是通过定位,这允许你使用浏览器改变元素的布局方式. ...

CSS的flex布局(转载)

我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...

PHP&period;4-DIV+CSS标准网页布局准备工作(下)

DIV+CSS标准网页布局准备工作区块属性(区块模型) 属性描述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

控制span的width属性及display属性值的选择

给span设置width样式,会发现并没有改变它的宽度,但有时候我们需要给它设置固定的宽度,那么就可以设置它的display样式,改变span的显示模式就好了. span默认显示模式是inline,无 ...

CSS隐藏元素的五种方法

1.opacity:0 2.visibility:hidden 3.diaplay:none 4.position:absolute display display属性依照词义真正隐藏元素.将disp ...

随机推荐

sql中case when语句的使用-来自网摘文章

Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...

Socket通信基本原理

Http通信: http连接使用的是“请求—响应方式”,即在请求时建立连接通道,当客户端向服务器发送请求后,服务器端才能向客户端返回数据. Socket通信: Socket通信则是在双方建立起连接后就 ...

八、Android学习第七天——XML文件解析方法(转)

(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 八.Android学习第七天——XML文件解析方法 XML文件:exten ...

HDU 1231&colon;最大连续子序列解题报告

第一次写博客, 自己总结写出了一道题感觉值得保存. 自己总结的规律:求最大连续子序列, 可以先求包括第N项在内的前N项最大值, (因为每一项都求过后, 前N项最大值最大的那一个元素所连续的序列即为最大 ...

JSR 303 - Bean Validation 介绍及最佳实践

JSR 303 - Bean Validation 介绍及最佳实践 JSR 303 – Bean Validation 是一个数据验证的规范,2009 年 11 月确定最终方案.2009 年 12 月 ...

add &period;json handler support in IIS 7

Sometimes we need to create JSON in a text file with extension .json, however by default IIS 7 or an ...

java分页查询

很多数据库自身都提供了分页机制,如SQL Server中提供的top关键字,MySQL数据库中提供的limit关键字,它们都可以设置数据返回的记录数. 通过各种数据库的分页机制实现分页查询,其优点是减 ...

UVA 10603 Fill

题意: 题目的意思是倒水,给出的四个数据是第一个水杯,第二个水杯,第三个水杯,和目标水量.一开始只有第三个水杯是满的,剩下的水杯是空的.倒水的时候只能把倒水出来的这个杯子倒空,或是倒水进去的杯子倒满. ...

Net 并行知识学习

园子里有很多介绍并行库TPL的这里列举2个 1 并行之Task讲解:http://www.cnblogs.com/yanyangtian/archive/2010/05/21/1741193.html ...

Java&lowbar;流程控制

介绍: java的流程控制结构有三种:顺序.选择.循环顺序结构,就是从头到尾依次执行每条语句的操作. 选择结构,也称条件控制,是指根据表达式的值有选择的执行. 循环结构,也称回 ...