首页 > 操作系统 >

不同浏览器兼容性问题慕课学习史上最全零基础入门HTML5和CSS笔记(15)

电脑杂谈　发布时间：2017-12-28 05:04:03　来源：网络整理

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

    内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：

    div{
        border:2px  solid  red;
    }

上面是 border 代码的缩写形式，可以分开写：

    div{
        border-width:2px;
        border-style:solid;
        border-color:red;
    }

* 注意：*

1、border-style（边框样式）常见样式有：

dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:

border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：

sthin | medium | thick（但不是很常用），最常还是用象素（px）。

现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：

    div{border-bottom:1px solid red;}

同样可以使用下面代码实现其它三边(上、右、左)边框的设置：

    border-top:1px solid red;
    border-right:1px solid red; 
    border-left:1px solid red;

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的高度也是同理。

比如：

css代码：

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

html代码：

<body>
   <div>文本内容</div>
</body>

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：

    div{padding:20px 10px 15px 30px;}

顺序一定不要搞混。可以分开写上面代码：

    div{
       padding-top:20px;
       padding-right:10px;
       padding-bottom:15px;
       padding-left:30px;
    }

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-56429-15.html

相关阅读

发表评论　　请自觉遵守互联网相关的政策法规，严禁发布、暴力、反动的言论

每日福利

如何提高关键词密度，防范关键字堆砌

热点图片

热点排行

电脑杂谈