CSS (3) | 盒子

csyldjy

已于 2022-06-16 12:31:27 修改

阅读量788

点赞数

分类专栏：前端 CSS 文章标签：前端 css3

于 2022-04-09 16:04:44 首次发布

本文链接：https://blog.youkuaiyun.com/csyldjy/article/details/123731450

版权

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

CSS

6 篇文章

订阅专栏

1 盒子模型

1.1 看透页面布局本质

1.2 盒子模型（box model）组成

1.10 行内元素的margin和padding无效情况

1 盒子模型

页面布局要学习三大核心，盒子模型、浮动和定位，学习好盒子模型能非常好的帮我们布局页面。

1.1 看透页面布局本质

页面布局过程：

先准备好相关的网页元素，网页元素基本都是盒子box。
利用css设置好盒子样式，然后摆到相应位置。
往盒子里面装内容。

网页布局的核心内容，就是利用CSS摆盒子。

1.2 盒子模型（box model）组成

所谓盒子模型：就是把HTML页面中的元素看作是一个矩形盒子，也就是一个盛放内容的容器。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。

1.3 边框（border）

边框由三部分组成：粗细（px）样式颜色

1.3.1 width

语法：

border: border-width || border-style || border-color

1.3.2 border-style

语法：
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

参数：
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 　实线边框
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边

说明：
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

1.3.3 边框简写

border：1px solid red;
/*无先后顺序*/

边框分开写法：

border-top：1px solid red;
border-bottom：1px solid green;
border-left：1px solid yellow;
border-right：1px solid blue;

课堂要求：请给一个200*200的盒子，设置上边框为红色，其余边框为蓝色（提示：一定要注意边框的层叠性）

1.4 表格的细线边框

border-collapse（合并）属性控制浏览器绘制表格边框的方式，他控制相邻单元格的边框。

注：边框样式不能继承。

border-collapse:collapse
/*表示相邻边框合并*/

问题:非表格盒子border如何合并?

-为盒子添加右下/左上外边距

   border: 1px solid #f4f4f4;
    /*边框合并*/
   margin:0 0 -1px -1px;

1.5 边框会影响盒子实际大小

因此两种解决方案：

1、测盒子大小时不带边框。

2、带边框测则设置样式时去掉边框大小。

3、(css3盒模型)
操作：给盒子设置属性 box-sizing : border-box ; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去

1.6 内边距（padding）

padding属性用于设置内边距，即边框与内容之间的距离。

div {
    padding-top:20px;
}

padding简写属性可以有一到四个值。

值的个数	表达意思
padding：5px；	上下左右
padding：5px；10px；	上下；左右
padding：5px；10px；15px；	上；左右；下
padding：5px；10px；15px；20px；	上；右；下；左（顺时针）

注意：

①padding同样影响着盒子实际大小，也就是说，如果盒子已经有了高度和宽度，此时再指定内边距，会撑大盒子。

②如果盒子本身没有指定宽度，则此时padding不会撑开盒子大小。

案例：新浪导航栏

        div {
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            height: 37px;
            line-height: 37px;
            background: #fcfcfc;
        }

        a {
            display: inline-block;
            padding: 0px 30px;
            text-decoration: none;
            color: #4c4c4c;
        }

        a:hover {
            color: #ff8500;
            background-color: gray;
        }

<body>
    <div>
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">博客</a>
        <a href="#">关注我</a>
    </div>
</body>

1.7 外边距（margin）

margin属性用于设置外边距，即控制盒子与盒子之间的距离。

margin简写意义与padding一致。

margin-left：10px；

外边距可以让块级盒子水平居中，但必须满足两个条件。
- 盒子必须指定了宽度。
- 盒子左右外边距都设置为anto。
- 常见写法：
  - margin-left:auto；margin-right:auto;
  - margin:anto;
  - margin:0 auto;
- 这一方法让块级元素水平居中，而行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

        div {
            margin: auto;
            width: 400px;

        }

        img {
            width: 700px;
        }

    <div>
        <img src="碎冰蓝.jpg" alt="">
    </div>

1.8 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况：

1.8.1 相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是二者之和。

取两值中较大者为边距的现象为相邻元素垂直外边距的合并。

1.8.2 嵌套块元素垂直外边距的塌陷

对于两个嵌套（父子）关系的块元素，父子元素同时有上外边距，此时父元素会塌陷较大的外边距值。（儿子把父拽下来了）

解决方案：

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

2、可以为父元素添加overflow:hidden（推荐，不会撑大盒子）。

3. 转换成行内块元素
4. 浮动、固定，绝对定位的盒子不会有塌陷问题。

1.9 清除内外边距

        /* 这句话也是css的第一行代码 */
        /* *为通配符 */

        * {
            padding: 0;   /* 清除内边距 */
            margin: 0;    /* 清除外边距 */
        }

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

1.10 行内元素的margin和padding无效情况

➢ 场景：给行内元素设置margin和padding时

➢ 结果：
1. 水平方向的margin和padding布局中有效！
2. 垂直方向的margin和padding布局中无效！

2 ps基本操作

文件→打开：打开测量图片；
Ctrl+R：打开标尺（或者视图中）；
右击标尺，单位改为像素；
Ctrl+（+/-）可以放大/缩小视图;
按住空格键，鼠标可以变成小手，拖动ps视图；
用选区拖动，可以测量大小。

3 综合案例:

3.1 产品模块

案例问题总结：

1、布局为何不都用div？

标签都是有语义的，合理的地方用合理的标签，如产品标题就用h标签，大量文字段落就用p标签。

2、为什么用那么多类名？

类名就是给每个盒子起一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也更方便。

3、到底用margin还是padding？

多数情况二者可混用，各有优缺，根据实际需要判断（margin不易撑大盒子）。

3.2 案例模块

案例问题总结：

1、列表圆点怎么去除？

list-style:none；则是表示不使用项目符号的意思，但只能用于有序列表和无序列表。

2、如何实现多行同时编辑？

shift+alt：多行同时编辑.

4 圆角边框

border-radius属性用于设置元素的外边框圆角。

/* border-radius:length; */
border-radius:10px;

边框圆角的常见应用

➢ 画一个正圆：

1. 盒子必须是正方形

2. 设置边框圆角为盒子宽高的一半 → border-radius:50%

➢画一个椭圆:

1. 盒子要求是长方形

2. 设置 → border-radius：盒子高度的一半(%)

➢ 胶囊按钮：

1. 盒子要求是长方形

2. 设置 → border-radius：盒子高度的一半(px)

注意:

1、参数值可以为数值或百分比的形式。

百分比可以解决边长无法整除的缺陷。

2、简写时

写两个值，代表左上+右下和右上+左下（对角）。
写三个值，代表左上、右上+左下、右下。

写四个值，代表左上角、右上角、右下角、左下角（顺时针）。

3、还可以分开写：border-top-right-radius等。

注意：

length值越大曲度越大。

5 盒子阴影（重点）

box-shadow属性可以为盒子添加阴影。

box-shadow：h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必须。水平阴影的位置，允许负值
v-shadow	必须。垂直阴影的距离，允许负值
blur	可选。模糊距离
spread	可选。阴影的尺寸
color	可选。阴影的颜色。参考css颜色值
inset	可选。将外部阴影（outset）改为内部阴影

6 文字阴影

text-shadow可将阴影运用于文字（属性值同盒子阴影）。

text-shadow：h-shadow v-shadow blur color；