快级元素:在html中<div>,<p>,<h1>,<form>,<ul>,<li>就是块级元素。
               设置display:block就是将元素显示为块级元素。
    将行内元素a转换为块级元素,从而使a元素具有块级元素特点
      a{display:block;}

行内元素:在html中,<span>,<a>,<label>,<input>,<img>,<strong>,<em>就是典型的行内元素
     display:inline

内联块状元素:同时具备内联元素,块状元素的特点,代码:display:inline-block
                   <img>,<input>标签就是这种内联块状标签

盒模型:
   边框:就是围绕着内容及补白的线,这条线可以设置它的粗细,样式和颜色(边框三个属性)
           div{
                 border:2px solid red;
            }
           注意:
              border-style(边框样式)常见形式:
                     dashed(虚线)  dotted(点线) solid(实线)
              border-color(边框颜色)颜色可以设置为十六进制颜色
        若想为p标签单独设置下边框,而其他三边都不设置边框样式:
             div{border-bottom:1px solid red;}

宽度和高度:css定义的宽和搞指的是填充以里的内容范围。
              一个元素实际宽度=左边界+右边界+左填充+内容宽度+右填充+右边框+右边界
 
元素的实际长度为:10px+1px+20px+200px+20px+1px+10px=262px

填充:元素内容与边框之间是可以设置距离的,称之为“填充”;填充也可分为上,右,下,左(顺时针)
div{padding:20px 10px 15px 30px;}
四个方向分别为 padding-top padding-right padding-bottom padding-left

边界:元素与其它元素之间的距离可以使用边界(margin)来设置,边界也是可以分为上,右,下,左
div{margin:20px 10px 25px 30px;}
四个方向分别为:margin-top margin-right margin-bottom margin-left


CSS元素分类的更多相关文章

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

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

  2. CSS元素分类及区别

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

  3. CSS——元素分类

    1.标签元素被分为三大类:块状元素.内联元素和内联块元素. (1)常见块状元素有:<div>.<p>.<h1>...<h6>.<ol>.&l ...

  4. CSS基础学习-7.CSS元素分类

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

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

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

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

  7. CSS中的元素分类

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

  8. css的书写位置+元素分类

    1.css的书写位置 1>行内样式: <span style="color:red;">haha</span> 2>内部样式 在style标签中 ...

  9. HTML标签元素分类(HTML基础知识)

    HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...

随机推荐

  1. HFSS 边界条件

    Ansoft HFSS求解就是对微分形式的麦克斯韦方程采取有限元方法进行数值求解,在场矢量和导数是都单值.有界而且沿空间连续分布的假设下,这些方程才可以使用.在边界和场 源处,场是不连续的,场的导数变 ...

  2. Java 嵌套解析 json

    1.首先需要安装org.json.jar 2.类JSONObject用于创建一个json对象.其中的JSONObject.put(KEY, VALUE)用于向其中添加条目 3.JSONObject.g ...

  3. 【读书笔记《Android游戏编程之从零开始》】6.Android 游戏开发常用的系统控件(TabHost、ListView)

    3.9 TabSpec与TabHost TabHost类官方文档地址:http://developer.android.com/reference/android/widget/TabHost.htm ...

  4. [cocos2dx]让CCScrollView支持分页

    [cocos2dx]让CCScrollView支持分页 做过IOS开发的朋友, 肯定知道UIScrollView有一个isPaged属性. 当设置其为true的时候, 滑动会自动分页. 即, 每次滑动 ...

  5. C++基础笔记(三)C++面向对象

    C++类 C++类与结构体类似 定义 class 类名{ <成员定义>; ........ }; 文件格式 *.mm 支持 C/C++ *.cpp C++源文件 *.h C++头文件   ...

  6. SqlServer 注入技巧

    一.SA权限执行命令,如何更快捷的获取结果? 有显示位 显示位 其实这里的关键并不是有无显示位.exec master..xp_cmdshell 'systeminfo'生成的数据写进一张表的时候,会 ...

  7. android studio 中的编码问题

    在 Android studio 中直接创建项目和导入其他项目都会有一个文件编码设定的问题,在 android studio (version 1.2.0)中设置文件的编码,只需要两步: 1.打开Se ...

  8. Android Studio下载与安装

    Android Studio下载与安装 1 2 3 4 5 分步阅读 百度经验:jingyan.baidu.com 自从Google宣布Android Studio将取代Eclipse,正式成为官方集 ...

  9. laravel记录

    1.使用数据库事务的时候需要传递参数,使用了use关键字,否则的话传递不进去,代码如下: public function postVote(Request $request){ $data = $re ...

  10. UIImageJPEGRepresentation和UIImagePNGRepresentation

    UIImageJPEGRepresentation方法在耗时上比较少 而UIImagePNGRepresentation耗时操作时间比较长 -(void)imagePickerController:( ...