块级元素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. 通过 SCQA 的框架来讲故事

    SCQA:Situation情景.Complication冲突.Question疑问. Answer回答   SCQA模型是一个"结构化表达"工具,是麦肯锡咨询顾问芭芭拉·明托在& ...

  2. python3在mac下配置

    目的 https://github.com/VonSdite/Plane_Wars 可以本地跑起来. 下载并安装python3 https://www.python.org/downloads/mac ...

  3. Flask笔记：RESTful

    RESTful是用于前台和后端进行通信的一种规范或者说一种风格,采用的是HTTP和HTTPS协议,数据传输的格式使用的都是JSON,而不是XML.通常,RESTful的URL中只有名词,没有动词,而且 ...

  4. Java生鲜电商平台-SpringCloud微服务架构中核心要点和实现原理

    Java生鲜电商平台-SpringCloud微服务架构中核心要点和实现原理 说明:Java生鲜电商平台中,我们将进一步理解微服务架构的核心要点和实现原理,为读者的实践提供微服务的设计模式,以期让微服务 ...

  5. CarTool 使用，获取图片资源

    程序:gitHub: 项目地址 使用方法: 1.拿到资源包 在itunes里找到喜欢的应用,然后下载,直接将app拖到桌面.得到一个一个ipa资源包,如图 2.将资源包改成zip格式 3.解压zip资 ...

  6. CSS 轻松搞定标签(元素)居中问题

    在CSS里,标签位置居中一直是困扰Web前端的难题.在本文中,我对这类问题进行了探究和给出了几点建议,供读者参考. 1 行内标签 1.1 水平居中 在父级标签中使用 text-align: cente ...

  7. Plugin org.apache.maven.plugins:maven-resources-plugin:2.6

    创建maven project时工程报错Plugin org.apache.maven.plugins:maven-resources-plugin:2.6 or one of its depende ...

  8. CodeForces - 1250B The Feast and the Bus （贪心+暴力）

    题意 https://vjudge.net/problem/CodeForces-1250B 每个人属于队伍ai,汽车一次至多载两只队伍(全员),费用为车的容量*载人次数,问最少花费. 思路 k(队伍 ...

  9. python使用face_recognition包的环境设置

    在使用face_recognition包进行人脸识别时,环境是非常重要的,但是网上办法特别纷杂,今天介绍一种特别简单的办法,希望能帮助到大家,少走些坑. 1.首先应该下载dlib安装包(例如:dlib ...

  10. 【洛谷P1963】[NOI2009]变换序列（二分图匹配）

    传送门 题意: 现有一个\(0\)到\(n-1\)的排列\(T\),定义距离\(D(x,y)=min\{|x-y|,N-|x-y|\}\). 现在给出\(D(i, T_i)\),输出字典序最小的符合条 ...