-
关注爱学习公众号
-
扫码手机阅读更方便
-
CSS3 字体
CSS3 字体 CSS3 @font-face 规则 使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体。 使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。 当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。 您所选择的字体在新的 CSS3 版本有关于 @font-face 规则描述。 您“自己的”的字体是在 CSS3 @
-
CSS3 弹性盒子
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器
-
CSS3 过渡
.animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font-size:15px; padding:10px; float:left; margin:5px; -webkit-transition:-webkit-transf
-
CSS3 多列
CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例: .newspaper { border:1px black solid; padding: 15px; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */
-
CSS3 多媒体查询
CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。 例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。 CSS3 多媒体查询 CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置
-
CSS3 按钮
.w3-ripple{ position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-tran
-
CSS3 框大小
CSS3 框大小 [mystyle] #div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: content-box; } #div2 { width: 300px; height: 100px; padding: 50px; bord
-
CSS3 文本效果
#textshadow { text-shadow: 5px 5px 5px #FF0000; font-size:30px; } #wordwrap { width:11em; border:1px solid #000000; word-wrap:break-word; } #normal { width:11em; border:1
-
CSS3 分页
CSS 分页实例 .article-body ul li { background-image:none} .pagination,.pagination2,.pagination3 { display: inline-block; padding: 0; margin: 8px 0; } .pagination li,.pagination2 li,.pagination3 li
-
CSS3 图片
CSS 图片 本章节将为大家介绍如何使用 CSS 来布局图片。 圆角图片 实例 圆角图片: img {    border-radius: 8px;} 尝试一下 » 实例 椭圆形图片: img {    border-radius: 50%;} 尝试一下 » 缩
CSS3 框大小
CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。
| 属性 | |||||
|---|---|---|---|---|---|
| box-sizing | 10.04.0 -webkit- | 8.0 | 29.02.0 -moz- | 5.13.1 -webkit- | 9.5 |
不使用 CSS3 box-sizing 属性
默认情况下，元素的宽度与高度计算方式如下：
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度
这就意味着我们在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。
以上两个 <div> 元素虽然宽度与高度设置一样，但真实展示的大小不一致，因为 div2 指定了内边距:
实例
.div1 { width: 300px; height:
100px; border: 1px solid blue; }
.div2 { width: 300px;
height: 100px; padding: 50px;
border: 1px solid red;}
使用这种方式如果想要获得较小的那个框且包含内边距，就不得不考虑到边框和内边距的宽度。
CSS3 的 box-sizing 属性很好的解决了这个问题。
使用 CSS3 box-sizing 属性
CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。
如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:
以下是两个 <div> 元素添加 box-sizing: border-box; 属性的简单实例。
实例
.div1 { width: 300px; height:
100px; border: 1px solid blue;
box-sizing: border-box;}
.div2 { width: 300px;
height: 100px; padding: 50px;
border: 1px solid red; box-sizing: border-box;}
从结果上看 box-sizing: border-box; 效果更好，也正是很多开发人员需要的效果。
以下代码可以让所有元素以更直观的方式展示大小。很多浏览器已经支持 box-sizing: border-box; (但是并非所有 - 这就是为什么
input 和 text 元素设置了 width: 100%; 后的宽度却不一样)。
所有元素使用 box-sizing 是比较推荐的：
实例
* { box-sizing: border-box;}