展开

关键词

CSS3盒模型:border-box

box-sizing可以声明计算元素高宽的 CSS 盒模型。它有content-boxborder-box和inherit三种取值。 其中border-box是 css3 新增,也是主流 UI 框架的全局默认属性。 因为border和padding都是盒子模型的一部分,但是margin标记的是盒子和盒子的间距。所以,border-box的计算方法更符合box-sizing的语义。 实际应用根据项目中的使用经验和 w3c 的建议,推荐box-sizing属性设置为border-box。 在样式表文件中添加以下代码:* { margin: 0; padding: 0;}div { box-sizing: border-box;}除了通用代码,border-box还可以配合 css3 中的四则运算符

31030

【前端切图】用css画一个卡通形象-小猪佩奇

; bottom: -7px; left: -38px; background-color: #fff; box-sizing: border-box;}.pig_head_white_left_top : #ffb3da; transform: rotate(35deg); z-index: 102; box-sizing: border-box; border-top-color: #ffb3da; box-sizing: border-box;} .right_eye_bg { width: 28px; height: 28px; top: 194px; left: 205px; border-radius ; box-sizing: border-box;} .mouth_bottom { width: 97px; height: 45px; top: 273px; left: 154px; border-radius ; z-index: 101; box-sizing: border-box; transform: rotate(19deg); border-top-color: #ffb3da;}.mouth_top

