CSS盒模型

最新推荐文章于 2023-10-02 10:05:05 发布

夏虫语冰彡

最新推荐文章于 2023-10-02 10:05:05 发布

阅读量601

点赞数 1

文章标签： css 盒模型布局边距问题

本文链接：https://blog.csdn.net/qq_34283987/article/details/77894007

版权

在讲解使用CSS布局页面之前，让我们首先了解一下盒模型(Box Model).盒模型的概念其实很简单，我们可以把HTML中每个元素都当做一个矩形的盒子，盒子相当于一个容器，里面可以放其他元素(标签和文本等)，例如div、p、H4等。每个盒子都有宽度width、高度height、补白padding(有的资料翻译成填充)、边框border、边距margin.其中补白、边框、边距都有上下左右之分。

盒模型可以用下图表示：
盒模型示意图

下面分别解释盒模型的几个部分的含义
content:注意content不是属性，而是盒模型的内容(盒模型中文本显示在Content处)，由宽width、height组成，例如
width:100px 表示宽度为100像素
height:50px 表示高度为50px
padding:补白，也叫填充(内边距)。存在于内容周围,同时继承了内容区域的背景色。该属性其实是四个属性的复合属性，这四个属性分别是padding-top、padding-right、padding-bottom、padding-left.

该属性通常用三种使用方式
方式1：
padding:10px
表示上下左右的补白都是10像素

方式2
padding:5px 6px 7px 8px
表示上、右、下、左的补白分别是5、6、7、8像素，为了方便速记，我们可以按照顺时针的方向记忆，第一个值为上，其他的值依次类推为右、下、左。

Trouble top right bottom left

方式三
padding:10px 20px
表示上下补白都是10px,左右补白都是20px.

方式四: 分别指定
padding-top、padding-right、padding-bottom、padding-left.

border:表示盒模型的边框，也是复合属性，可以用border-top、border-right、border-bottom、border-left分别表示。边框可以具有宽度、多种类型和颜色，例如
border:1px solid #000000 表示边框宽度为1像素实心黑色

margin:边距，是元素和元素之间的距离。它永远都没有颜色，而且是透明的。

这里有个值得注意的地方，就是盒模型的真正的宽度和高度。

盒模型的宽度(内盒宽度)为:width + padding-left + padding-right + border-left + border-right
盒模型的高度(内盒高度)为：height + padding-top + padding-bottom + border-top +
border-bottom

