块级元素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. Python 如何操作微信

    1.给文件传输助手发一条消息 import itchat itchat.auto_login(enableCmdQR=True) # 这里需要你人工手机扫码登录 itchat.send('Hello, ...

  2. 【前端知识体系-NodeJS相关】对于EventLoop（事件轮询）机制你到底了解多少？

    EventLoop 1. EventLoop的执行流程图 ┌───────────────────────┐ ┌─>│ timers │<----- 执行 setTimeout().set ...

  3. 实例演示 C# 中 Dictionary<Key, Value> 的检索速度远远大于 hobbyList.Where(c => c.UserId == user.Id)

    前言 我们知道,有时候在一些项目中,为了性能,往往会一次性加载很多条记录来进行循环处理(备注:而非列表呈现).比如:从数据库中加载 10000 个用户,并且每个用户包含了 20  个“爱好”,在 Wi ...

  4. rsync免交互方法

    添加-e "ssh -o StrictHostKeyChecking=no" rsync -avzP -e "ssh -o StrictHostKeyChecking=n ...

  5. SpringBoot 2.X从0到1实现邮件发送功能

    Spring中提供了JavaMailSender接口实现邮件发送功能,在SpringBoot2.X中也封装了发送邮件相关的Starter并且提供了自动化配置. 本文目录 一.添加对应的Starter二 ...

  6. Java的23种设计模式，详细讲解（三）

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  7. spring web mvc环境搭建

    这两天在学习spring,哎,没办法呀,成都基本都是java,不喜欢学这个也没有用.多学点多条路.还得生活不是. 好了,言归正传,我这里记录下我搭建spring mvc的过程,其实过程不算太难,主要是 ...

  8. JS基础语法---数组案例---9个练习

    练习1:求数组中所有元素的和 var arr1 = [10, 20, 30, 40, 50]; var sum = 0; for (var i = 0; i < arr1.length; i++ ...

  9. RSA加密算法破解及原理

    - RSA算法原理 - - 加密与解密 在RSA中,Bob想给Alice发一个消息X,Alice公钥为(e,n),私钥为(n,d). 加密和解密的过程如下: - RSA暴力破解 RSA暴力破解,简单理 ...

  10. MD5 加密工具类MD5Util

    我们在使用MD5 在线加密的时候,会发现下面情况,大小写的区别就不说啦,那么16位和32位有啥区别呢,其实16 位实际上是从 32 位字符串中,取中间的第 9 位到第 24 位的部分,就是str.su ...