读《css世界》笔记（1）

浠ラ箍发布于2019-08-30 15:56 / 1395人阅读

摘要：流体布局下的宽度分离原则宽度分离原则就是将独立占用一层标签而利用流动性在内部自适应呈现。为了不影响之前的布局我们需要重新计算的宽度。但是不支持属性还是需要手动计算值。使用不建议使用通配符设置盒模型。

css流体布局下的宽度分离原则

宽度分离原则就是将width独立占用一层标签,而border、margin、padding利用流动性在内部自适应呈现。

为什么要宽度分离

分离是为了便于维护如下面的css

.box{
    width:100px;
    border:1px solid
}

此时.box的宽度是102px,然后设计师需要20px的留白那么现在我们需要增加padding:20px;

.box{
    width:100px;
    border:1px solid;
    padding:20px;
}

此时的.box的宽度是142px增加了40px,跟原来的宽度差异明显,显然布局容易出现问题。为了不影响之前的布局,我们需要重新计算.box的宽度。

.box{
    width:60px;
    border:1px solid;
    padding:20px;
}

如果我们使用了宽度分离原则

.father{
    width:102px;
}
.son{
    padding:20px;
    border:1px solid;
}

布局宽度还是102px,只不过子元素的context-box的宽度变为了60px;无论我们怎么改padding值,都不会影响整体布局,浏览器自动计算子元素的宽度。

但是可能会有人说宽度分离多了一层标签，产生了HTML成本。我们还有更好的一种方法,通过改变width的box-sizing属性。

改变width/height作用细节的box-sizing

box-sizing的作用是改变width的作用细节它一下几种属性

.box{box-sizing:content-box}/*默认属性*/
.box{box-sizing:border-box}/*全部支持*/

.box{
    box-sizing:border-box;
    width:100px;
}

宽度是100px;

.box{
    box-sizing:border-box;
    width:100px;
    border:1px solid;
}

现在width还是100px;
用box-sizing:border-box;方便简洁,不会产出多余的标签。
但是！！！box-sizing不支持margin属性,还是需要手动计算margin值。
使用box-sizing:border-box;不建议使用通配符*{box-sizing:border-box}设置盒模型。

服务器托管混合云兼容笔记印象笔记笔记云笔记

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

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

《CSS世界》笔记五：CSS层叠规则及元素隐藏

摘要：元素层叠顺序补充说明位于最下面的特指层叠上下文元素后面会详解的边框和背景色。界中可能有其他的层叠结界，而自身也可能处于其他层叠结界中。上一篇：《CSS世界》笔记四：流的保护与破坏写在前面《CSS世界》这本书还剩六章，但是这本书的精华部分主要是前面的内容，这里仅把后面章节相对重要的内容以博客展示，想着了解更多的小伙伴还是去阅读原文的好，毕竟三百多页的一本书并不是小小几篇博客能完全说...

godruoyi 2019-08-29 16:21 评论0 收藏0
Angular4学习笔记——数据绑定

摘要：所以，在的世界中，唯一的作用是用来初始化元素和指令的状态。当进行数据绑定时，只是在与元素和指令的和事件打交道，而就基本上靠边站了，只有比较特殊的情况才会用到他。事件绑定事件名事件绑定分为对原生事件绑定和自定义事件绑定。数据绑定总体而言有三种类型： {{...}} 插值表达式绑定属性绑定（包括property和attitude 事件绑定插值表达式绑定既可以写在html结构中，...

MRZYD 2019-08-21 17:48 评论0 收藏0
《CSS世界》笔记一：流/元素/尺寸

摘要：一流体布局引出的几种网页布局方式布局方式描述特点场景静态布局，传统设计，网页上的所有元素的尺寸一律使用作为单位。世界中，提出了流体布局的概念所谓流体布局，指的是利用元素流的特性实现的各类布局效果。下一篇：《CSS世界》笔记二：盒模型四大家族写在前面初读《CSS世界》还是在深圳，属于换工作前的充能。那时候除了工作，其他时间基本都在这本书里了，因为它的确吸引人。之前看过《CSS揭密》...

hizengzeng 2019-08-30 15:54 评论0 收藏0
《CSS世界》笔记二：盒模型四大家族

摘要：基本上，等高布局只能满足栏的情况，除非正好是等比例的，那还可以使用实现最多栏布局上一篇世界笔记一流元素尺寸下一篇世界笔记三内联元素与对齐上一篇：《CSS世界》笔记一：流/元素/尺寸下一篇：《CSS世界》笔记三：内联元素与对齐写在前面在读《CSS世界》第四章之前，粗浅的认为盒模型无非是margin/border/padding/content而已，再多无非在不同box-sizing...

icyfire 2019-08-29 16:09 评论0 收藏0
《CSS世界》笔记四：流的保护与破坏

摘要：和可以看作是同父异母的兄弟关系。例子如下结果如下而父元素设置属性的方式则是利用了的特性下面将会详细讲解结界全称为，中文为块级格式化上下文。上一篇：《CSS世界》笔记三：内联元素与对齐下一篇：《CSS世界》笔记五：CSS层叠规则及元素隐藏写在前面原本博客名为浮动与定位，但是《CSS世界》第六章节的内容不仅有浮动定位，很大一部分篇幅都在讲BFC和overflow。更吸引人的是，作者将...

he_xd 2019-08-29 16:20 评论0 收藏0