块级元素div分析

1、外边距  margin
2、内边距 padding
3、边框  border
Div的真实宽度=width+margin-left+margin-right+border*2+padding-left+padding-right
    文档流
元素从上到下（主要说块级元素），从左到右（主要说行级元素）的一种排列方式，
我们把它叫标准文档流。他是浏览器天生具有的一种功能。
在实际开发中，我们在遵循文档流原则的情况下，还得脱离文档流的约束，让元素不受
文档流的控制。
 
脱离文档流的方法
给元素设置浮动 float：left/right；
给谁设置这个属性，谁脱离文档流，就不受浏览器控制，就相当于把这个元素在浏览器空间
移除了，剩下的空间，后面的元素就会去填补上。
A：
li设置了浮动，脱离了文档流，浏览器移除li占用的空间，ul就不会被撑起了所以高度为0.

 

HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法的更多相关文章

  1. css构造块级元素

    css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...

  2. CSS 各类 块级元素 行级元素 水平 垂直 居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...

  3. css中块级元素、内联元素（行内元素、内嵌元素）

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  4. CSS的块级元素和内联元素，以及float

    说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...

  5. CSS的块级元素和内联元素的概念

    三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...

  6. css的块级元素和行级元素

    块级元素 概念: 每个块级元素都是独自占一行.  元素的高度.宽度.行高和边距都是可以设置的.   元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%) <address>/ ...

  7. HTML基础 块级元素和内联元素

    大多数 HTML 元素被定义为块级元素或内联元素. 块级元素包括:body  from  select  textarea  h1-h6 html table  button  hr  p  ol   ...

  8. 深入认识CSS的块级元素

    2019独角兽企业重金招聘Python工程师标准>>> 块级元素: 显示在一块内,会自动换行,元素会从上到下垂直排列,各自占一行.每个块级元素默认占一行高度,一行内添加一个块级元素后 ...

  9. HTML 基础 块级元素与行内元素

    块元素:单独占一行,宽度占整行,可以包含内联元素和其他块元素,通过样式display:inline,变为行内元素,不换行 内联元素:不单独占一行,宽度根据内容来决定,只能容纳文本或者其他内联元素 ,可 ...

随机推荐

  1. JBoss+eclipes之HelloWorld

    网上罕有教程,文档看不太懂.鄙人摸索成功以记之. 创建新的EJB项目:[File]--[New]--[Other]-- [EJB]--[EJB project] 此处可见我的JBoss服务器使用的是W ...

  2. 将tf-faster-rcnn检测结果画在一张图像内

    https://blog.csdn.net/weixin_42111393/article/details/82940681

  3. HashMap中 工具方法tableSizeFor的作用

    [转] https://blog.csdn.net/fan2012huan/article/details/51097331 首先看下该方法的定义以及被使用的地方 static final int t ...

  4. C# 通过反射调用 Func 委托

    C# 通过反射调用 Func 委托 Intro 最近我的 NPOI 扩展库增加了,自定义输出的功能,可以自定义一个 Func 委托来设置要导出的内容,详细介绍请查看 https://www.cnblo ...

  5. GO　数组

    一.数组(Array) 1.1 什么是数组 Go 语言提供了数组类型的数据结构. 数组是具有相同唯一类型的一组已编号且长度固定的数据项序列,这种类型可以是任意的原始类型例如整形.字符串或者自定义类型. ...

  6. 安装Goland开发工具

    安装Goland开发工具 开发工具: 文本类的编辑器:记事本,notepad,sublime text,atom... ​ 通过命令执行程序 IED:集成开发环境(integrated develop ...

  7. python基础(17):正则表达式

    1. 正则表达式 1.1 正则表达式是什么 正则表达式本身也和python没有什么关系,就是匹配字符串内容的一种规则. 官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符 ...

  8. java基础(26):Thread、线程创建、线程池

    1. 多线程 1.1 多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念. 进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并 ...

  9. Redis Python（一）

    Infi-chu: http://www.cnblogs.com/Infi-chu/ NoSQL(NoSQL=Not Only SQL),中文意思是非关系型数据库. 随着互联网Web2.0网站的兴起, ...

  10. iOS10 新特性一

    链接:http://www.jianshu.com/p/0cc7aad638d9 1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是 ...