• 盒模型


    盒模型概念、width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline
     
    css盒模型
     
    width : <length> | <percentage> | auto | inherit
     
    max-
    min-
     
    height:
    max-height:
    min-height:
     
    内边距
    padding:[<length>|<percentage>]{1,4}|inherit
     
    TRBL top,right,bottom,left
     
    可以单个设置,如:
    padding-top:
    padding-right:
    padding-bottom:
    padding-left:
     
    padding:20px;  == padding:20px 20px 20px 20px;
    padding:20px 10px == padding:20px 10px 20px 10px;
    padding:20px 10px 30px == padding:20px 10px 30px 10px
     
    外边距
    margin : [ <length> | <percentage> | auto ] {1,4} | inherit
     
    margin合并
    相邻的元素之间的margin会合并,选择两个相邻元素的最大值。
     
    水平居中
    margin:0 auto;
     
    边框
    border: [<border-width> || <border-style> || <border-color>] | inherit
    border-width : [<length> | thin | medium | thick ] {1,4} | inherit
    border-style : [solid | dashed | dotted | …] {1,4} | inherit
    border-color:[<color> | transparent ] {1,4 } |inherit
     
    border还可以分为:border-top, border-right, border-buttom, border-left
     
    例子:
    border:1px dashed blue;
     
    圆角边框
    border-radius:[<length>|<percentage>]{1,4}[/[ <length> | <percentage>] {1,4}]?
    border-radius:
    0px 5px 10px 15px/
    20px 15px 10px 5px; 
    /前面的是水平半径,/之后的是垂直半径 ,感觉就是类似椭圆的1/4
     
    border-radius: 50%;        /*正圆*/
     
    border-radius可以分成:
    border-top-left:
    border-top-right:
    border-buttom-right:
    border-buttom-left:
     
    内容超出
    overflow:visible | hidden | scroll | auto 
    visible : 超出部分仍然显示
    hidden:隐藏
    scroll:出现滚动条(水平和垂直)
    auto:没有超出的时候,不显示滚动条,超出的时候显示滚动条
     
    从overflow:scroll 的两个滚动条,可以引申出 overflow-x,overflow-y
    设置两个方向上的显示效果
     
    盒子大小
    box-sizing:content-box|border-box|inherit
    默认是content-box,是不计算padding的,width的长度加上两边的padding再加上两边边框的宽度
    border-box,是边框的宽度等于width的长度
     
     
    盒子阴影
    box-shadow:none|<shadow>[ , <shadow>]*
    shadow:inset? && <length>{2,4} && <color>?
    box-shadow : 4px 0px 0px 0px red;
    第一个值: 水平偏移
    第二个值:垂直偏移
    第三个值:模糊半径
    第四个值:阴影大小
    第五个值:颜色 
     
    栗子:
    box-shadow:inset 0px 0px 5px red;内阴影
    box-shadow:3px 3px 5px 2px, inset 0px 0px 5px red;(多阴影)
     
    不会占用空间
     
    边界
    outline : [<outline-width>|| < outline-style> || <outline-color>] | inherit
    outline-width : <length>|thin|medium|thick|inherit
    outline-style:solid|dashed|dotted
    outline-color:<color>|invert|inherit
     
    注:不占用空间,在border以外,outline的使用方法和border一样
     
     
     
    关于CSS属性的浏览器兼容性,可以通过 caniuse 查询。(http://caniuse.com/)
    border-radius ie8及以下不支持
    box-sizing ie7及以下不支持
    box-shadow ie8及以下不支持
    outline ie7及以下不支持
    所有文章如需转载请与我联系!邮箱地址shanchao@qq.com 随笔有任何问题都可以在下面评论,我会及时的回复。 如有如何文章侵权问题,我会做删除处理。
  • 相关阅读:
    java web中使用log4j
    Apache Log4j配置说明
    sql数据库为null时候ASP语句判断问题
    js实现两个文本框数值的加减乘除运算
    js实现文本框支持加减运算的方法
    php报错syntax error, unexpected T_GOTO, expecting T_STRING,报错文件与行数指向以下代码,是什么原因?
    安装DEDECMS出现Function ereg_replace()错误的解决方法
    按钮显示隐藏div、input等
    设计input搜索框提示文字点击消失的效果
    Xcode export/upload error: Your session has expired. Please log in-b
  • 原文地址:https://www.cnblogs.com/KuckBoy-shan/p/5728682.html
Copyright © 2020-2023  润新知