【HTML+CSS】盒子模型

盒子模型

边框属性

• 边框颜色
• 边框宽度
• 边框样式
  • solid 实线
  • dashed 虚线
  • dotted 点线
  • double 双实线

单边边框单一属性

语法: border-方位词(top/right/bottom/left)-属性(color/style/width)

<style>
    .box2{
        width: 300px;
        height: 300px;
        background-color: skyblue;

        border-top-width: 10px;
        border-top-style: dashed;
        border-top-color: blue;

        border-right-width: 10px;
        border-right-style: solid;
        border-right-color: red;

        border-bottom-width: 10px;
        border-bottom-style: dotted;
        border-bottom-color: green;

        border-left-width: 10px;
        border-left-style: double;
        border-left-color: yellow;
    }
</style>

单边框的综合属性

border-方位词(top/right/bottom/left):颜色 宽度 样式

<style>
    .box3{
        height: 200px;
        width: 200px;
        background-color: #000;
        
        border-bottom: 10px solid green;
        border-top: 10px dashed blue;
        border-left: 10px dotted red;
        border-right: 10px double orange;
    }
</style>

1-4边框的单一样式

border-属性(color/style/width)

• 一个值: 四边
• 两个值: 上下 左右
• 三个值: 上 左右 下
• 四个值: 上 右 下 左

<style>
    .box4{
        height: 200px;
        width: 200px;
        background-color: #000;
        border-width: 30px;
        border-style: dashed;
        border-color: red;
        border-color: red green;
        border-color: red green blue;
        border-color: red green blue black;
    }
</style>

四边的综合写法

border: 宽度 样式 颜色

<style>
    .box5{
        height: 200px;
        width: 200px;
        background-color: #000;
        border: 10px  solid  red;
    }
</style>

三角形案例

1. 元素的宽高必须设置为0
2. 设置四边的边框属性
3. 去掉不要的边框颜色(设置透明色),保留需要的边框颜色

<style>
    .box6{
        height: 0;
        width: 0;
        border-style: solid;
        border-width: 100px;
        border-color: yellow transparent transparent transparent;
    }
</style>

边框默认值

1. 颜色: 默认值文本颜色,黑色
2. 宽度: 默认值,不是0
3. 样式: 默认值none(没有边框样式)

去除列表符号
list-style: none

<style>
    ul,ol{
        list-style: none;
    }
</style>

PS应用

1. 怎么打开图片,可以右键打开方式
2. 怎么调整图片的位置,放大或者缩小,矩形选框工具–alt+鼠标滚轮调整大小
3. 矩形选框工具量像素大小
4. 修改单位,编辑->首选项->单位与标尺->标尺
5. 怎么打开参考线 ctrl+r出现消失参考线
   取消参考线:可以点击移动工具–拖回去
6. 取色: 吸管工具—颜色 右键复制十六进制
7. 怎么查看信息 fn+f8