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 ...
随机推荐
- js 监控iframe URL的变化
iframe的url可以前端任何地址,这样就可能出现漏洞,如果钓鱼网站通过js把src改成了危险地址,如果没有监控,就会有很大隐患.所以监控iframe的url变化就是必须要解决的问题了. 第一印象的 ...
- jsp实现上一页下一页翻页功能
前段时间一直忙于期末考试和找实习,好久没写博客了. 这段时间做了个小项目,包含了翻页和富文本编辑器Ueditor的两个知识点,Ueditor玩的还不是很深,打算玩深后再写篇博客. 要实现翻页功能,只需 ...
- JS事件响应的学习总结
点击事件:ocnlick 鼠标经过事件:onmouseover 鼠标移开事件:onmouseout 获得焦点事件:onfocus 失去焦点事件:onblur 内容选中事件:onselect 文本框内容 ...
- RabbitMQ知多少
1.引言 RabbitMQ--Rabbit Message Queue的简写,但不能仅仅理解其为消息队列,消息代理更合适.RabbitMQ 是一个由 Erlang 语言开发的AMQP(高级消息队列协议 ...
- Android Studio 自动生成 Java Doc
Android Studio 生成 Java Doc 出现"编码GBK的不可映射字符"问题 错误的解决方案,复制粘贴一万遍也是错误的,下面是查找出来的,没有用的解决方案(还有几个, ...
- hdu 3926 hands in hands
https://vjudge.net/problem/HDU-3926 题意:有n个小朋友,他们之间手拉手,但是一只手只能拉一只手或者不拉,现在给出两个图,表示拉手关系,问这两个图是否同构.思路:一开 ...
- 使用java语言编写窗口按钮
使用java语言编写窗口按钮 代码如下: package Day08; import java.awt.FlowLayout; import javax.swing.JButton;import ja ...
- 使用WordPress快速建站
安装前的准备1.下载最新版的 WordPress (这里演示为WordPress 3.5 官方中文版),解压后,将WordPress文件夹里面的所有文件,上传到你的主机空间域名所绑定的根目录.2.新建 ...
- （转）Schema
总结: 1.schema本身就是一个XML文件 2.schema功能比DTD强大,正逐步替代DTD 3.schema的根元素固定为schema 4.schema文档定义完毕后,需要绑定到一个URI地址 ...
- Hibernate的系统 学习
Hibernate的系统 学习 一.Hibernate的介绍 1.什么是Hibernate? 首先,hibernate是数据持久层的一个轻量级框架.数据持久层的框架有很多比如:iBATIS,myBat ...