示例代码：
`

二、盒模型边距问题

值得一提的是如果有两个元素，并且都设置了边距，比如边距都是10px,则这两个元素之间的边距不是两个边距的累加和20px，而是其中一个边距值比较大的元素的边距.

CSS代码:
* {
    margin:0px;
}

div.divClass1 {
    width:100px;
    height:100px;
    background-color:yellow;
    margin:10px;
}

div.divClass2 {
    width:100px;
    height:100px;
    background-color:green;
    margin:20px;

}

页面文件

<div class="divClass1">
            我是div1
</div>

 <div class="divClass2">
       我是div2
 </div>

三、块级元素和行内元素的区别

接下来了解另外两个概念，块级元素(bock element)和行内元素(inline element也叫内联元素)。这两个概念也是学习CSS布局必须要知道的概念。HTML中的元素大体可以分为两类：块级元素、行内元素。块级元素之间是垂直排列的，例如div,而行内元素之间是水平排列的,例如span.

学习这两个概念主要要了解两个概念的区别，下面以下图为例解释一下两个概念的区别

块级元素垂直排列高宽边距都可控制默认大小和父元素一致例如div、p
行内元素水平排列高宽边距都不可控制
(水平边距可调、垂直不可调) 宽度就是其包含文字、图片的宽度 span 例如span、b、label、a

                        块级元素和行内元素

我们区别块级元素和行内元素最重要的作用是：编写css时知道哪些属性对行内元素不生效，如高宽边距，这样在试图通过width、height、border属性修改行内元素的高宽边距而不起作用时，就不会感到惊讶了意外了。(读者们可以自己设置一下做下实验)

小技巧：通过块级元素垂直排列、行内元素水平排列的特性，我们要想得知任何一个HTML元素是属于什么元素，只要定义两次该元素查看一下排列方式即可，如果是垂直排列的该元素就是块级元素，如果是水平排列的该元素就是行内元素。

块级元素和行内元素互相转换
一.先块级转行内

display:inline;

二.讲解行内块

inline-block

解决两个行内块间距问题

1.负边距

margin-right:-4px;

2．删了空白

3.添加注释

都不好!

如果想要两个div水平排列最好不要用inline-block,推荐使用浮动(稍后再说)

三.行内转块级

下面以行内元素span为例，把行内元素span转换成块级元素

{
margin:0px;
}

span.box1 {
width:100px;
height:100px;
padding:10px;
border:5px solid #000000;
margin:10px;
background-color:yellow;

}

span.box2 {
width:100px;
height:100px;
padding:10px;
border:5px solid #000000;
margin:10px;
background-color:yellow;
}

        行级元素span效果

分别在两个span元素的样式上加上display:block属性后(读者加上测验，在此不再重复罗列代码)
运行结果：

            图2.36 行内元素转换成块级元素

由上图可见在给span元素加上display:block属性时，span从行内元素变成了块级元素，由于是块级元素，两个span的排列是垂直排列的。但这时文本内容超出了span元素，我们这时可以通过修改width属性为200px来改变块级元素的宽度了。把两个span元素width属性改为200px效果如下：

    改为块级元素后可以修改宽度、高度、边框属性

overflow属性
如果读者不想通过设置span的宽度让溢出的内容显示的话，比较有意思的是可以设置
span的overflow属性为scroll，它可以给元素添加滚动条(不管内容溢出不溢出都加滚动条)，使得用户可以通过移动滚动条来查看内部的文本。overflow的默认属性为visible(即没有设置overflow时,其属性为visible，效果如图2.36)，另外还有一个值为overflow:hidden,它表示超出的文本不显示。
overflow:auto,如果不溢出就没有滚动条,如果溢出加滚动条.
(请读者分别设置overflow的四个属性测试，看一下效果)

元素的word-break属性
normal 默认值使用浏览器默认的换行规则,遇到一个单词如果显示不了会自动换行显示

break-all 允许在单词内换行。

如果想让内容换行可以加上如下属性

word-break: break-all;

超链接按钮的实现

使用超链接模拟按钮
垂直导航栏的实现
就是超链接按钮, 复制4份放到li 中

步骤如下:

导航栏= 链接列表

刚才一个按钮是一个 a 锚点, 4个锚点就组成了垂直导航栏

一. 第一步写一个ul

默认每个li 前面有一个默认的项目图标 ,我们要把它去掉

二. 去项目图标

图标去掉了,但是列表默认有个缩进向右缩进了一下 ,咱想让它领头…

ul {
list-style-type:none;
padding:0px;/新浏览器 firefox safari 都是使用内边距控制缩进的新ie也是/
margin:0px;/老ie是使用外边距缩进的所以光设置padding:0px 老id 不会去掉索引为了兼容老ie/

}
演示代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>使用超链接模仿按钮</title>


<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type="text/css">
* {
    margin: 0px;
}

a {
    border: 1px solid #e4393c;
    display: block;
    width: 150px;
    background: #e4393c;
    height: 26px;
    line-height: 26px;
    color: #fff;
    font-size: 15px;
    font-family: '微软雅黑';
    text-align:center;
    text-decoration:none;

    white-space:pre;
}

ul {
    list-style-type:none;
    padding:0px;/*新浏览器 firefox safari 都是使用内边距控制缩进的 新ie也是*/
    margin:0px;/*老ie是使用外边距缩进的 所以光设置padding:0px 老id 不会去掉索引 为了兼容老ie*/

}

li a:hover {
    background-color:#F7F7F7;
    color:#e4393c;
    border-right:#F7F7F7;
}
</style>

</head>

<body>


    <ul>
        <li><a href="">手    机</a></li>
        <li><a href="">笔记本</a></li>
        <li><a href="">图书音像</a></li>
        <li><a href="">服装鞋帽</a></li>
    </ul>
</body>
</html>

如果想让导航栏水平排列:使用浮动

li {
float:left;
}

夏虫语冰彡

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS盒模型

在讲解使用CSS布局页面之前，让我们首先了解一下盒模型(Box Model).盒模型的概念其实很简单，我们可以把HTML中每个元素都当做一个矩形的盒子，盒子相当于一个容器，里面可以放其他元素(标签和文本等)，例如div、p、H4等。每个盒子都有宽度width、高度height、补白padding(有的资料翻译成填充)、边框border、边距margin.其中补白、边框、边距都有上下左右之分。盒模型可
复制链接

扫一扫