回忆一下盒子流动等概念!

1、盒子模型的宽度与高度,都是包括padding的值。(代码的理解如下:)

这样的结果的到就是  宽度和高度都是220了

2、流动型,在标签中存在块级元素和行内元素,

块级元素(在页面中独占一行,会自动填充margin,不可以独排显示。display的属性为block)

div、p、ul、li、h1~h6、form、ol、等

行内元素(没有特定的宽高,可以一排显示、display的属性为inline)

span、textarea、b、i、a、em等

3、block的属性。(他是块级样式的代表)

块级元素的默认属于就是block。当我们给行内元素添加block属性的时候,他就可以设置宽高了。

4、inline。 (这个是行内元素的代表)

当我们的块级元素设置为此属性的时候,那块级元素就会失去块级元素的特性,失去宽高!

这样块级元素也不会再有宽高。

5、inline-block

这事,block和inline的综合,(简单的来说,就是当你的块级元素有此属性的时候,他既可以一排显示,也可以显示宽高)

同理行内也可以有俩个属性的特性。

一般代替float使用!

css盒子流动和block。inline的更多相关文章

  1. CSS中的display属性(none,block,inline,inline-block,inherit)

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  2. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  3. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性  定位(position)z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  4. 前端之CSS——盒子模型和浮动

    一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  5. [HTML/CSS]盒子模型,块级元素和行内元素

    目录 概述 盒子模型 块级元素 行内元素 可变元素 总结 概述 在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...

  6. 2016/2/25 1, margin auto 垂直方向测试 无效 2,margin重叠 3,哪些是块状哪些是内联 4,display:block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  7. day67-CSS字体属性、文字属性、背景属性、css盒子模型

    1. 字体属性 1.1 文字字体:font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. * {font-fa ...

  8. css盒子模型的深入理解,在块级、行内元素的区别和特性

    css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...

  9. 从CSS盒子模型说起

    前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理:穷理之要 ...

随机推荐

  1. redis高级命令1

    设置name的过期时间是20秒 redis默认是16个数据库,默认是将数据存储在第0个数据库中 因为默认是0,当你选择其他数据的时候,是没有值的

  2. 在采用K8S之前您必须了解的5件事情

    作者简介 Christopher Tozzi,自2008年来以自由职业者的身份对Linux.虚拟化.容器.数据存储及其相关主题进行报道. 时至今日,Kubernetes已然成为风靡一时的容器编排调度工 ...

  3. Java工具类——日期相关的类

    前言 在日常的开发工作当中,我们经常需要用到日期相关的类(包括日期类已经处理日期的类),所以,我就专门整理了一篇关于日期相关的类,希望可以帮助到大家. 正文 一.日期类介绍 在 Java 里面,操作日 ...

  4. node+ajax实战案例(6)

    8.删除客户 8.1.发送id到后台 删除用户信息比较简单,只需要把对应行的id发送到后台就可以了 oTable.onclick = function (ev) { var ev = ev || ev ...

  5. docker 容器中 apt-get install 软件时,提示无法定位软件包

    [解决] 执行 apt-get update 然后再进行安装,即可. (完)

  6. vi/vim 行删除操作

    好东西就要多用,vi/vim越用越喜欢了. 删除多行怎么办呢? 命令输入“:32,65d”,回车键,32-65行就被删除了.

  7. 手写SpringMVC框架(一)-------项目搭建

    SpringMVC处理请求的大致流程: 我们来开始着手手写一个SpringMVC框架. 新建一个springMVC项目,流程参见 SpringMVC框架搭建流程 引入servlet相关的jar包: & ...

  8. day03组件

    1.text   编写文本信息,等价于span 2.view 等价于div 3.image ============================wxml====================== ...

  9. Python趣味入门4:选择往往是最重要的-条件语句

    人生处处有选择,程序也有选择,为了让程序变得更加强壮,程序员必须考虑任何情况,上一篇了解到了如何使用Python来行顺序语句的编写,我们写了一个可以输入姓名的生日祝贺程序,今天我们挑战条件语句! 1. ...

  10. 每日一题 - 剑指 Offer 32 - I. 从上到下打印二叉树

    题目信息 时间: 2019-06-25 题目链接:Leetcode tag:BFS(广度优先搜索) 队列 难易程度:中等 题目描述: 从上到下打印出二叉树的每个节点,同一层的节点按照从左到右的顺序打印 ...