CSS3盒子模型详解


Posted in HTML / CSS onApril 24, 2013

本章将介绍CSS3中各种盒的知识点;主要包含以下内容:

CSS3中各种各样盒的类型概念、浏览器支持情况;

当盒中内容超出容纳范围时,如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示;

掌握给盒添加阴影的属性;

掌握几种“box-sizing”属性值的不同含义,能够正确的使用box-sizing属性来定义样式中给定的元素的宽度值和高度值中是否包含内部补白区域,以及边框的高度和宽度;

盒的类型

inline-block

css中我们使用display来定义盒的类型,总体上分为block与inline类型。

css2.1追加了一个盒类型:inline-block,他属于block类型之一,但在显示上具有inline的特点,ie8以下不支持该属性。

因为width和height用作block元素上,所以对inline元素使用width和height是没用的。

曾经我们若是要实现分列显示多个block元素是要借助于float属性的,

但是float是魔鬼,他根本就不应该用于布局,他会吞噬元素/破坏元素,让元素高度失效,最后让元素脱离文档流,

float还会引起父级元素的“塌方”,然后我们又需要清除浮动,而且浮动可能引起很多bug,所以应该尽量少用他布局。

比如一行多列布局,我们完全就可以用inline-block属性替代之,bug也会少很多的。

inline-table

用于表格前后文字不换行,并可设置vertical-align 设置外部文字top对齐或者bottom对齐。

list-item

可以将div变为列表显示,个人认为意义不大。

run-in/compact

将元素指定为以上两个类型时,若果元素后面还有block类型的元素,run-in元素将会被包含在block元素的内部,而compact类型的元素将被放置在左边。

对于盒模型容纳不下的元素

如果块级元素拥有高宽,设置overflow可以控制显示....该属性较熟悉变不研究了。

在css中有一个非常有用的属性“text-overflow”,若是文字超出宽度,便会显示“...”省去了我们js操作的过程。

这节基本没什么东西。。。。

对盒使用阴影

好东西来了,这章梦游到现在,其实就是为了它,这是个相当有用的属性,和为文本设置阴影联合起来,会让你的网站增色不少。

CSS3盒子模型详解

真是漂亮啊,各位就是简单的操作下自己博客的h1元素,为其加上背景为其文字加上阴影,你会发现,你写的博客好看多了。

box-sizing属性

box-sizing属性的解析我前前后后读了几次都没能理解,“使用width属性与height属性来指定元素的高度和高度”。。。

这是干什么的呢?我们继续看下去,发现好像就是IE6对box的相关解释哇。。。。

结语

莫名其妙的一章又完了,css确实难学。。。

HTML / CSS 相关文章推荐
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 #HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 #HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 #HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 #HTML / CSS
用纯css3和html制作泡沫对话框实现代码
Mar 21 #HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 #HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 #HTML / CSS
You might like
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
javascript中的面向对象
2017/03/30 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
python读写LMDB文件的方法
2018/07/02 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python爬取天气数据的实例详解
2020/11/20 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
Structs界面控制层技术
2013/10/11 面试题
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
制衣厂各岗位职责
2013/12/02 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
客服部工作职责范本
2014/02/14 职场文书
新学期开学标语
2014/06/30 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
高三英语教学计划
2015/01/23 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL