zoukankan      html  css  js  c++  java
  • 盒子模型

    一.边框样式:
                        1.border-color:边框颜色
                            1.1 border-top-color:上线颜色
                            1.2 border-bottom-color:下线颜色
                            .................................
                            1.3 border-color:颜色1    所有边框
                            1.4 border-color:颜色1 颜色2     上下为颜色1     左右为颜色2
                            1.5 border-color:颜色1 颜色2 颜色3    上为颜色1 左右为颜色2    下为颜色3
                            1.6 border-color:颜色1 颜色2 颜色3 颜色4     上右下左
                        2.border-width:指定的是边框的粗细
                            2.1    thin细
                            2.2    medium中等
                            2.3    thick粗
                            2.4    像素xxxpx
                        3.border-style:指定边框风格
                            3.1 none:默认
                            3.2 hidden:隐藏
                            3.3 dotted:圆点
                            3.4 dashed:虚线
                            3.5 solid:实线
                            3.6 double:双实线
                        4.border: 边框线宽度    颜色    边框风格    
                            4.1 border:1px purple solid;
            二.外边距
                    margin:外边距,盒子与盒子
                    margin-top:上外边距
                    margin-right:下外边距
                    margin-bottom
                    margin-left
                    margin:0px auto;        网页居中对齐的必要条件    1.块元素    2.固定宽度
            三.内边距
                    padding:内边距,内容与盒子
                    padding-left :左内边距
                    padding-right
                    padding-top
                    padding-bottom
                    padding:位置1    位置2    上下为位置一    左右为位置二
            四.盒子模型尺寸
                    盒子模型总尺寸=border+padding+margin+内容宽度
                box-sizing:content-box  |  border-box  |  inherit;
                    content-box:默认值,盒子的宽度或者高度=border+padding+(margin)+width/height
                    border-box:盒子的宽度或者高度等于元素内容的宽度或者高度
                    inherit:元素集成父元素的盒子模型模式
            五.圆角
                    border-radius:圆角
                    border-radius:20px  10px  50px  30px;            四个属性值按顺时针排列

                    1.原形:
                         border-radius: 50%;    宽度和高度相同
                    2.半圆:
                         border-radius: 150px 150px 0px 0px;    两个角变,两个角不变,按照顺序,上半圆和下半圆宽度是高度的二倍,左半圆和右半圆高度是宽度的二倍
                    3.四分之一圆:
                         border-radius: 0px 0px 150px 0px;        一个角变,按照顺序,宽度和高度相同
            六.盒子阴影
                    box-shadow:10px 10px 30px yellow;
                    inset:内阴影


  • 相关阅读:
    代码管理模型概况
    循环链表
    队列

    链表
    java 2020-10-12T11:22:49.000+0800 字符串转换成正常时间格式
    动态数组
    mysql练习
    复杂度与LeetCode
    记一次带逗号的数字类型处理
  • 原文地址:https://www.cnblogs.com/ws1149939228/p/9195124.html
Copyright © 2011-2022 走看看