摘要:基本上,等高布局只能满足栏的情况,除非正好是等比例的,那还可以使用实现最多栏布局上一篇世界笔记一流元素尺寸下一篇世界笔记三内联元素与对齐
上一篇:《CSS世界》笔记一:流/元素/尺寸
下一篇:《CSS世界》笔记三:内联元素与对齐
在读《CSS世界》第四章之前,粗浅的认为盒模型无非是margin/border/padding/content而已,再多无非在不同box-sizing下的表现不同而已;但是书中记录的替换元素与非替换元素、content的一些用法、margin合并等等,让我对“盒模型四大家族”有了全新的认识
一、替换元素与非替换元素根据“外在盒子”是内联还是块级我们可以把元素分为内联元素和块级元素,而根据是否具有可替换内容,我们也可以把元素分为替换元素和非替换元素1.1 替换元素定义
通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”,常见的替换元素有:、、、或者表单元素和
1.2 替换元素的特点内容的外观不受页面上的 CSS 的影响;如单复选框的内间距、背景色等样式
有自己的尺寸;如、都有自己的尺寸
在很多 CSS 属性上有自己的一套表现规则;vertical-align中,替换元素默认为baseline(字母x下边缘),替换元素的基线就被硬生生定义成了元素的下边缘
1.3 替换元素的尺寸计算规则替换元素的尺寸从内而外分为 3 类:固有尺寸、HTML 尺寸和 CSS 尺寸
固有尺寸指的是替换内容原本的尺寸;例如,图片、视频、input作为一个独立文件存在的时 候,都是有着自己的宽度和高度的;
HTML 尺寸,“HTML 尺寸”只能通过HTML原生属性改变,这些HTML原生属性包括的width和height属性、 的size属性、的cols 和 rows 属性
CSS 尺寸特指可以通过 CSS 的width和height或者max-width/min-width和max-height/min-height设置的尺寸,对应盒尺寸中的content box
尺寸计算优先级: CSS 尺寸 > HTML 尺寸 > 固有尺寸
1.4 替换元素与普通元素的转换(理论上)猜想1:html中src属性,img/video去掉src属性后也就成了普通元素
猜想2:css中的content属性,普通元素通过content属性也可以展示元素中原本没有的文字或图片
注意,content属性不仅能用于::before/::after中,还能用于元素中,不过有一定兼容性。
在 Chrome 浏览器下,所有的元素都支持 content 属性,而其他浏览器仅在::before/::after 伪元素 中才有支持
案例1:基于伪元素的图片内容生成技术
原理:img标签有src时不支持伪类,没有src时支持伪类;图片没有src时,::before和::after可以生效;给图片添加一个src地址时,图片从普通元素变成替换元素,原本都还支持的::before和::after此时全部无效
案例2:content 引入图片
img { content: url(1.jpg); }
案例3:hover 实现图片替换
img:hover { content: url(laugh-tear.png); }
案例4:优雅实现h1的SEO
《CSS 世界》
h1 { width: 180px; height: 36px; background: url(logo.png); /* 隐藏文字 */ text-indent: -999px; }
案例5:加载中动画
正在加载中... dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::before { display: block; content: "...A..A."; white-space: pre-wrap; animation: dot 3s infinite step-start both; } @keyframes dot { 33% { transform: translateY(-2em); } 66% { transform: translateY(-1em); } }
原理:content中有三行内容,分别是‘...’,‘..’,‘.’;动画位移dot即可实现正在加载的效果
案例6:计数器(了解)
三、padding属性padding 对内联元素水平和垂直方向上均有影响
padding 宽高百分比都是基于父元素的宽度计算
很多很多的前端同事有这么一个错误的认识:内联元素的 padding 只会影响水平方向,不会影响垂直方向。这种认知是不准确的,内联元素的 padding 在垂直方向同样会影响布局,影响视觉表现。 只是因为内联元素没有可视宽度和可视高度的说法(clientHeight 和 clientWidth 永远是 0),垂直方向的行为表现完全受 line-height 和 vertical-align 的影响,视觉上并没有改变和上一行下一行内容的间距,因此,给我们的感觉就会是垂直 padding 没有起作用。
案例1:增大点击区域
a { padding: .25em 0; }
案例2:任意高度的分隔符
登录注册 a + a:before { content: ""; font-size: 0; padding: 10px 3px 1px; margin-left: 6px; border-left: 1px solid gray; }
案例3:等比例盒子
用于实现自适应布局,如网页banner等比例大小图片
/* 矩形 */ div { padding: 50%; } /* 正方形 */ div { padding: 25% 50%; }
案例4:图形绘制
/* 菜单 */ .icon-menu { display: inline-block; width: 140px; height: 10px; padding: 35px 0; /* 默认border-color:currentColor; */ border-top: 10px solid; border-bottom: 10px solid; /* 核心 */ background-color: currentColor; background-clip: content-box; }四、margin属性
margin特点:
与padding不同,margin可以为负值;
与padding相同,margin的百分比也是相对于其父元素的width
4.1 margin负值应用(1)增大盒子尺寸
只有元素是“充分利用可用空间”状态的时候,margin 才可以改变元素的可视尺寸
/* 无法改变尺寸 */ .father { width: 300px; margin: 0 -20px; } /* .son 尺寸变化 */.father { width: 300px; } .son { margin: 0 -20px; }
(2)经典无兼容两栏布局
.column-box { overflow: hidden; } .column-left, .column-right { margin-bottom: -9999px; padding-bottom: 9999px; }
布局原理:
默认情况下,垂直方向块级元素上下距离是 0,一旦 margin-bottom:-9999px 就意味着后面所有元素和上面元 素的空间距离变成了-9999px,也就是后面元素都往上移动了 9999px。此时,通过神来一笔 padding-bottom:9999px 增加元素高度,这正负一抵消,对布局层并无影响,但却带来了我们 需要的东西— 视觉层多了 9999px 高度的可使用的背景色4.2 margin合并
块级元素的上外边距(margin-top)与下外边距(margin-bottom)有时会合并为单个外边距,这样的现象称为“margin 合并”。
两个条件:块级元素和仅发生在垂直方向上
margin合并的3种场景
(1)相邻兄弟元素 margin 合并。这是 margin 合并中最常见、最基本的
第一行
第二行
p { margin: 1em 0; }
(2)父级和第一个/最后一个子元素
(3)空块级元素的 margin 合并
.father { overflow: hidden; } .son { margin: 1em 0; }
此时.father所在的这个父级 如何阻止margin发生合并? 对于 margin-top 合并,可以进行如下操作(满足一个条件即可): 父元素设置为块状格式化上下文元素; 父元素设置 border-top 值; 父元素设置 padding-top 值; 父元素和第一个子元素之间添加内联元素进行分隔。 对于 margin-bottom 合并,可以进行如下操作(满足一个条件即可): 父元素设置为块状格式化上下文元素; 父元素设置 border-bottom 值; 父元素设置 padding-bottom 值; 父元素和最后一个子元素之间添加内联元素进行分隔; 父元素设置 height、min-height 或 max-height。 margin 合并的计算规则: “正正取大值”“正负值相加”“负负最负值” margin:auto 的填充规则如下 一侧auto应用 两侧auto,水平垂直居中 注意: 几个特点: border属性值不支持百分比 border-style 默认值为none border-color 默认值为currentColor 应用1:图片上传hover变色 应用2:优雅增加点击区域 应用3:三角形绘制 border能构成三角形和梯形的原理如下: 通过改变width/height以及border-width在不同方位的尺寸,可以改变三角形的倾角方位和尺寸 应用4:border等高布局 border等高布局的局限性: 由于 border 不支持百分比宽度,因此,适合至少一栏是定宽的布局 等高布局的栏目有限制。基本上,border 等 高布局只能满足 2~3 栏的情况,除非正好是等比例的,那还可以使用 border-style:double 实现最多 7 栏布局 上一篇:《CSS世界》笔记一:流/元素/尺寸 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。 转载请注明本文地址:https://www.ucloud.cn/yun/113556.html 摘要:一流体布局引出的几种网页布局方式布局方式描述特点场景静态布局,传统设计,网页上的所有元素的尺寸一律使用作为单位。世界中,提出了流体布局的概念所谓流体布局,指的是利用元素流的特性实现的各类布局效果。
下一篇:《CSS世界》笔记二:盒模型四大家族
写在前面
初读《CSS世界》还是在深圳,属于换工作前的充能。那时候除了工作,其他时间基本都在这本书里了,因为它的确吸引人。之前看过《CSS揭密》... 摘要:上一篇世界笔记二盒模型四大家族下一篇世界笔记四流的保护与破坏写在前面在页面布局中,内联元素的垂直对齐是比较常见和基础的布局需求,但是我们往往会因为垂直对齐中的,而头疼不已。
上一篇:《CSS世界》笔记二:盒模型四大家族下一篇:《CSS世界》笔记四:流的保护与破坏
写在前面
在页面布局中,内联元素的垂直对齐是比较常见和基础的布局需求,但是我们往往会因为垂直对齐中的1px,2px而头疼不已... 摘要:每个元素都有一组样式属性,这些属性涉及元素在文档流中显示时的不同方面,比如在文档流中的位置边框背景颜色等等。选择符和要应用的样式构成一条规则。上下文选择器严格来讲应该叫后代组合式选择器。
原文地址:http://justclear.github.io/css-stylin-with-css-note-1
由于 CSS 作用的对象是 HTML ,所以作者在这章主要先讲了一些基本的 HTM... 摘要:流体布局下的宽度分离原则宽度分离原则就是将独立占用一层标签而利用流动性在内部自适应呈现。为了不影响之前的布局我们需要重新计算的宽度。但是不支持属性还是需要手动计算值。使用不建议使用通配符设置盒模型。
css流体布局下的宽度分离原则
宽度分离原则就是将width独立占用一层标签,而border、margin、padding利用流动性在内部自适应呈现。
为什么要宽度分离
分离是为了便于维护...
(1)如果一侧定值,一侧 auto,则 auto 为剩余空间大小。
(2)如果两侧均是 auto,则平分剩余空间。.father {
width: 300px; height: 150px;
background-color: #f0f3f9;
position:relative;
}
.son {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: 200px; height: 100px;
background-color: #cd0000;
margin: auto;
}
display 计算值 inline 的非替换元素的垂直 margin 是无效的。对于内联替换元素, 垂直 margin 有效,并且没有 margin 合并的问题,所以图片永远不会发生 margin 合并。
五、border属性
.add {
color: #ccc;
border: 2px dashed;
}
.add:before {
border-top: 10px solid;
}
.add:after {
border-left: 10px solid;
}
/* hover变色 */
.add:hover {
color: #06C;
}
/* box-sizing非border-box时 */
.icon-clear {
width: 16px;
height: 16px;
border: 11px solid transparent;
}
div {
width: 0;
border: 10px solid;
border-color: #f30 transparent transparent;
}
.box {
border-left: 150px solid #333;
background-color: #f0f3f9;
}
.box > nav {
width: 150px;
margin-left: -150px;
float: left;
}
.box > section {
overflow: hidden;
}
下一篇:《CSS世界》笔记三:内联元素与对齐相关文章
《CSS世界》笔记一:流/元素/尺寸
《CSS世界》笔记三:内联元素与对齐
CSS 设计指南 学习笔记 一
读《css世界》笔记(1)
发表评论
0条评论
阅读 1082·2021-09-22 15:19
阅读 1696·2021-08-23 09:46
阅读 2226·2021-08-09 13:47
阅读 1404·2019-08-30 15:55
阅读 1407·2019-08-30 15:55
阅读 1973·2019-08-30 15:54
阅读 2794·2019-08-30 15:53
阅读 712·2019-08-30 11:03