基本框 假定每一个元素都会生成一个火多个矩形框,为元素框 元素框中心有一个内容区,周围有内边距,边距和外边距 内容的背景会应用到内边距,外边距是透明的,可以看到父元素的背景 内边距不能是负值,外边距可以 包含块 每个元素相对于其包含块摆放,包含块就是一个元素的布局上下文 包含块是由最近的块级祖先框,表单元格火行内祖先框的内容边界构成 行内元素的摆放方式不直接依赖于包含块 水平格式化 使用auto 如果设置width,margin-left,margin-right中两个值为特定值,其余一个为au…

1.基本概念     (1)正常流:是指西方语言文本从左向右,从上向下显示.如果要让一个元素不在正常流中国,唯一的办法                     就是使之成为浮动或定位元素.     (2)非替换元素:如果元素的内容包含在文档中,则称之为非替换元素.     (3)替换元素:指用作为其他内容占位符的一个元素.例子:img中的图像     (4)块级元素:在正常流中,会在其框之前和之后生成“换行”                         所以出于正常流中的块级元素会垂直摆放.…

改变元素显示 没有讨论与表格相关的.列表list-item的值.之后讨论. 改变显示角色 显示为块级元素 将一串链接(行内元素)改变垂直放置,若有如下一连串的链接: <div id="navigation"> <a href="index.html">WidgetCo Home</a><a href="products.html">Products</a> <a href=&quo…

行内元素 em a 非替换元素 img 替换元素 两者在内联内容处理方式不一样. inline有时候被翻译成内联,比如inline content,有时候被翻译成行内 inline box. 行布局 行内元素只是生成一个框,没有其他内容(里面不能放框了可能)与之并存. 单行行内元素 多行行内元素 相邻两行之间的边框,firefox不重叠,上一行的下边界在下一行的上边界的下边,交错着的.似乎chrome是重合的不一样. 水平方向对齐方式 text-align left right center j…

行内替换元素 替换元素比如图片的高度比line-height大,并不会影响整个文字段落的line-height,会让有图片那一行框的高度可以容纳这个图片. 这个图片依然有一个line-height,和在一起的行内元素一样,因为垂直对齐vertical-align值为百分比时要在这个基础上计算. * * * 增加框属性 替换元素的内容区包括,元素的内外边距及边框.会影响当前行的行框高. margin可以为负值,负边距是挤入其他行的唯一方法. * * * 替换元素和基线 替换元素位于基线之上. 这样…

定位 定位的想法很简单元素框相对于正常位置出现在哪里. 定位:static,相对, 绝对, fixed, 继承 static就是默认的位置 相对就是相对于默认位置的偏移.原来的static定位位置依然占着. 绝对定位相对于包含块(非static的)的偏移.完全脱离文档流,原来的位置就没了. fix相对于viewport视窗的偏移. 包含块 根元素是初始包含块,有的浏览器是html元素,有的为body. 非根元素,position为相对或者默认位置,包含块是最近祖先级的块级框.表格单元.行内块.…

原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且结合具体的实例进行具体分析,特别是对于CSS2.1支持并不完善的IE6/7.由于经验尚浅,文中肯定存在一些问题,希望大家可以多多包涵并且指出问题.   阅读本文前,应当对于CSS盒模型以及视觉格式化模型中会产生的各种框(box,也可以成为盒子)以及各种不同的布局方式有比较准确的认识,可以阅读杜瑶大神…

1. 概念 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 额外的信息(比如视口的大小,图片的原始尺寸等) 1.1 视口(viewport) 连续媒体(continuous media)的UA(user agent/用户代理)通常会给用户提供一个视口,一般为一个窗口或者屏幕上的一片可视区域.用户通过这个视口查看文档(document).当视口的大小改变时,…

