块级元素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. 使用configparser模块进行封装，构造配置文件处理器

    from configparser import ConfigParser class HandleConfig: ''' 定义一个配置文件处理类 ''' def __init__(self, fil ...

  2. C语言--计算程序执行时间

    C语言–计算程序执行时间1. gettimeofday精度1us #include<stdio.h>#include<sys/time.h> int main(){ /* 定义 ...

  3. Installation request for topthink/think-captcha ^3.0 -> satisfiable by topthink/think-captcha[v3.0.0].

    ThinkPHP5.1安装图形验证码的时候报错: Problem 1 - Installation request for topthink/think-captcha ^3.0 -> sati ...

  4. NumPy 学习 第四篇：数组的基本操作

    在数组中,用axis(轴)表示维度,对于三维数组,axis参数的取值通常有: 当axis=None时,表示把数组展开为一维数组: 当axis=0时,表示按照行(第一维)进行计算: 当axis=1时,表 ...

  5. Disruptor系列（三）— 组件原理

    前言 前两篇文章都是从github wiki中翻译而来,旨在能够快速了解和上手使用Disruptor.但是为了能够掌握该技术的核心思想,停留在使用层面还远远不够,需要了解其设计思想,实现原理,故这篇从 ...

  6. VS Code 快捷键 && 常用插件

    常用插件    分类 插件名称 说明 开发 C# C#语言 C# Extensions C#扩展功能(添加类,接口,智能提示) C# XML Documentation Comments 代码添加注释 ...

  7. java基础(32):类加载、反射

    1. 类加载器 1.1 类的加载 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. 加载 就是指将class文件读入内存,并为之创建一个C ...

  8. python3之猜数字游戏

    猜数字小游戏 # coding:utf-8 import random #利用random生成一个1-10的随机数 luckeyNum = random.randint(1,10) #限定猜的次数 l ...

  9. Oracle 中Number的长度定义

    Number可以通过如下格式来指定:Field_NAME Number(precision ,scale),其中precision指Number可以存储的最大数字长度(不包括左右两边的0),scale ...

  10. 2019年上半年收集到的AI计算机视觉方向干货文章

    2019年上半年收集到的AI计算机视觉方向干货文章 时光飞逝,一晃上半年快要结束了.对人工智能高度感兴趣的笔者,每天都要看不少人工智能方面的文章,很多是干货文章,受益匪浅,所以整理成这个系列的文章. ...