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 ...
随机推荐
- Java开源博客My-Blog之docker组件化修改
前言 5月13号上线了自己的个人博客,<Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦>,紧接着也在github上开源了博客的代码,到现在为 ...
- React周末特训班
Document #react819_content a { text-decoration: none; color: #ef7b2e; border-bottom: 1px solid #ef7b ...
- CISCO2960配置vlan
一.VTP配置 1.VLAN database 2.(VLAN)#vtp domain wx 3.(VLAN)#vtp server 二.VLAN配置 1.VLAN database 2.(VLAN) ...
- vue的增删改查
我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', pr ...
- Android不编译某个模块
Android 5.1 源码,编译相关的文件一般在build目录下build/target/product 放了很多mk文件:一般不同的产品会有不同的目录 假设我不想编译OpenWnn,在build目 ...
- CSS3文本
1.文字省略 text-overflow:ellipsis; overflow:hidden; white-space:nowrap; //text-overflow(clip.ellipsis)只是 ...
- struts加载spring
为了在Struts中加载Spring context,需要在struts-config.xml文件中加入如下部分: <struts-config> <plug-in classNam ...
- 第一个asp.net实例——生日邀请以及回函
22回校后,看了论文游了西湖,今天开始接触asp.net,从图书馆选了两本书:<精通ASP.NET 4.5 (第五版)>,<ASP.NET全能速查手册>.一本练手细看,一本翻查 ...
- IMPEX
1.Impex是基于java Model的一种面向对象的数据操作手段,因此写impex代码前需要理清java Model之间的依赖关系. 2.基本语法:mode type[modifier=value ...
- mysql控制台出现“unknown column 'password' in 'field list'问题
今天在windows系统上使用MySQL命令时,出现下面的"unknown column 'password' in 'field list'问题 解决办法如下,使用authenticati ...