CSS视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.这是CSS 2.1的一个基础概念.视觉格式化模型根据CSS盒模型为文档的每个元素生成0,1或多个盒.每个盒的布局由如下内容组成: 盒尺寸:明确指定,受限或没有指定 盒类型:块级盒(block-level box),行内级别盒(inline-level box),行内盒(inline-box),原子行内级别盒(atomic inline-level box) 定位方案(position…

前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的正确效果,还是浏览器兼容性的bug.下面将详细介绍CSS视觉格式化 术语解释   了解CSS视觉格式化之前要先了解一些基本术语.而下面所有的术语中,最重要的就是基本框和包含块 [基本框]   CSS假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区(content…

CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻译自W3C官方文档,其中加上了自己的一些理解.相关链接:https://www.w3.org/TR/CSS2/visuren.html#block-boxes. 1.可替换元素(Replaced element) 下面的一段话引自MDN: 典型的可替换元素有 <img>. <object&g…

视觉格式化模型 1. 简介 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 额外的信息(比如视口的大小,图片的原始尺寸等) 1.1 视口(viewport) 连续媒体(continuous media)的UA(user agent)通常会给用户提供一个视口,一般为一个窗口或者屏幕上的一片可视区域.用户通过这个视口查看文档(document).当视口的大小改…

前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的正确效果,还是浏览器兼容性的bug. 基本概念 [基本框] CSS假定每个元素都会生成一个或多个矩形框,这称为元素框. 各元素框中心有一个内容区(content area). 这个内容区周围有可选的内边距.边框和外边距. 可以用多种属性设置外边距.边框和内边距.内容的背景也会应用到内边距.外边距通常…

本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absolute等定位方式,因此为了便于效果显示,所有的demo都把body的margin属性设为10px,并且增加了一个class为container的div元素,它具有10px的padding,3px的border,500px的width,并通过设置float:left,_zoom:1来形成一个BFC从而…

在介绍了包含块之后,CSS2.1标准中介绍了width属性和height属性,这两个属性在我们的页面布局中也发挥着重要的作用.在盒模型中,width和height包围了一个框的内容区域(content area),是否拥有显式的定义.框的类型.框的布局方式.框与其他框之间的关系以及其他的额外信息都会影响一个框的最终的width和height值,本文首先介绍width属性以及视觉格式化模型中如何决定width值的相关算法. 阅读本文前,应该首先理解CSS包含块的概念,可参考:CSS2.1SPEC:…

前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE10+)(CSS3) 1.1 定义动画 1.2 引用动画 1.3 多个动画 1.4 更多属性 二.过渡(transition)(IE10+)(CSS3) 2.1 定义首尾 2.2 应用过渡 2.3 多个过渡 2.4 更多属性 三.转换(transform)(IE10+,-ms-,-webkit-,-…

结构和层叠 选择器的优先级顺序: style[内联元素]选择器>Id选择器>类选择器 属性选择器>元素选择器>通配器选择器 重要性:@important 有这个标记的属性值,优先级最高 层叠:按选择器的优先顺序和出现的先后顺序排序: 视觉格式 基础知识 正常流: 指文本从左向右,从上向下显示,即传统的文档布局: 块级元素: 在正常流中会在器框之前和之后生成换行,正常流中的块级元素会垂直摆放,通过display:block可生成块级元素 行内元素 块级元素的后代,声明display:…

css包含如此开放.如此强大的一个模型,对于这样一个模型,可以有无数种方法结合应用各种属性,可以得到的效果数不胜数. 基本框 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素中心有一个内容区,这个内容区周围包含可选的内外边距和边框(之所以认为是可选,是因为可以设置为0). 对不同类型的元素格式化时存在着差别.块级元素的处理就不同于行内元素,而浮动元素和定位元素也分别有各自不同的表现. 包含块 每个元素都相当于包含块摆放:可以这么说,包含块就是一个元素的”布局上下文“,css2.1…

主要知识记录: 1.给一个元素指定内容区宽度,如果设置了内边距,边框和外边距,这些因素都会影响CSS的width属性. 2.在水平格式化的7个属性中,width,margin-left,margin-right可以设置成auto.其他不行.…

块级元素 百分数:边框的宽度不能是百分数,只能是长度.基本原则是只使用百分数将无法创建完全灵活的元素布局(即所有属性都可设置). 合并垂直外边距 相邻外边距会沿着竖轴合并.两个外边距中较小的一个会被较大的一个合并…

几个概念 块:block,一个抽象的概念,块与块之间在垂直方向上按照顺序依次堆叠. 行内:inline,一个抽象的概念,行内与行内之间在水平方向上按照顺序依次堆叠(会有换行). 元素:element,指 HTML 元素. 盒子:box,一个抽象的概念,由 CSS 引擎根据文档中的内容所创建,主要用于文档元素的定位.布局和格式化等用途.盒子与元素并不是一一对应的,有时多个元素会合并生成一个盒子,有时一个元素会生成多个盒子(如匿名盒子). 块级元素.块级盒子.块容器盒子.块盒字 一个块级元素至少生成…

表格式化 表布局 table, display:table caption, display: table-caption thead, display: table-header-group tbody, display: table-row-group tr, display: table-row td,td, display:table-cell tfoot, display:table-footer-group col, display:table-column 以行为主 css将其表模…

1.设置css样式的三种方式?         外部样式表,引入一个外部css文件         内部样式表,将css代码放在<head>标签内部         内联样式,将css样式直接定义在html元素内部 2.css有哪些选择器?         id选择器         类选择器         标签选择器         又可以细分为:         派生选择器(包括后代选择器.子元素选择器.相邻兄弟选择器)         伪元素选择器         属性选择器    …

1.css格式化排版 >>字体设计: etc:body{font-family:"Microsoft Yahei";} >>字号,颜色: etc:body{font-size:12px;color:#666} *****注释:#666(灰色) >>粗体 etc:p span{font-weight:bold;} >>斜体 etc:p{font-style:italic;} >>下划线 etc:p a{text-decorati…

引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代,做一一告别. CSS有他难以做到的事情,我们帮他用lottie解决 CSS有他可以做到的事情,我们用我们的头脑帮他解决 本文实现的CSS效果一览 标题吸顶 手写箭头 文字背景 圆形天坑 按钮波澜 动态方形 加载骨架 多行省略 标题吸顶 sticky是一种和relative/fixed类似的定位方式…

——修改placeholder提示的样式: 1.除IE外通用写法 类名或标签名::placeholder {color: red;}2.加兼容前缀写法 css超出一行显示省略号:给定宽度(width:100px).超出隐藏(overflow:hidden).强制在同一行显示(white-space: nowrap).省略号(text-overflow:ellipsis) ——常见字体单位——1.em移动端常用的字体尺寸单位,相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div…

盒模型 CSS盒模型分成W3C标准盒模型和IE模型 W3C标准盒模型(默认):box-sizing: content-box padding和border都会撑开盒子,改变盒子的宽度高度 总宽度:width + 左右border宽度 + 左右padding宽度 + 左右margin宽度 内盒宽度:width + 左右border宽度 + 左右padding宽度 IE盒模型:box-sizing: border-box padding和border都不会撑开盒子,不会改变盒子的宽度,盒子的内容会相…

背景 在20年初时总感觉自己的css 不够用,想把css 相关的东西整理下,去年一整年都比较忙,忙着就到2021了,今天趁着有点时间,先从选择器开始吧. 听说图片可以提升颜值.... 选择器 CSS选择器用于选择你想要的元素的样式.简单划分为简单选择器.组合选择器.伪类选择器. 简单选择器 通配符 标签选择器 类选择器 id选择器 属性选择器 属性选择器还有如下语法: 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性和值…

文档流 文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式布局,文档流可以分为定位流.浮动流.普通流三种 普通流(Normal flow) 在常规流中,盒一个接着一个排列,也就是常说的默认的文档流 在块级格式化上下文里面, 它们竖着排列 在行内格式化上下文里面, 它们横着排列 当position为static或relative,并且float为none时会触发常规流 对于静态定位(static positioning),position: static,盒的位置是常规…

css 看起来比较简单,但是要想做的好也不是那么容易,我们在平时开发中,主要用css 来美化我们的html结构,所有我觉得css 还是挺重要的,这里记录整理一些关于css 的技巧以及容易忘记的知识点. 1.css 问题解决思路 在遇到css问题时,我一般从以下思路来思考 从元素本身的属性出发,组合各种可能: 尝试如果把相关属性设置为负数是否可以解决,如边框重叠问题: 如果第一步没有成功,那么在元素之外(或者之内)套一层元素,再次尝试: 一般问题都能在第二步解决,如果还是没有,那就要求助场外观众了…