css3盒子相关样式
1、css3的display属性:
inline:内联
inline-block:可以设置宽高的内联
block:设置为块:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3盒子类型</title>
<style>
/*inline:内联，inline-block:可以设置宽高的内联,*/
p{
/*此处设置宽高无用*/
background: #999999;
display: inline;
width:200px;
}
span{
background: #fff000;
display: inline-block;
width:200px;
}
</style>
</head>
<body>
<p>这是一段测试文字</p>
<p>这是一段测试文字</p>
<span>这是一段测试文字</span>
<span>这是一段测试文字</span>
</body>
</html>
inline-table:内联表格:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>line-table属性</title>
<style>
/*inline-table:内联表格*/
table{
border: 2px solid #999;
display: inline-table;
}
table td{
border: 2px solid rebeccapurple;
}
</style>
</head>
<body>
我是上面文字
<table>
<tr>
<td>单元1</td>
<td>单元1</td>
<td>单元1</td>
</tr>
<tr>
<td>单元1</td>
<td>单元1</td>
<td>单元1</td>
</tr>
<tr>
<td>单元1</td>
<td>单元1</td>
<td>单元1</td>
</tr>
</table>
我是下面文字
</body>
</html>
list-item:把元素设置为列表项:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list-item属性</title>
<style>
/*list-item:把元素设为列表项。可设置列表项样式*/
div{
display: list-item;
list-style-type: circle;
margin-left:50px;
}
</style>
</head>
<body>
<div>我是一段测试文字</div>
<div>我是一段测试文字</div>
<div>我是一段测试文字</div>
</body>
</html>
2、盒子的大小计算方式:box-sizing属性：
border-box:此情况下设置的宽高为整个盒子(包含padding)的宽高;
content-box:此情况下设置的宽高为盒子内容(不包含padding)的宽高;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的box-sizing属性</title>
<style>
/*下面两个div宽高此情况下是一样的，*/
#div1{
box-sizing: border-box;
width:240px;
height:240px;
padding:20px;
background: #fff000;
}
#div2{
box-sizing: content-box;
width:200px;
height:200px;
padding:20px;
background: #00ff00;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
css3盒子相关样式的更多相关文章
- css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
- web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式
12. 文字和字体相关样式 12.1 CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...
- CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）
CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽 ...
- css文字与文本相关样式
css文字属性定义文本的字体系列,大小,加粗,风格和变形 font-family 设置字体系列 font-size 设置字体的尺寸 font-style ...
- 前端开发CSS3——文本样式和盒子及样式
博主废话少说,直接介绍css常用的属性和属性值:属性和值只需过一遍,页面的结构还是需要布局,布局的只是后期会更新的. 提供一些图标的网站:font-awesome: http://fontaw ...
- CSS自学笔记（10）:CSS3盒子模型
CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...
- CSS3 Backgrounds相关介绍
CSS3 Backgrounds相关介绍 1.背景图片(background images)是在padding-box的左上角落脚安家的,我们可以使用background-position属性改变默认 ...
- CSS3自定义滚动条样式
原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...
随机推荐
- CCS学习（三）
边框样式 边框线 dorder-style (top 上: bottom 下: left 左: right 右) 样式:none | hidden | dotted | dashed | sol ...
- Java条形码/二维码生成和解析
注意-本类依赖jar包文件:core.jar和zxing-javase.jar 下载jar文件,到本博客文件栏目下载. import com.google.zxing.BarcodeFormat; i ...
- css 定位属性position的使用方法实例-----一个层叠窗口
运行结果: <!DOCTYPE html> <html> <head> <title>重叠样式窗口</title> <style ty ...
- Execution failed for task':app;clean'
Execution failed for task':app;clean' >Unable to delete directory:f:xxxxxbuild\output\apk当程序出先这个错 ...
- webgl自学笔记——几何图形
3D应用的基础元素: 1.canvas,它是渲染场景的占位符.标准html的canvas元素 2.Objects,这里指的是组成一个场景的所有3d实体.这些实体都由三角形组成.webgl中使用Buff ...
- 对sppnet网络的理解
前言: 接着上一篇文章提到的RCNN网络物体检测,这个网络成功的引入了CNN卷积网络来进行特征提取,但是存在一个问题,就是对需要进行特征提取图片大小有严格的限制.当时面对这种问题,rg大神采用的是对分 ...
- Android事件分发理解
Android事件分发机制是个难点和重点,结合下各家,写点自己的理解.. 首先抛出一个小问题,写一个button的点击事件 button.setOnClickListener(new OnClickL ...
- Java版 QQ空间自动登录无需拷贝cookie一天抓取30WQQ说说数据&流程分析
QQ空间说说抓取难度比较大,花了一个星期才研究清楚! 代码请移步到GitHub GitHub地址:https://github.com/20100507/Qzone [没有加入多线程,希望你可以参与进 ...
- DDD理论学习系列（11）-- 工厂
DDD理论学习系列--案例及目录 1.引言 在针对大型的复杂领域进行建模时,聚合.实体和值对象之间的依赖关系可能会变得十分复杂.在某个对象中为了确保其依赖对象的有效实例被创建,需要深入了解对象实例化逻 ...
- ngin隐藏版本号
Nginx默认是显示版本号的,如: 这样就给人家看到你的服务器nginx版本,这样暴露出来的版本号就容易变成攻击者可利用的信息.所以,从安全的角度来说,隐藏版本号会相对安全些! 配置如下: 修改n ...