《精通CSS与HTML设计模式》读书笔记3——盒模型位置
来源:互联网 发布:视频交友软件聊天 编辑:程序博客网 时间:2024/06/06 11:35
width
1. auto: a) 没有设置left, right, 实现水平包裹
b) 设置left, right, 实现水平拉伸
2. value: 用具体的值做为元素的尺寸. 当可视画面比预想的大或小的时候, 固定宽度的元素可能对用户就不那么友好了.
3. auto: 设置成其父元素的宽度.
height
1. auto: a) 没有设置top, bottom, 实现垂直包裹
b) 设置left, right, 实现水平拉伸
2. value: 用具体的值做为元素的尺寸. 当可视画面比预想的大或小的时候, 固定高度的元素可能对用户就不那么友好了.
3. auto: 设置成其父元素的宽度.
设定尺寸
height和width是针对内边距.
1. 表格: 是个例外, 表格是外边距.
2. 浮动元素:影响文档流
3. 静态状态元素:影响文档流
4. 绝对定位元素: 不影响文档流, 宽度与高度的百分比是相对父元素的.
包裹
1. 被包裹的元素需要把width和height设置成auto.
2. 不能水平包裹静态状块元素.
拉伸
以水平拉伸为例:
1. width:auto把块状元素的宽度拉到与其父元素相同
2. width:auto, left:0, right:0把绝对定位元素的左右两边拉至与其定位最近的父元素对齐.
3. 用width:100%能对表格, 浮动元素或者内联块状元素进行拉伸. 注意不能有外边距(就是margin), 否则会出现溢出父元素的现象.
4. 可应用于内联元素之外的所有元素.
1. auto: a) 没有设置left, right, 实现水平包裹
b) 设置left, right, 实现水平拉伸
2. value: 用具体的值做为元素的尺寸. 当可视画面比预想的大或小的时候, 固定宽度的元素可能对用户就不那么友好了.
3. auto: 设置成其父元素的宽度.
height
1. auto: a) 没有设置top, bottom, 实现垂直包裹
b) 设置left, right, 实现水平拉伸
2. value: 用具体的值做为元素的尺寸. 当可视画面比预想的大或小的时候, 固定高度的元素可能对用户就不那么友好了.
3. auto: 设置成其父元素的宽度.
设定尺寸
height和width是针对内边距.
1. 表格: 是个例外, 表格是外边距.
2. 浮动元素:影响文档流
3. 静态状态元素:影响文档流
4. 绝对定位元素: 不影响文档流, 宽度与高度的百分比是相对父元素的.
包裹
1. 被包裹的元素需要把width和height设置成auto.
2. 不能水平包裹静态状块元素.
拉伸
以水平拉伸为例:
1. width:auto把块状元素的宽度拉到与其父元素相同
2. width:auto, left:0, right:0把绝对定位元素的左右两边拉至与其定位最近的父元素对齐.
3. 用width:100%能对表格, 浮动元素或者内联块状元素进行拉伸. 注意不能有外边距(就是margin), 否则会出现溢出父元素的现象.
4. 可应用于内联元素之外的所有元素.
- 《精通CSS与HTML设计模式》读书笔记3——盒模型位置
- 《精通CSS与HTML设计模式》读书笔记3——盒模型位置
- 《精通CSS与HTML设计模式》读书笔记2——盒模型
- 《精通CSS与HTML设计模式》读书笔记1——CSS选择符与继承
- 《精通CSS与HTML设计模式》学习笔记1
- 《精通CSS与HTML设计模式》学习笔记2
- 精通CSS与HTML设计模式 第三章(CSS选择符与继承)
- 读书笔记--精通CSS高级Web标准解决方案(三)---CSS盒模型、浮动与定位
- CSS设计模式读书笔记
- Head First HTML与CSS读书笔记 (三)A、FROM、TABLE、LIST、盒模型
- 《HTML与CSS网站设计实践之旅》读书笔记
- 【阅读】《Head First HTML 与 CSS》第九章——盒模型
- HTML学习笔记(4)——CSS块级元素与盒模型
- HTML+CSS网页设计与布局从入门到精通摘要
- 学习《HTML+css+div网页设计与布局从入门到精通》小计
- 《精通CSS》读书笔记2
- 精通css(3) 盒模型,定位,浮动
- CSS与HTML设计模式全集(350余种)
- URLDownloadToFile 实现进度条
- C# 中的委托和事件
- 求数组中第K大数
- HashMap 分析
- 顺序栈实现
- 《精通CSS与HTML设计模式》读书笔记3——盒模型位置
- 匈牙利命名法
- 总结:从KeyStore中提取公私钥并实现RSA加密算法
- ActionContext与ServletActionContext
- 匿名内部类 是否可以继承其它类,是否可以实接口
- chapter 7之进程管理
- sms开发
- 第20章 最佳实践 (一)
- java应用运维