摘要: 浮动 视觉格式化模型,大体上将页面中盒子的排列分为三种方式: 常规流 浮动 定位 应用场景 文字环绕 横向排列 浮动的基本特点 修改float属性值为: left:左浮动,元素靠上靠左 right:右浮动,元素靠上靠右 默认值为none 当一个元素浮动后,元素必定为块盒(更改display属性为bl 阅读全文
posted @ 2025-01-07 18:18 Kyou12138 阅读(9) 评论(0) 推荐(0) 编辑
摘要: 常规流 盒模型:规定单个盒子的规则 视觉格式化模型(布局规则):页面中的多个盒子排列规则 视觉格式化模型,大体上将页面中盒子的排列分为三种方式: 常规流 浮动 定位 常规流布局 常规流、文档流、普通文档流、常规文档流 所有元素,默认情况下,都属于常规流布局 总体规则:块盒独占一行,行盒水平依次排列 阅读全文
posted @ 2025-01-07 16:44 Kyou12138 阅读(3) 评论(0) 推荐(0) 编辑
摘要: 行盒的盒模型 常见的行盒:包含具体内容的元素 span、strong、em、i、img、video、audio 显著特点 盒子沿着内容沿伸 行盒不能设置宽高 调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整。 内边距(填充区) 水平方向有效,垂直方向不会实际占据空间。 边框 水平方向有效, 阅读全文
posted @ 2025-01-07 15:42 Kyou12138 阅读(16) 评论(0) 推荐(0) 编辑
摘要: 盒模型应用 改变宽高范围 默认情况下,width 和 height 设置的是内容盒宽高。 页面重构师:将psd文件(设计稿)制作为静态页面 衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height,则设置的是内容盒 精确计算 CSS3:box-sizing 改变背景覆盖范围 默认情况 阅读全文
posted @ 2025-01-07 14:55 Kyou12138 阅读(10) 评论(0) 推荐(0) 编辑
摘要: 盒模型 box:盒子,每个元素在页面中都会生成一个矩形区域(盒子) 盒子类型: 行盒,display等于inline的元素 块盒,display等于block的元素 行盒在页面中不换行、块盒独占一行 display默认值为inline 浏览器默认样式表设置的块盒:容器元素、h1~h6、p 常见的行盒 阅读全文
posted @ 2025-01-07 14:54 Kyou12138 阅读(15) 评论(0) 推荐(0) 编辑
摘要: 一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行 渲染每个元素的前提条件:该元素的所有CSS属性必须有值 一个元素,从所有属性都没有值,到所有的属性都有值,这个计算过程,叫做属性值计算过程 特殊的两个CSS取值: inherit:手动(强制)继承,将父元素的值取出应用到该元素 initi 阅读全文
posted @ 2025-01-07 14:36 Kyou12138 阅读(8) 评论(0) 推荐(0) 编辑
摘要: 层叠 声明冲突:同一个样式,多次应用到同一个元素 层叠:解决声明冲突的过程,浏览器自动处理(权重计算) 1. 比较重要性 重要性从高到底: 作者样式表:开发者书写的样式 1) 作者样式表中的!important样式 作者样式表中的普通样式 浏览器默认样式表中的样式 2. 比较特殊性 看选择器 总体规 阅读全文
posted @ 2025-01-07 11:49 Kyou12138 阅读(24) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示