《精通CSS与HTML设计模式》读书笔记3——盒模型位置
来源:互联网 发布:房屋设计画图软件 编辑:程序博客网 时间:2024/06/05 08:21
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. 可应用于内联元素之外的所有元素.
0 0
- 《精通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余种)
- 接口测试的两种方法
- 你是码农 还是优秀程序员?
- 第16周项目2-用指针玩字符串(3)字符串长度
- PRId64正确使用来保证跨平台
- 码农之路:我早该做好的5件事
- 《精通CSS与HTML设计模式》读书笔记3——盒模型位置
- HTML 5 存储
- Android系统TARGET_BUILD_VARIANT由eng变为userdebug导致的编译/运行问题
- 静态分析:IDA逆向代码段说明 text、idata、rdata、data
- LeetCode:Maximum Depth of Binary Tree
- ng-if和ng-show、ng-hide区别
- FFPLAY的原理(二)
- lighttpd安装与配置
- PHP是一门高效的网络编程语言