一、    盒子模型

注:

1、红色为border;

2、背景应用于内容、内边距、边框组成的区域;

3、Width和height指的是内容区域的高度和宽度。

边框属性:

1、  padding属性:(默认靠左上)

padding: 10px;           ---------内容与四边框的距离为10px;

10px, 0px, 10px, 0px;-------上右下左

padding-left: 10px;       ----------内容与上边框的距离为10px;

2、  margin属性:(同上)

3、  border属性:

border: 5px solid blue;

border-width:5px;

border-style:solid/dashed;

border-color:blue;

border-top: 5px solid blue;

border-top-width:8px;

注:

距离可以用像素表示,也可以用百分比表示;也可设置AUTO.

二、css定位

position: relative/fixed/absolute

1、  相对定位:

会按照元素的原始位置对改元素进行移动;

2、  绝对定位:

相对与最近的已定位的父级元素进行移动如果没有已定位的父级元素,则系那个对于最初的包含快;

3、  固定定位:相对于浏览器的定位liru某些网站的右下角弹窗;

4、  流式布局:

Float: right (从右往左依次) /left(从左往右)

注:一条边框会占一个像素; 所有div都必须设置定位。

css布局与盒子模型的更多相关文章

  1. CSS布局(二) 盒子模型属性

    盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...

  2. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

  3. CSS布局(一) 盒子模型

    一.盒子模型 标准盒子模型 从下图可以看到标准 w3c 盒子模型的范围包括 content.padding.border.margin,并且 content 部分不包含其他部分. 怪异盒子模型 从下图 ...

  4. CSS布局之盒子模型[一]

    每个HTML标签都会生成一个盒模型,盒模型是正常流布局非常重要的概念.盒模型由内边距(padding)+长度(width)+高度(height)+边框(border)+外边距(margin)组成. 1 ...

  5. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

  6. css中的盒子模型

    css中的盒子模型 css中的盒子模型,有两种,一种是“标准 W3C 盒子模型”,另外一种是IE盒子模型.   1.w3c盒子模型 从图中可以看出:w3c盒子模型的范围包括了:margin,borde ...

  7. 【CSS学习】--- 盒子模型

    一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...

  8. CSS学习之盒子模型

    1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...

  9. CSS学习系列1 - CSS中的盒子模型 box model

    css中有一个盒子模型的概念. 主要是用来告诉浏览器如何来计算页面元素的宽度和高度, 比如该元素的宽度/高度 是否包括内边距,边框,外边距.  盒子模型有一个属性box-sizing属性来说明是否包括 ...

随机推荐

  1. JWebFileTrans: 一款可以从网络上下载文件的小程序(一)

    一 摘要 JWebFileTrans是一款基于socket的网络文件传输小程序,目前支持从HTTP站点下载文件,后续会增加ftp站点下载.断点续传.多线程下载等功能.其代码已开源到github上面,下 ...

  2. yum安装CDH5.5 Hadoop集群

    1.环境说明 系统环境: 系统环境:centos6.7 Hadoop版本:CDH5.5 JDK运行版本:1.7.0_67 集群各节点组件分配: 2.准备工作 安装 Hadoop 集群前先做好下面的准备 ...

  3. svn conflicts: local delete, incoming delete upon update

    svn  st查看更新的时候发现存在conflicts,提示很多 local delete, incoming delete upon update , $:svn st ? C IMIRROR.T3 ...

  4. python之列表对象

    1. 获取列表中的某个值 描述:获取下标所对应的值 语法: print(li[0]) #[取索引值] 样例: li = list(['a','b','c']) val=(li[0]) #获取下标所对应 ...

  5. JavaScript 闭包总结 (深入理解)

    什么是闭包 简单的说闭包就是函数里面的函数,<JavaScript高级程序设计>里是这样定义的 闭包是指有权访问另一个函数作用域中的变量的函数. 先看一道面试时经常被考的题目 代码1: & ...

  6. angularJS+requireJS实现controller及directive的按需加载

    最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: ...

  7. E. Devu and Flowers

    E. Devu and Flowers time limit per test 4 seconds memory limit per test 256 megabytes input standard ...

  8. BDD框架:behave学习记录

    本人学习的时候基本上是按照behave的tutorial教程一步步学习的,这篇文章就当Behave教程的翻译版吧(*^__^*) 嘻嘻--. 1         安装behave 安装好python后 ...

  9. Extjs form 组件

    1.根类 Ext.form.Basic 提供了,表单组件,字段管理,数据验证,表单提交,数据加载的功能 2.表单的容器 Ext.form.Panel 容器自动关联 Ext.form.Basic 的实例 ...

  10. vim编译安装+lua模块

    vim编译安装+lua模块 使用背景:代码自动补全插件,需要安装lua模块 安装准备,首先下载安装vim所依赖的其它安装包,ncurses,lua,readline,vim 源码下载,编译安装 ncu ...