CSS:元素类型
元素分类
在CSS中,html中的标签元素大体分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
块状元素
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
特点
- 每个块级元素都从新的一行开始,并且其后的元素也另起一行。
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
内联元素转换成块状元素
/*使a元素具有块状元素特点*/
a{
display:block;
}
内联元素
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
特点
- 和其他元素都在一行上;
- 元素的高度、宽度及顶部和底部边距不可设置;
- 元素的宽度就是它包含的文字或图片的宽度,不可改变。
块状元素转换为内联元素
/*块状元素div转换为内联元素*/ div{
display:inline;
}
...
<div>变成了内联元素的我</div>
内联块状元素(inline-block)
<img>、<input>
特点
- 就是同时具备内联元素、块状元素的特点
- 和其他元素都在一行上;
- 元素的高度、宽度、行高以及顶和底边距都可设置
学习笔记参考:
CSS:元素类型的更多相关文章
- 5:CSS元素类型
5:CSS元素类型 学习目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分 ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- CSS元素类型
前面有一篇文章讲到在css世界中,html元素的表现都是一个个盒子,而css中盒子的显示方式有三种方式,分别是块元素.行内元素和行内块元素.本文总结这三种显示方式的特征和区别. 1 写在前面 最近在整 ...
- [浅谈CSS核心概念] CSS元素类型和盒模型
元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- CSS样式类型
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式 (一)内联式样式 内联式css样式表就是把css代码直接写在现有 ...
- HTML基础--元素类型及类型转换
元素类型及类型转换 一.XHTML元素分类 根据css显示分类,XHTML元素被分为三种类型:块状元素,内联元素,可变元素 1.块状元素(block element) 1)块状元素在网页中就是以块的形 ...
- CSS选择器类型总结
CSS选择器类型总结 1.通用选择器 一般用于给所有元素做一些通用性的样式设置,比如清除内边距.外边距等.但是效率比较低,尽量不要使用. * { margin: 0; padding: 0; } 2. ...
- js:给定两个数组,如何判断他们的相对应下标的元素类型是一样的
题目: 给Array对象原型上添加一个sameStructureAs方法,该方法接收一个任意类型的参数,要求返回当前数组与传入参数数组(假定是)相对应下标的元素类型是否一致. 假设已经写好了Array ...
- MyBatis 元素类型为 "configuration" 的内容必须匹配 ".....
修改MyBatis配置文件时,添加typeAliases节点,报了一个BuilderException: org.apache.ibatis.exceptions.PersistenceExcepti ...
随机推荐
- php write_ini_file
php读ini文件有很方便的pares_ini_file,但是写回去却没有,这里写一个: function write_ini_file($assoc_arr, $path, $has_section ...
- 合理设置apache httpd的最大连接数
来自:http://hi.baidu.com/rainchen/blog/item/095f0a551fa802c5b645ae46.html 手头有一个网站在线人数增多,访问时很慢.初步认为是服务器 ...
- 阿里云centos安装docker-engine实践
近日在阿里云ECS服务器(centos系统)中安装docker,参考官方指南 https://docs.docker.com/engine/installation/linux/centos/ 大概 ...
- 在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 菜鸟教程之工具使用(八)——EGit禁止自动转换回车换行符
众所周知,Windows和Linux系统的回车换行是不一样的.想要进一步了解它们的可以阅读下面的介绍,不感兴趣的可以直接跳过. 产生背景 关于“回车”(carriage return)和“换行”(li ...
- 菜鸟要做架构师(二)——java性能优化之for循环
完成同样的功能,用不同的代码来实现,性能上可能会有比较大的差别,所以对于一些性能敏感的模块来说,对代码进行一定的优化还是很有必要的.今天就来说一下java代码优化的事情,今天主要聊一下对于for(wh ...
- Zookeeper之Zookeeper底层客户端架构实现原理(转载)
Zookeeper的Client直接与用户打交道,是我们使用Zookeeper的interface.了解ZK Client的结构和工作原理有利于我们合理的使用ZK,并能在使用中更早的发现问题.本文将在 ...
- RSA加密和解密工具类
import org.apache.commons.codec.binary.Base64; import javax.crypto.Cipher; import java.security.*; i ...
- JVM内存管理及垃圾回收【转】
很多Java面试的时候,都会问到有关Java垃圾回收的问题,提到垃圾回收肯定要涉及到JVM内存管理机制,Java语言的执行效率一直被C.C++程序员所嘲笑,其实,事实就是这样,Java在执行效率方面确 ...
- 看雪CTF第十五题
1.直接运行起来,再用OD附加 在此处luajit加载并调用main函数 004021C7 E8 64FE0000 call CrackMe. ; luaL_newstate 004021CC 8BF ...