
CSS进阶
传说中的懿痕
这个作者很懒,什么都没留下…
展开
-
CSS进阶之堆叠上下文
堆叠上下文堆叠上下文(stack content),它是一块区域,这块区域有某个元素创建,它规定了该区域的内容在z轴上排列的先后顺序文章目录堆叠上下文创建堆叠上下文的元素同一个堆叠上下文中元素在z轴上的排列顺序。创建堆叠上下文的元素html元素(根元素)设置了z-index数值(非auto值)的定位元素同一个堆叠上下文中元素在z轴上的排列顺序。从后到前的排列顺序:创建堆叠上下文的元素的背景和边框堆叠级别(z-index,stack level)为负数的堆叠上下文,负数相同后面的覆盖前原创 2021-09-04 00:07:24 · 114 阅读 · 0 评论 -
CSS进阶之行盒的垂直对齐
行盒的垂直对齐文章目录行盒的垂直对齐多个行盒垂直方向上的对齐图片的底部白边多个行盒垂直方向上的对齐给没有对齐的元素设置CSS属性:vertical-align(设置在行盒上)预设值middle: 中线对齐bottom: 底边对齐top: 顶边对齐text-top:文字顶边对齐text-bottom:文字底边对齐<p> <input type="checkbox"> <span>无对齐</span>原创 2021-09-03 12:11:14 · 199 阅读 · 0 评论 -
CSS进阶之浮动的细节规则
浮动的细节规则盒子位置左浮动的盒子向上向左排列右浮动的盒子向上向右排列浮动盒子的顶边不得高于上一个盒子的顶边若剩余空间无法放下浮动盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动示例指向左边的箭头表示左浮动若剩余空间无法放下浮动的盒子,则该盒子向下移动,直到具备足够的空间能容纳盒子,然后再向左或向右移动。浮动盒子的顶边不得高于上一个盒子的顶边资料来源于渡一教育,仅作学习使用...原创 2021-09-03 11:52:00 · 172 阅读 · 0 评论 -
CSS进阶之块级格式化上下文
块级格式化上下文全称 Block Formatting Context , 简称BFC它是一块独立的渲染区域,它规定了在该区域中,常规流块盒的布局,常规流块盒在水平方向上, 必须撑满包含块.常规流块盒在包含块的垂直方向上依次摆放常规流块盒若外边距无缝相邻, 则进行外边距合并常规流块盒的自动高度和摆放位置, 无视浮动元素BFC的渲染区域:这个区域由某个HTML元素创建, 以下元素会在其内部创建BFC区域:根元素(< html >元素创建的BFC区域,覆盖了网页中的所有元素)原创 2021-09-03 01:00:56 · 156 阅读 · 0 评论 -
CSS进阶之web字体和图标
web字体和图标如果字体名字是多个单词, 要用引号包围文章目录web字体和图标web字体字重(font-weight)字号(font-size)文本颜色(color)字体风格(font-style)大小写转换下划线等(text-decoration)文本阴影 (text-shadow)空白处理(white-space)文本溢出处理(让溢出部分显示为...)首行文本缩进(text-indent)文本对齐方式(text-align)垂直对齐(vertical-align)字符间距排版模式(writing-m原创 2021-09-02 14:17:15 · 127 阅读 · 0 评论 -
CSS进阶之@规则
@规则import@import ‘路径’; 表示导入另外一个CSS文件@import "rest.css";比如导入重置样式charset@charset ‘utf-8’; 告诉浏览器该CSS文件,使用的字符编码集为utf-8,且必须写到CSS文件中的第一行@charset 'utf-8';@import 'rest.css';...原创 2021-09-02 12:28:42 · 85 阅读 · 0 评论