1、css的书写位置

  1》行内样式:

    <span style="color:red;">haha</span>

  2》内部样式

    在style标签中

      span{

        color:red;

        }

  3》外部样式

    <link href=""  rel="stylesheet" type="text/css" />

2、元素分类

  1、块级元素:block

    特点:1》独占一行2》宽度高度可以设置3》如果不设置宽度,则宽度为父亲的100%4》不设置高度,高度为里面的内容自动撑开

    例子:div p nav header section h1-h6

    具有上下左右外边距和上下左右内边距

  2、行内元素:inline

    特点:1》可以并排显示在一行2》宽度高度不能设置,只能有里面的内容自动撑开

    例子:span a em strong i b

    没有上下内外边距,但有左右内内外边距

·  3、行内块元素:inline-blick

    特点:1》元素可以并排2》高度宽度都可以自行设置3》默认的宽高是浏览器给的

    例子:input img

3、对应元素属性的相互转化

  display:

    --block --inline-block --inline --none

css的书写位置+元素分类的更多相关文章

  1. CSS学习笔记之元素分类

    在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div> ...

  2. 5.css背景以及书写位置

    1.样式表书写位置 ◆内嵌式写法 <head> <style type=”text/css”> 样式表写法 </style> </head> 2.◆外链 ...

  3. 李洪强和你一起学习前端之(5)css书写位置 优先级和伪类

    亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜 ...

  4. 深入css布局篇(1) — 盒模型 & 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  5. Web前端开发基础 第四课(CSS元素分类)

    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...

  6. CSS元素分类及区别

    元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”).但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而&l ...

  7. CSS中的元素分类

    CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...

  8. CSS权威指南学习笔记 —— HTML元素分类

    HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种 ...

  9. 【从0到1学Web前端】CSS伪类和伪元素 分类: HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏

    1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

随机推荐

  1. Windows netstat

    { 显示协议统计信息和当前 TCP/IP 网络连接. NETSTAT [-a] [-b] [-e] [-f] [-n] [-o] [-p proto] [-r] [-s] [-x] [-t] [int ...

  2. JavaConfig

    Java Config是Spring的一个子项目,它旨在通过Java类的方式提供Bean的定义信息,是Spring4.0的核心功能   普通的POJO只要标注@Configuration注解,就可以为 ...

  3. (36)C# COM交互

    调用DLL [DllImport("standerMFC.dll")] public static extern int PReadUID(ref HHFC_SET stru); ...

  4. PHP面向对象之继承的基本思想

    图例 概念和说明 代码展示 <?php header('content-type:text/html;charset=utf-8'); //学生考试系统 class Student{ publi ...

  5. ie9table排列不对.td错行,多了一列

    发现问题是ie9,本地用google/ie11都是好的. 有合并行的问题,本来就5列,偏偏莫名其妙多了一列,某一行上就有一个单元格空着,往后推了一列,刷新无数次都是同一行错位. 略微改动一下jsp(删 ...

  6. ReadyAPI创建功能测试的多种方法

    原文:ReadyAPI创建功能测试的多种方法 声明:如果你想转载,请标明本篇博客的链接,请多多尊重原创,谢谢! 本篇使用的 ReadyAPI版本是2.5.0 在ReadyAPI中有多种方法可以创建功能 ...

  7. lxml etree对存在的xml添加新节点,新节点没有排版格式化

    新添加的时候如果不做处理,是这个样子 要在解析xml加上 parser = etree.XMLParser(remove_blank_text=True)xml = etree.parse(major ...

  8. vue+h-ui+layUI完成列表页及编辑页

    最近做一个新项目,用H-ui做后台, 比较喜欢他的模仿bootsharp的栅格和表单样式. 感觉不好的是iframe加载速度比较慢. 这里在原有的H-ui页面基础上加入用vue来绑数据,用的还可以. ...

  9. 记录redis安装及常用命令

    Redis安装及常用命令 一.安装 1.下载,解压,进入redis解压目录,make. make PREFIX=目录/redis install :安装到指定目录文件名为redis. 2.将解压目录里 ...

  10. string json list

    String str="[{\"cIndex\":14,\"column\":\"nextAdvice\",\"id\& ...