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

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. 10、一个action中处理多个方法的调用第一种方法动态调用

    我们新建一个用户的action package com.weiyuan.test; import com.opensymphony.xwork2.ActionSupport; /** * * 这里不用 ...

  2. python脚本中调用其他脚本

    如果只关注脚本中调用他脚本直接看代码30行 PS:该脚本功能有:自动清理目录,创建目录,自动运行脚本,以此提升工作效率 import numpy as np import os from shutil ...

  3. 关于线上一次DDOS攻击和阿里云DDOS防护相关内容

    问题 最近我们的一台阿里云服务器 (ECS,有公网IP,Nginx 服务器,开放了80,443),遭受到了DDOS攻击,主要攻击的行为是 攻击我们443 端口.发起大量的请求. 但是我们在 Nginx ...

  4. 大型Java进阶专题(六)设计模式之代理模式

    代理模式 前言 又开始我的专题了,又停滞了一段时间了,加油继续吧.都知道 SpringAOP 是用代理模式实现,到底是怎么实现的?我们来一探究竟,并且自己仿真手写还原部分细节. 代理模式的应用 在生活 ...

  5. Plink v0.1.0 发布——基于Flink的流处理平台

    Plink是一个基于Flink的流处理平台,旨在基于 [Apache Flink]封装构建上层平台. 提供常见的作业管理功能.如作业的创建,删除,编辑,更新,保存,启动,停止,重启,管理,多作业模板配 ...

  6. springboot集成springDataJpa

    1.引用依赖 <!--spring-data-jpa--> <dependency> <groupId>org.springframework.boot</g ...

  7. Mariadb之半同步复制集群配置

    首先我们来了解下在mariadb/mysql数据库主从复制集群中什么是同步,什么是异步,什么是半同步:所谓同步就是指主节点发生写操作事件,它不会立刻返回,而是等到从节点接收到主节点发送过来的写操作事件 ...

  8. HTML5(三)SVG vs. Canvas

    HTML5 内联 SVG 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 ...

  9. Django---进阶9

    目录 自定义分页器的拷贝及使用 Forms组件 前戏 基本使用 校验数据 渲染标签 展示提示信息 钩子函数(HOOK) forms组件其他参数及补充知识点 作业 自定义分页器的拷贝及使用 " ...

  10. python中可变类型和不可变类型

    1.python中的可变类型和不可变类型 python中的数据类型大致可分为6类:1.Number(数字) 2. String(字符串) 3. Tuple (元组) 4. List(列表) 5. Di ...