CSS3

RobinTang 发布于2019-04-23 11:55 / 2910人阅读

摘要：说白了，宽度就是包括内边距和边框。而的计算方式为若有雷同，可能我是从您那里学来的。

两个参数：

border-box和content-box

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-sizetitle>
    <style>
        .border-box{
            width: 100px;
            height: 100px;
            background-color: violet;
            box-sizing: border-box;
            padding: 10px;
        }
        .content-box {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            box-sizing: content-box;
            padding: 10px;
        }
    style>
head>
<body>
<div class="border-box">div>
<div class="content-box">div>
body>
html>

在此不难发现两个框不同，.border-box那个计算方式为　80（随着内边距和边框的增加而减少） + 10 * 2 （内边距两边）= 100 （不变），

无论内边距（10）和边框（忘了加了）怎么变，它们相加的结果始终等于自己设置的宽度（100）。

说白了，宽度就是包括内边距和边框。

而　　.content-box的计算方式为 100 + 10 * 2 = 120

若有雷同，可能我是从您那里学来的。

混合云 idc机房托管 css3 css3气泡 css3动画 JS+CSS3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1352.html

9个助力CSS开发的网站

摘要：是对规范的一个很大的改善和增强，它使得开发人员可以很容易的在网站中加入时尚的效果。一款在线圆角工具，四个角输入值就能生成对应的效果和代码。一个非常有用的用于和特性检测的库一个非常不错的兼容性在线检测网站。 CSS3 是对 CSS 规范的一个很大的改善和增强，它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。本文收集了9款有用的开发工具推荐给大家。 CSS3 Pie sho...

legendmohe 2019-08-02 17:58 评论0 收藏0
CSS重塑计划（一）：选择符

摘要：重塑计划一选择符元素选择符通配选择符，选择所有元素对象。选择符，以唯一标识符属性等于的对象作为选择符。选择具有属性且属性值为包含的字符串的元素。伪类选择符设置超链接在未被访问前的样式。仅用于规则匹配不含有选择符的元素。 CSS重塑计划（一）：选择符元素选择符 *通配选择符(Universal Selector)，选择所有元素对象。E类型选择符(Type Selector)，以文档语言...

lx1036 2019-08-29 12:23 评论0 收藏0
前端面试题-渐进增强和优雅降级

摘要：一背景介绍渐进增强和优雅降级这两个概念是在出现之后火起来的。二概念理解渐进增强渐进增强一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果交互追加功能达到更好的体验。一、背景介绍渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器...

HollisChuang 2019-08-30 14:10 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

hiyang 2019-08-29 16:12 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

王军 2019-08-23 10:29 评论0 收藏0
杂谈：渐进增强与优雅降级

摘要：而渐进增强和优雅降级两种不同的开发流程，也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。作为一名前端开发人员，最头疼的莫过于浏览器兼容。远古时期万恶的IE6，到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验，前端搬砖的我们不得不与...

SimonMa 2019-08-02 11:03 评论0 收藏0