文档章节

css3盒子相关样式

Akillua
 Akillua
发布于 2017/07/27 10:56
字数 448
阅读 5
收藏 0
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>

 

 

© 著作权归作者所有

Akillua
粉丝 0
博文 43
码字总数 19935
作品 0
郑州
私信 提问
助你美化网站的实用css3技巧(2)

CSS3 calc() 的使用 calc() 用法类似于函数,能够给元素设置动态的值: .simpleBlock { width: calc(100% - 100px);} .complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% -......

罗马教堂的钟声
2015/12/02
46
0
CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS实现低版本的浏览器...

zchuanzhao
2016/07/15
30
0
好程序员Web前端分享前端CSS篇

  今天好程序员跟大家分享的文章是CSS篇。Web前端技术由html、css和javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学...

好程序员IT
04/11
0
0
CSS定位元素--盒子模型

页面版式主要由三个属性控制: position 属性、 display 属性和 float 属性。其中,position 属性控制页面上元素间的位置关系, display 属性控制元素是堆叠、并排,还是根本不在页面上出现,...

风吹一米阳光
2015/09/22
26
0
css3中的弹性盒模型

css3中的弹性盒模型 注意:在使用弹性盒子模型的时候 父元素必须要加display:box和display:inline-box 现在我先写上我的代码 注意!在使用盒子模型的时候要加display 这里我前面还加了-we...

新网学会
2017/12/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

威胁快报|新兴挖矿团伙借助shodan作恶,非web应用安全再鸣警钟

近日,阿里云安全发现了一个使用未授权访问漏洞部署恶意Docker镜像进行挖矿的僵尸网络团伙。我们给这一团伙取名为Xulu,因为该团伙使用这个字符串作为挖矿时的用户名。 Xulu并不是第一个攻击...

阿里云官方博客
25分钟前
3
0
MD5 加密需要注意编码格式!!!

相信做过MD5加密的童鞋都遇到过字符编码的坑,一般加密出来的结果和其他人不一样都是字符编码不一致导致的,比如类文件的字符编码、浏览器的字符编码等和对方不一致,所以就需要转码统一字符...

jason_kiss
27分钟前
2
0
python中字符串的操作

https://www.jianshu.com/p/7fc851b6a7ee

writeademo
36分钟前
1
0
如何制定 Java 性能调优标准?

想让你的程序更快更稳,但是系统经常出各种 bug,无从下手?Java 性能调优全攻略来啦! 我有一个朋友,有一次他跟我说,他们公司的系统从来没有经过性能调优,功能测试完成后就上线了,线上也...

Java领航员
37分钟前
2
0
java博客项目

项目地址:https://github.com/otale/tale 项目演示地址:https://tale.biezhi.me/ 项目介绍:Tale使用轻量级mvc框架Blade进行开发,默认主题使用漂亮的pinghsu, 特征 设计简洁,界面美观 ...

编程资源库
37分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部