块级元素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. pytest框架之rerunfailures失败重运行机制

    web自动化测试中,稳定性在整个测试运行中都至关重要,但不能保证测试脚本或者测试环境一直都能够稳定,它牵扯到诸多因素,在这里就不赘述,pytest框架相较于unittest的一大优势就在于拥有用例失败 ...

  2. Python 爬取大众点评 50 页数据，最好吃的成都火锅竟是它！

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 胡萝卜酱 PS:如有需要Python学习资料的小伙伴可以加点击下方链 ...

  3. GO与PHP的AES交互,key长度问题

    今天在使用go与php的AES加解密交互中,一直有个问题那就是在go中加密后,在php端始终都是无法解密,经过排查最后发现是加密key长度引起的问题, 这里简单记录下. go的AES使用的是第三方的库 ...

  4. 调用大漠插件发送QQ和微信消息 C#版

    大漠插件:3.1233 找图,找色,识字,找字,窗口,按鼠标,按键盘 0.注册dm.dll: regsvr32 xxx\dm.dll 1.添加com引用: 2.dmsoft各种调用: 原理: 查找窗口 ...

  5. Discuz! X3 数据表、数据字段说明

    pre_common_admincp_cmenu 后台菜单收藏表 字段名 数据类型 默认值 允许非空 自动递增 备注 id smallint(6) unsigned    NO 是   title v ...

  6. Java collection 集合类架构

    https://www.cnblogs.com/fireflyupup/p/4875130.html Collection List 在Collection的基础上引入了有序的概念,位置精确:允许相同 ...

  7. CODING 2.0：如何通过设计给品牌创造价值？

    升级背景 伴随着 CODING 理念的全面升级,CODING 正构建起覆盖构想到交付的全覆盖工具链,用户注册即可实践敏捷开发与 DevOps,提升软件交付质量与速度. 一直以来,CODING 作为软件 ...

  8. Python、PyCharm、django环境搭建

    本文又名—— 响应式页面——从无到有(一) 事情是这样的,期末小组作业,需要我把大佬们写的页面搞成响应式的,但是我连py都没用过,只好现学…… 文章目录 一.前言 1.1 环境介绍 1.2 前期尝试 ...

  9. [20191012]使用bash从sql_id计算hash_value.txt

    [20191012]使用bash从sql_id计算hash_value.txt --//没有什么实际意义,仅仅验证方法是否可行.--//sql_id的计算是使用MD5算法进行哈希,生成一个128位的H ...

  10. [日常] gocron源码阅读-go语言的变量

    变量的声明形式是这样的 var 变量名字 类型 = 表达式var ( AppVersion = "1.5" BuildDate, GitCommit string)类型可以被省略, ...