css+div盒模型研究笔记

红色标记的为默认值

1、border(边框):border-top,border-bottom,border-left,border-right

1.border-color(边框颜色);

2.border-width(边框粗细):medium|thin|thick|数值;

3.border-style(边框样式):none|hidden|dotted|dashed|solid|

2、padding(内边距):padding-top,padding-bottom ,padding-left,padding-right

3、margin(外边距):margin-top,margin-bottom ,margin-left,margin-right

当margin设为负数时,会使被设为负数的块向相反的方向移动,设置覆盖在另外的块上。当块之间是父子子关系时,通过设置子块的margin为负数,可以将字块从父块中分离出来。

4、background-color:(背景色)

1.在给元素设置background-color背景色时,IE作用的区域为content+padding,而Firefox则是content+padding+border。
    2.body是一个特殊的盒子,它的背景色会延伸到margin的部分。

属性的简写形式:

1.如果给出2个属性值,前者表示上下的属性,后者表示左右的属性。

2.如果给出3个属性值,前者表示上的属性,中间的数值表示左右的属性,后者表示下的属性。

3.如果给出4个属性值,依次表示上、右、下、左的属性,顺时针排序。

元素的分类

1.块级元素(block):占一行

块级元素div1和div2之间的垂直margin=MAX(div1的margin_bottom,div2的margin-top)

2.行内元素(inline)

行内元素span1和span2之间的水平margin=(span1的margin-right)+(span2的margin-left)

盒子的浮动:

1.设置浮动:float:none|left|right

2.清除浮动:clear:none|left|right|both

时间: 2024-10-06 04:29:41

css+div盒模型研究笔记的相关文章

css的盒模型,及css3的box-sizing新属性

css的盒模型包含了content(元素自身).padding(内边距).border(边框)及margin(外边距). 如图,浏览器控制台elements的computed可以清晰显示元素盒模型,鼠标多动动就明白了:(蓝色区域表示content元素自身,这里是整个窗口的内容) 盒模型有两种:标准模式和怪异模式.在<!DOCTYPE>声明缺失时就会在ie6.ie7.ie8下触发怪异模式 标准模式下:盒子总宽度/高度 = content + padding + border + margin,c

【CSS】盒模型+选择器(你选择的要操作的对象)

盒模型 转http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 1.w3c标准的盒模型和ie的盒模型主要差别在于content的width和height是否包含border padding 2.标准的content是不包含border padding的 3.如何让ie也标准起来,加上<!doctype html> -------- 选择器 转http://www.cnblogs.com/yongzhi/articles/12

行内元素有哪些?块级元素有哪些?CSS的盒模型?转载

块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的display属性(行内元素和块级元素) 我们常用的display属性值有: inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留. 我们最关心的还是display:inl

学习CSS布局 - 盒模型

盒模型 在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型. 当你设置了元素的宽度,实际展现的元素却超出你的设置: 这是因为元素的边框和内边距会撑开元素. 看下面的例子,两个相同宽度的元素显示的实际宽度却不一样. 看看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型</title

css之盒模型

盒模型由内容(content).填充(padding).边框(border).边界(margin)组成,一个盒子中主要的属性就5个:width.height.padding.border.margin. 下面一一介绍盒子中的区域 width 宽度,CSS中width指的是内容的宽度,而不是盒子的宽度,CSS中height指的是内容的高度,而不是盒子的高度 width:200px; height: 200px; padding:50px; margin: 50px; border: 5px sol

CSS之盒模型边框,内边距,外边距,阴影,圆角

盒子模型 盒子模型 盒子模型有元素内容.边框(border).内边距(padding).外边距(margin)组成: 盒子里面的文字和图片等元素是内容区域: 盒子的厚度 我们称为 盒子的边框: 盒子内容与盒子之间的距离是内边距: 盒子与盒子之间的距离是外边距: 标准盒子模型 盒子边框(border) border: border-width || border-style || border-color 属性 作用 border-width 定义边框粗细,单位是 px border-style

CSS弹性盒模型flex在布局中的应用

× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法,本文将介绍flex在布局中的应用 元素居中 [1]伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items <style> .parent{ display: flex; justify-content: center; align-items: center; } &

CSS基础 - 盒模型、浮动、定位

1 CSS盒模型 在以前,程序员们是通过表格来对一个网页进行排版,也就是通过大小不一的表格和表格嵌套来定位排版网页的内容.后来,CSS出现之后,在网页布局中,为了能够使页面中的各个部分合理的进行组织,开发人员们总结出了一套完整的.行之有效的原则和规范,也就是"盒模型".它是通过使用CSS来定义大小不一的盒子和盒子嵌套来编排网页. 因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器. 页面中的所有元素都可以看成是一个盒子,一个页面由很多的盒子组成,这些盒子之间会相互影响,所以

深入理解CSS弹性盒模型flex

× 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之为弹性盒模型.和CSS3其他属性不一样,flexbox并不是一个属性,而是一个模块,包括多个CSS3属性.flex布局提供一种更加有效的方式来进行容器内的项目布局,以适应各种类型的显示设备和各种尺寸的屏幕 版本更迭 flexbox布局的语法规范经过几年发生了很大的变化.从2007年07月,flex第