06-CSS盒子模型

biank trrrry

已于 2022-07-16 21:10:15 修改

阅读量135

点赞数

分类专栏： HTML+CSS学习笔记文章标签： css 前端

于 2022-07-07 14:05:37 首次发布

本文链接：https://blog.csdn.net/weixin_69705761/article/details/125601404

版权

HTML+CSS学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、CSS三大特性

1）继承性

2）层叠性

3）优先级

特性：不同选择器具有不同的优先级优先级高的选择器样式会覆盖优先级低的选择器样式

1.优先级公式:

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

注意点：

1. !important写在属性值的后面分号的前面

2. !important不能提示继承的优先级 只要是继承优先级最低

3. 实际开发中不建议使用!important

2.权重叠加计算

二、PxCook的基本使用

略

三、盒子模型

1）盒子模型介绍

2）内容区域的宽度和高度

利用 width 和 height 属性默认设置是盒子 内容区域 的大小

属性值：数字+px

3）边框 border

1. 属性值

单个取值的连写取值之间以空格隔开（如 border: 10px solid red;）

2. 单方向设置

border-方位名词

3. 单个属性（不实用）

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid、虚线dashed、点线dotted……
边框颜色	border-color	颜色取值

4.新浪导航（案例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清楚标签默认的margin和padding */
        *{
            margin: 0;
            padding: 0;
        }
    
        .daohang{
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            height: 40px;

        }
        .daohang a{
            display: inline-block;
            text-decoration: none;
            width: 80px;
            height: 40px;
            color: #4c4c4c;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
          
        }
        .daohang a:hover{
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>
</head>
<body>
    <div class="daohang">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
</body>
</html>

4）内边距 padding

1. 复合属性

padding可做复合属性使用表示单独设置某个方向的内边距

四值	上右下左
三值	上左右下
两值	上下左右

2. 新浪导航优化

（导航文字字数变化将原本规定的width取消掉增加padding来调整左右边距）

    <style>    
        .daohang a{
            display: inline-block;
            text-decoration: none;
            /* width: 80px; */
            height: 40px;
            color: #4c4c4c;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            padding: 0px 16px;
        }
    </style>

3. CSS3盒模型（自动内减）

制作盒子300*300 边框10px黑色实线上下左右20px内边距

因border/padding会撑大盒子

方案一：手动内减

width-240px（300-10*2-20*2=240）

方案二：自动内减

给盒子设置属性 box-sizing: border-box;

    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 10px solid black;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>

5）外边距 margin

（与内边距设置方式同仅出现位置不同）

1. 清除默认内外边距

    <style>  
        *{
            margin: 0;
            padding: 0;
        }
    </style>

2. 版心居中

版心：网页的有效内容

margin: 0 auto;

3. 外边距折叠现象（合并现象）

场景：垂直布局 的 块级元素，上下的margin会合并

结果：两者距离为margin的最大值

解决方法：只给其中一个盒子设置margin即可

4.外边距折叠现象（塌陷现象）

场景：互相嵌套 的 块级元素，子元素的margin-top会作用在父元素上

结果：导致父元素一起向下移动

解决方法：

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

· 给父元素设置overflow: hidden

· 转换成行内块元素

· 设置浮动

四、综合案例

1）新闻列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .news{
            width: 500px;
            height: 400px;
            /* background-color: pink; */
            border: 1px solid #cccccc;
            padding: 42px 30px 0;
            margin: 50px auto;

        }
        .news ul li{
            height: 50px;
            border-bottom: 1px dashed #cccccc;
            line-height: 50px;
            padding-left: 28px;
        }
        .news li a{
            text-decoration: none;
            font-size: 20px;
            color: #666666;
        }

        .news h2{
            font-size: 30px;
            border-bottom: 1px solid #cccccc;
            padding-bottom: 9px;
        }
        /* 去掉列表符号 */
        ul{
            list-style: none;
        }

    </style>
</head>
<body>
    <div class="news">
        <h2>最新文章/New Articles</h1>
        <ul>
            <li><a href="#" class="one">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">体验javascript的魅力</a></li>
            <li><a href="#">jquery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jquery中的链式编程是什么</a></li>
        </ul>
    </div>
</body>
</html>