zoukankan      html  css  js  c++  java
  • CSS-02(圆角,阴影,轮廓/框模型,margin/padding/box-sizing)

    4 边框的圆角(倒角)
    border-radius:
    取值:px/%
    单角定义:border-top-left-radius:

    5 边框阴影
    box-shadow:0px 0px 0px 0px 000 inset/outset;
    值1:h-shadow---水平方向的阴影偏移(阴影左右移动)
    值2:v-shadow---垂直方向的阴影偏移(阴影上下移动)
    值3:blur---阴影模糊距离(越大越淡)
    值4:cspread---阴影尺寸(阴影大小)
    值5:color---阴影颜色,默认黑色
    值6:内阴影或者外阴影(默认)
    最简写:box-shadow:h-shadow v-shadow

    6 轮廓
    outline:width style color;
    边框外面的一圈,轮廓不占用元素的占地空间。项目中常用于去除边框
    outline:0;

    五 框模型(盒子模型)
    每个元素在页面上都有自己的占地空间,元素在页面上实际占地空间的计算方式就叫框模型。
    **元素实际占地宽度:** 左右外边距+左右边框+左右内边距+内容区域宽度
    **元素实际占地高度:** 上下外边距+上下边框+上下内边距+内容区域高度

    1 外边距margin
    改变外边距元素会有位移效果;外边距没有颜色。
    注意:左右外边距如果冲突,以左为准;上下外边距冲突,以上为准
    **margin:v1**---同时设置上下左右四个方向的外边距
    **margin:v1 v2**---设置上下 左右的外边距
    **margin:v1 v2 v3** ---设置上 左右 下的外边距
    **margin:v1 v2 v3 v4** ---设置上 右 下 左四个方向的外边距
    **margin-top/right/bottom/left**---单独设置四个方向的外边距
    取值:①px为单位②%为单位(不论是宽还是高,都是按照父元素的宽度的百分比)
    ③取值为正:left 向右;top 向下;right 向左;bottom:向上
    ④取值为负:与上相反
    ⑤auto:上下外边距无效,自动计算块级元素的左右外边距,让块级元素(此块级元素设置了宽度)居中。设置了auto,**左右外边距=(父元素的内容宽度-当前元素内容区域宽度-左右边框-左右内边距)/2**
    auto对上下外边距无效,对行内元素无效,对行内块元素无效。多用:margin:0 auto

    外边距的特殊效果:
    **(1)外边距合并:** 两个垂直外边距相遇时,会合并成一个,值以大的为准
    解决方案:只写上外或者下外。
    **(2)外边距溢出:**
    特殊情况下为子元素设置上外边距,会作用到父元素上。
    特殊情况:①父元素没有上边框;②子元素内容区域的上边与父元素的内容区域的上边重合
    解决方案:①给父元素加上边框;②给父元素加上内边距;③给父元素添加overflow:hidden/auto(如果想要溢出显示,就不能用了);**④**在子元素之前加一个空的< table> < /table> (table的特殊机制)
    **(3)行内,行内块,块级元素的总结(★★★★★)**
    ① 行内元素的特点:
    a 设置宽高无效,宽度根据内容自动撑开
    b 上下外边距无效,左右外边距有效
    c 可以和其他行内元素和行内块元素公用一行,一行放不下,再折行
    ② 行内块元素的特点:
    a 四个方向外边距有效
    b 如果一个行内块上下外边距调整,改变了位置,会带着其他元素一起改变位置。
    (4)自带外边距的元素:
    body h1-h6 p  dd dl dt
    body:4个8px
    ul>li:上下外边距16px,左内40px
    **css reset**:不同浏览器对默认的外边距解析有差别,所以在写代码之前,一般会把内外边距清空,这个行为称为css reset
    2 内边距padding
    内边距发生变化,感觉是元素大小发生变化,但是元素的内容区域没有变,改变的是元素的占地大小。
    什么时候使用内边距:把元素撑开的时候。以及在特殊情况下作为元素之间的空白间距。
    什么时候使用外边距:位置的微调
    padding: v1
    padding: v1 v2
    padding: v1 v2 v3
    padding: v1 v2 v3 v4
    padding-top/right/botton/left:
    取值:①以px为单位的数字;②%(父元素的款的百分比);③padding没有auto
    块级,行内块,行内的padding都有用
    padding的颜色与背景色一致

    3 box-sizing
    **box-sizing:**
    **content-box** (默认:意思是设置的宽度是内容区域的宽度,即正常元素占地宽度)
    **border-box**(表示此时设置的宽度是边框以内的内容区域的宽度)
    改变盒子模型的计算方式
    正常元素占地宽度:左右外边距+左右边框+左6右内边距+内容区域宽度
    改变盒子模型后的计算方式:width+左右外边距
    注意:box-sizing:border-box要写在设置了百分比宽高的元素上
    border-box一般没有背景色

  • 相关阅读:
    无废话MVC入门教程五[Control与View交互]
    无废话MVC入门教程三[路由设置及视图入门]
    无废话MVC入门教程二[第一个小Demo]
    IDEA 插件开发
    慢慢学Linux驱动开发,第十章,GNU C的扩展
    《UNIX环境高级编程》编译问题彻底解决方案
    GNU make笔记
    outlook2003无法显示地址列表 无法打开与该地址列表的相关"联系人"文件夹解决方案
    慢慢学Linux驱动开发,第十二章,加入内核
    ADS: (Fatal)L6002U:Could not open file:..... & L6002
  • 原文地址:https://www.cnblogs.com/codexlx/p/12461801.html
Copyright © 2011-2022 走看看