CSS盒子模型详解-优快云博客

这篇CSS笔记主要探讨了盒子模型，包括div的hover效果，表格边框的设置，内边距padding确保盒子尺寸与设计一致，外边距margin用于元素间的间距调整及实现居中，还提到了使用box-shadow创建阴影效果以及解决背景塌陷问题的方法，强调布局稳定性的顺序：width/height > padding > margin。

CSS笔记03

盒子模型：

盒子边框border； 边框
填充泡沫厚度：padding； 内边距
与其他盒子距离：margin； 外边距

border:宽度 样式 颜色

    <style>
        .box{
            width: 200px;
            height: 200px;
            border-color: #000;
            border-style: solid;(点线dotted/虚线dashed)
            border-width: 1px;


            /*综合写法*/
            border:1px solid #000;
        }
    </style>

可以给每个边框制定样式：

    <style>
        border-top:1px solid #fafafa;
        有top bottom left right

    </style>

div可以用hover

表格中给单元格添加边框可以实现显示表格线
表格细边框：–

    <style>
    table {
        width: 500px;
        height: 300px;
        border: 1px solid red;
    }
    td {
        border: 1px solid red;
        text-align: center;
    }
    table, td {
        border-collapse: collapse;  /*合并相邻边框*/
    }
    </style>

内边距padding：
盒子里面的内容与边框的距离

<style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            padding-top:10px;


            /*---也有上下左右---
            padding:_______;

            一个值：上下左右
            两个值：上下、左右
            三个值：上、左右、下
            四个值：上、右、下、左

            padding 会撑大盒子
        }*/

        /*量距：不量边框*/
    </style>

为保证盒子大小与效果图一致，需要根据边框内边距的大小适当减小盒子的 width 和 height

margin:
用于控制盒子与盒子之间的距离，用法类似于padding。
外边距不影响盒子的大小。
*外边距可以实现盒子居中：必须是块级元素，并指定了宽度。
实现方式：
左右边距为auto即可；
margin: auto;

设置默认边距为0：————————————————

    * {
    padding: 0;
    margin: 0;
    }

初始化一般是css的第一句话~~~

    ul{
        list-style: none;
    }

取消列表样式，也是css第一句话;

插入图片用盒模型调位置
背景图片用background-position调位置

背景塌陷问题，在父级加一个：
overflow: hidden;
布局稳定性：
width/height > padding > margin;

圆角边框：
border-radius:______px;
或者可以用百分比，最大50%，但是这种容易成椭圆。

盒子阴影：
box-shadow:水平阴影垂直阴影模糊距离（虚实）阴影尺寸（影子大小）阴影颜色（内/外阴影）

box-shadow:20px 12px 5px 3px rgba(1,2,3,0.3)
前两个必需