1.3K40
  • 广告
    关闭

    云加社区有奖调研

    参与社区用户调研,赢腾讯定制礼

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    css3 box-sizing属性

    定义和用法box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 border-box。 | border-box默认值:content-boxcontent-box:padding和border不被包含在定义的width和height之内。 ; -moz-box-sizing:content-box; border: 10px solid #333; } .padding-box{ box-sizing:padding-box; -moz-box-sizing :padding-box; -webkit-box-sizing:padding-box;*chrome 不支持* border: 10px solid #ccc; } .border-box{ box-sizing *border-box

    47760

    幽灵404 页面源码 跟随鼠标动画

    代码: 幽灵404页面 html, body { background: #28254C; font-family: Ubuntu;} * { box-sizing: border-box;} .box ; position: absolute; border-radius: 5px; top: 5px; left: 40px;}.box .box__ghost .symbol:nth-child(3) : 0 -0px; border-top: 15px solid #332F63; background: transparent;}.box .box__ghost .box__ghost-shadow { height: 20px; box-shadow: 0 50px 15px 5px #3B3769; border-radius: 50%; margin: 0 auto; animation: __description .box__button:hover { background: transparent; border-color: #fff;}.box .box__description

    20310

    CSS画各种图形(五角星、吃豆人、太极图等)

    CSS画各种图形(五角星、吃豆人、太极图等)五边形#pentagon { position: relative; width: 54px; box-sizing: content-box; border-width border-radius: 100%; width: 12px; height: 12px; box-sizing: content-box;}锁? : 1em; top: 5em; box-sizing: border-box; border: 3em solid red; margin: 0 0 6rem 0;}#lock:before { content : ; box-sizing: border-box; position: absolute; border: 1em solid red; width: 6em; height: 6em; left: after { content: ; box-sizing: border-box; position: absolute; border: 1em solid white; width: 1em; height

    79810

    HTML源码,动态幽灵404错误页,跟随鼠标

    附上源代码: 幽灵404页面 html, body { background: #28254C; font-family: Ubuntu;} * { box-sizing: border-box;} . box { width: 350px; height: 100%; max-height: 600px; min-height: 450px; background: #332F63; border-radius ; position: absolute; border-radius: 5px; top: 5px; left: 40px;}.box .box__ghost .symbol:nth-child(3) : 0 -0px; border-top: 15px solid #332F63; background: transparent;}.box .box__ghost .box__ghost-shadow { height: 20px; box-shadow: 0 50px 15px 5px #3B3769; border-radius: 50%; margin: 0 auto; animation:

    11210

    高质量编码-轨迹管理平台(CSS样式)

    : 1px solid rgba(0, 0, 0, 0.1); border-left: none; border-right: none; color: #666666;}#data-box .panel border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color ease : border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.check-box::before { top: 10px; left : 2px; overflow: hidden; top: 10px; box-sizing: border-box; border:1px solid rgba(255,255,255,0); width : 86px; height: 60px; position: absolute; border-radius: 2px; top: 10px; box-sizing: border-box; border

    10910

    CSS画各种图形(五角星、吃豆人、太极图等)

    : 18px solid red; border-radius: 100%; width: 12px; height: 12px; box-sizing: content-box; } #yin-yang ; border-radius: 100%; width: 12px; height: 12px; box-sizing: content-box; }shape-badge-ribbon #badge-ribbon : 20px solid #eee; border-radius: 25px; box-sizing: content-box; } #facebook-icon:after { content: 20 0 6rem 0; } #lock:before { content: ; box-sizing: border-box; position: absolute; border: 2.5em solid ; border-top-right-radius: 7em; } #lock:after { content: ; box-sizing: border-box; position: absolute

    79120

    45个值得收藏的 CSS 形状

    #pentagon { position: relative; width: 54px; box-sizing: content-box; border-width: 50px 18px 0; border-style #yin-yang { width: 96px; box-sizing: content-box; height: 48px; background: #eee; border-color: red; box-sizing: border-box; border: 3.5em solid red; border-right-width: 7.5em; border-left-width: 7.5em ; margin: 0 0 6rem 0;}#lock:before { content: ; box-sizing: border-box; position: absolute; border: 2.5em : 7em; border-top-right-radius: 7em;}#lock:after { content: ; box-sizing: border-box; position: absolute

    33420

    45个值得收藏的 CSS 形状

    : content-box; height: 48px; background: #eee; border-color: red; border-style: solid; border-width: : 20px solid #eee; border-radius: 25px; box-sizing: content-box;}#facebook-icon:after { content: 20; : border-box; border: 3.5em solid red; border-right-width: 7.5em; border-left-width: 7.5em; margin: 0 0 6rem 0;}#lock:before { content: ; box-sizing: border-box; position: absolute; border: 2.5em solid ; border-top-right-radius: 7em;}#lock:after { content: ; box-sizing: border-box; position: absolute;

    34440

    CSS魔法堂:重拾Border之——不仅仅是圆角

    成品通用标准审核 圆角的何止是border box啊?   看来border-radius确实影响到content box了。其实border-radius将会影响到box model中的所有box。 当我们通过border-radius设置border box的椭圆半径后,CSS渲染引擎会根据公式自动计算出marginpaddingcontent box的椭圆半径,然后为它们渲染出圆角。 : 20px; float:left;} 注意 由于margin区域无法触发点击等事件,而圆角border box所占面积必定小于直角border box,因此为保持可点击区域面积,圆角border box .s1{ box-sizing: border-box; width: 200px; height: 200px; border: 50px solid; border-color: red blue

    36750

    ”盒模型“之如何防止边框和内边距把元素撑开

    当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。 : border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .fancy { width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box ; box-sizing: border-box;} 我们现在一样大小了! 所以开发者们把以下CSS代码放在他们页面上:* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box

    38960

    基础(二)

    border-radius”中定义了一个不带任何值的参数$radius     在调用的时候可以给这个混合宏专递一个数值       .box{         @include border-radius .box{           -webkit-border-radius:3px;             border-radius:3px;       }混合宏的参数-传个带值的参数     在 (50%);         }     编译出来的 CSS:       .box {         -webkit-border-radius: 50%;           border-radius .btn{               @include border-radius;             }       示例在“.box”和“.btn”中等能调用了定义好的“border-radius 先来看编译出来的css;       .box{         -webkit-border-radius:3px;           border-radius:3px;           margin-bottom

    30580

    css3 UI 修饰——回顾

    1.box-shadow 属性向框添加一个或者多个阴影。   5.background-origin  规定background-position 属性相对于 什么位置来定位    语法:background-origin: padding-box|border-box |content-box;        padding-box 背景图像相对于内边距框来定位。         border-box 背景图像嫌贵对于        content-box 背景图像相对月内容框来定位    示例:               .background_origin{width: 300px 6.background-clip   规定背景的绘制区域    值: border-box 背景被裁减到边框盒       padding-box 背景被裁剪到内边距框      content-box

    28790

    双飞翼布局的改造 box-sizing和margin负值的应用

    : 20px;}.content-size{ box-sizing: content-box;}.border-size{ box-sizing: border-box;}context-size、border-size box-sizing: content-box时,div的宽度和高度为width和height的值box-sizing:border-box时,div的宽度和高度为 padding + border + width(内容高度)二、border-box属性的应用      对双飞翼布局的改造,传统的双飞高度是自适应的。 本次通过box-sizing属性的border-box值对双飞翼布局的高度进行定高,从而实现head与footer固定,而中间内容部分自动出现滚动条的能力。 根据box-sizing属性的介绍,可以知道设置为border-box时,他的高度=padding + border的值,其中还需要利用margin的负值。

    35380

    CSS魔法堂:盒子模型简介

    + padding + border的宽度        元素高度 = content height + padding + border的高度  IE盒子模型:   外盒模型        元素空间宽度 四、CSS3规则——box-sizing                           box-sizing有三个值,默认是content-box(表示元素使用W3C盒子模型),而border-box (表示元素使用IE盒子模型),inherit(从父元素上继承)浏览器支持:IE8开始支持Element{ -moz-box-sizing: border-box; FireFox3.5+ -o-box-sizing : border-box; Opera9.6(Presto内核) -webkit-box-sizing: border-box; Safari3.2+ -ms-box-sizing: border-box ; IE8 box-sizing: border-box; IE9+,Chrome10.0+,Safari5.1+,Opera10.6}五、总结

    29760

    Minima黑色响应式后台管理模板

    : content-box; -moz-box-sizing: content-box; box-sizing: content-box;}pre { overflow: auto;}code,kbd, : 0;}input { line-height: normal;}input,input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box ; box-sizing: border-box; padding: 0;}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button { height: auto;}input { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box : bold;}table { border-spacing: 0; border-collapse: collapse;}td,th { padding: 0;}GIF演示

    10510

    CSS之创意hover效果

    ); -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1); box-shadow: 10px 10px 99px 6px rgba(76,201,240,1 1); -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1); box-shadow: 10px 10px 99px 6px rgba(240 (185, 231, 105, 1); -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1); box-shadow: 10px 10px : border-box;} button::before, button::after { box-sizing: inherit; position: absolute; content: ; border button:hover::after { border-bottom-color: #4361ee; border-left-color: #4361ee; transition: border-color

    10520

    CSS手绘图形

    Document #box{ border-style:solid; border-color:transparent transparent red transparent; border-width Document #box{ display: block; width:126px; height:180px; background-color: red; -webkit-border-radius Document #box{ width: 96px; height: 48px; margin: 40px; background-color: #eee; border-color: red; border-style Document #box{ width: 80px; height: 80px; border-radius: 50%; box-shadow: 15px 15px 0 0 red; } ----半圆 Document #box{ width: 0; height: 0; border-right: 100px dotted transparent; border-bottom: 100px dotted

    11720

    手动ubuntu 18.04修改登录锁屏界面效果(含登录背景修改)flat-remix

    : 0; border: none; color: #2F343F; background-color: #FFF; box-shadow: none; font-weight: bold; box-shadow : none; border-color: transparent; } StEntry:insensitive { color: #cccccc; box-shadow: none; } StEntry : rgba(255, 255, 255, 0.3); border-width: 0; border: transparent; box-shadow: none; } .app-view-control : 6px; color: #FFF; background-color: #383C4A; border: .23em solid transparent; box-shadow: 0 2px 8px ; box-shadow: none; border-radius: 0; text-shadow: none; } .notification-banner .notification-button:

    1.2K10

    相关产品

    • 云服务器

      云服务器

      腾讯云服务器(CVM)为您提供安全可靠的弹性云计算服务。只需几分钟,您就可以在云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券