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:内阴影

  • 相关阅读:
    How to create jar for Android Library Project
    Very large tabs in eclipse panes on Ubuntu
    64bit Ubuntu, Android AAPT, R.java
    Linux(Ubuntu)下如何安装JDK
    Configure xterm Fonts and Colors for Your Eyeball
    建立、配置和使用Activity——启动其他Activity并返回结果
    建立、配置和使用Activity——使用Bundle在Activity之间交换数据
    建立、配置和使用Activity——启动、关闭Activity
    建立、配置和使用Activity——Activity
    异步任务(AsyncTask)
  • 原文地址:https://www.cnblogs.com/chx9832/p/9195195.html
Copyright © 2011-2022 走看看