边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

边框 solid实线 dotted虚线 dashed点线盒子在页面中实际的宽高都是5部分组成宽=borderleft+paddingleft+width+paddingright+borderright 在块元素中宽度auto 适配到父元素,占满高度auto 由内容撑开在文本或者行元素居中在他的块父元素上加text-align:center; padding不能加负值行元素没有上下外间距盒子模型内容content padding border margin margin外间距块…

内联元素的盒子模型与文档流定位padding属性

内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px} 与 span{width:100px ; height:100px} 表现效果相同,由此可见内联元素不可以设置高度和宽度 2.内联元素可以设置水平方向的内边距padding-left或padding-right span{padding-left:20px ; padding-right:200px} 3.内联元素可以设置垂直…

CSS块级-内联元素，盒子模型

CSS元素元素分类和区别常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li>.<dl>.<dt>.<table>.<form> 常用的内联元素有 <a>.<span>.<i>.<em>.<strong>.<label> 常见的内联块状元素有 <input>…

溢出处理、盒子模型、背景图片、float（浮动）

一.overflow:溢出内容的处理 overflow:hidden; 溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响) overflow:auto; 自动滚动(有溢出产生滚动,没有就不产生滚动条) overflow:scroll; 不管有没有溢出均产生滚动条二.盒子模型: margin(外边距).border(边框).padding(内间距).内容区域 1.w3c盒子模型(默认盒子模型-标准的盒子模型): a.w3c盒子模型设置的宽高为内容…

#CSS的盒子模型、元素类型

CSS的盒子模型.元素类型本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-replaced元素,以及基于不同布局方式定义的block-level元素.inline-level元素.run-in元素. 盒子模型盒子模型其实有两种,一种是W3C标准的盒子模型,一种是IE盒子模型,除了IE8-的浏览器,其他浏览器默认采用W3C标准的盒子模型. 下图是W3C盒子模型的结构…

CSS 盒子模型（Box model）中的 padding 与 margin

本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局的关键. 如果有一点HTML基础的话,就应该了解一些基本元素 (Element),如 p,h1~h6,br,div,li,ul,img 等. 如果将这些元素细分,又可以分别归为顶级 (top-level) 元素,块级 (block-level) 元素和内联 (inline) 元素. Block-le…

CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <…

深入了解CSS中盒子模型

CSS中盒子模型介绍什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什么组成的呢?有内容.内边距.边框.外边距. CSS中盒子的主要属性有5种如:width宽度.height高度.padding内边距.border边框.margin外边距. CSS中盒子模型实践 CSS中盒子模型实践,给大家看看我们CSS中的盒子长什么样. 代码块 <!DOCTYPE html> &…

CSS基础知识（颜色、伪类、盒子模型）

6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式格式:rgb(数字,数字,数字),数字范围是0 ~ 255 r红色g绿色b蓝色 L 颜色的十六进制方式格式:#红色绿色蓝色,范围是00 ~ FF eg: #ff0000或#f00 7.伪类作用:为<a>元素添加样式 :link - 设置链接元素未访问的样式 …

CSS（六）：盒子模型

一.什么是盒子模型盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版. 从上图可以看到标准的盒子模型范围包括margin(外边距).border(边框).padding(内边距).content(网页内容).网页内容就是盒子里面装的东西.在网页设计中,内容常指文字.图片等元素.内边距(PADDING)可以理解为盒子里装的东西和边框的距离.边框(BORDER)就是盒子本身.外边距(MARGIN)就是边框外面自动留出的一段空白. 注意: 每个HTML元素都可以看做是一个盒子. 1.外边…

CSS 盒子模型（一）

CSS 盒子模型(一) 本人在校学生,主学后端,后来发现前端的基础都忘得差不多了才想着写文章回来复习!欢迎留言交流. 什么是盒子呢? 拿下举例,我们可以把每个红框都比作一个盒子,他们可以是任意的 HTML 元素. 盒子模型所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器. CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框.外边距.内边距.和实际内容. 边框 (border) 边框有三部分组成:边框宽度(粗细) 边框样式…

【css】盒子模型之概述

摘要一些基本的概念以及常见使用问题概述 BFC 是css 中布局的核心 - 盒模型,根据块级元素及行级元素可分为块级容器, 行级容器,但容器内部都遵循 BFC BFC 空间布局备注: IE 的盒子模型和w3c 标准略有不同,两者都包括margin.border.padding.content ,区别如下, * 标准 W3C 盒子模型的 content 部分不包含其他部分. * IE 盒子模型的 content 部分包含了 border 和 padding.(IE 6-用的自家模型,IE6,…

【轻松前端之旅】CSS盒子模型

盒子模型,也叫框模型,在CSS里是很重要的概念. 每个元素都可以看做一个盒子.盒子包含四个部分:外边距(margin).边框(border).内边距(padding).元素内容(element content). 我们知道html元素可以嵌套,所以,元素内容还可以包含其它元素. 盒子模型如下图所示: 注意: 1.height和width属性,指的是元素内容的宽度和高度!元素的总宽度=width+padding+border+margin! 2.background背景属性,应用到元素内容.内边距…

CSS快速入门-盒子模型

一.CSS盒子模型概述 css盒子模型又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素. content:内容的实际空间 padding:边框和内容之间的空间 margin:盒子与盒子之间的空间 border:边框二.盒子模型的类型盒子模型分为IE盒子模型和标准盒子模型起因为什么会有IE盒子模型呢?当年微软的IE浏览器占据超过80%市场份额的时候,想自己独立制定一套浏览器标准,其中就包…

css3盒子模型及其定位

盒子模型常见相关属性和属性取值 /*基本属性*/ padding: padding-left/right/top/bottom border: border-left/right/top/bottom border-radius margin: margin-left/right/top/bottom /*定位*/ position //把一个元素放在静态的static.相对的relative.绝对的absolute.固定的fixed位置中 left right top bottom //元素距…

牛腩新闻发布系统（三）：CSS盒子模型及其基本内容

导读: 这些天一直在做牛腩的网页,比如什么首页.出错页.新闻内容页等.在学习的不断推进中,一些刚开始理解的不是很好的东西,也逐渐的深刻了起来.下面,就对这一段时间的学习,做一个总结.主要总结内容有:盒子模型,CSS选择器优先级,标准流和浮动. 一.概念把握 [1]盒子模型: 下图就是一个盒子模型的图例(将就着看吧,我也是尽力了!).别的就不多说,相信这张图,大家都能看懂.主要说一下自己在学习后,对这些概念的理解. TOP: margin(边界.留边):现在看到它,我就想起以前老师讲on和over…

CSS复合选择器和div盒子模型

一.复合选择器(3种) 1.交集复合选择器特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class="c3">h3标题</h3> 相当于找的是h3标签class属性为c3的元素 2.并集复合选择器特点:简称集体声明,由多个选择器通过逗号隔开,链接在一起,它主要用于多个不同的标签具有相同的css属性 <!DOCTYPE html> <html> <…

CSS元素居中的常用方法

只有普通流和绝对定位的元素可以设置居中,浮动元素是不存在居中的. 1.块级元素居中 1) 普通流元素(position : static 或 position : relative) 水平居中:{ margin : 0 auto; } 2) 绝对定位元素(position : absolute 或 position : fixed) 水平.垂直居中:该元素{ margin: auto; top: 0; bottom: 0; left: 0; right: 0; overflow : auto }…