前端css基础知识(3)
来源:互联网 发布:长得太漂亮的体验知乎 编辑:程序博客网 时间:2024/06/05 15:48
1 行高
◆浏览器默认文字大小
浏览器默认文字大小:16px
行高:是基线与基线之间的距离
行高=文字高度+上下边距
一行文字行高和父元素高度一致的时候,垂直居中显示。
1.1 行高的单位
行高单位
文字大小
值
20px
20px
20px
2em
20px
40px
150%
20px
30px
2
20px
40px
总结:单位除了像素以为,行高都是与文字大小乘积。
行高单位
父元素文字大小
子元素文字大小
行高
40px
20px
30px
40px
2em
20px
30px
40px
150%
20px
30px
30px
2
20px
30px
60px
总结:不带单位时,行高是和子元素文字大小相乘,em和%的行高是和父元素文字大小相乘。行高以像素为单位,就是定义的行高值。
◆推荐行高使用像素为单位。
2 盒子模型
2.1 边框 border
Border-top-style: solid 实线
dotted 点线
dashed 虚线
Border-top-color 边框颜色
Border-top-width 边框粗细
◆边框属性的连写
特点:没有顺序要求,线型为必写项。
◆四个边框值相同的写法
特点:没有顺序要求,线型为必写项。
2.2 边框合并 border-collapse:collapse;
2.3 获取焦点
label for id 获取光标焦点
2.4 内边距
Padding-left | right | top | bottom
◆padding连写
Padding: 20px; 上右下左内边距都是20px
Padding: 20px 30px; 上下20px 左右30px
Padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
Padding: 20px 30px 40px 50px; 上20px右30px 下40px 左 50px
◆内边距撑大盒子的问题
影响盒子宽度的因素
内边距影响盒子的宽度
边框影响盒子的宽度
盒子的宽度=定义的宽度+边框宽度+左右内边距
◆继承的盒子一般不会被撑大
包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距,一般不会撑大盒子。
2.5 外边距
margin-left | right | top | bottom
◆外边距连写
Margin: 20px; 上下左右外边距20PX
Margin: 20px 30px; 上下20px 左右30px
Margin: 20px 30px 40px; 上20px 左右30px 下 40px
Margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
◆垂直方向外边距合并
两个盒子垂直一个设置上外边距,一个设置下外边距,取的设置较大的值。
◆嵌套的盒子外边距塌陷
解决方法: 1 给父盒子设置边框
2给父盒子overflow:hidden; bfc 格式化上下文
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
3 Fireworks的基本使用
新建文件 ctrl+n
打开文件 ctrl+o
调出和隐藏标尺 ctrl+r
清除辅助线: 视图---辅助线----清除辅助线
放大镜 z 放大镜状态下alt+鼠标左键 缩小
抓手 快捷键 空格
测量距离 ★先拉出2根辅助线
★切换到指针工具
★将光标放到2根辅助线之间,按住shift键
- 前端css基础知识(3)
- 前端-CSS基础知识(一)
- 前端-CSS基础知识(二)
- 前端css基础知识(2)
- 前端css基础知识(4)
- 前端css基础知识(5)
- 前端学习之CSS基础知识(2)
- CSS样式基础知识(前端基础篇)
- 前端基础知识之CSS初识
- 谷哥的小弟学前端(05)——CSS基础知识(3)
- web前端基础知识(三)——CSS编码规范
- 前端学习之路css(04)-基础知识
- 前端学习之路css(05)-基础知识
- 前端学习之路css(06)-基础知识
- 前端基础知识(一)
- 谷哥的小弟学前端(03)——CSS基础知识(1)
- 谷哥的小弟学前端(04)——CSS基础知识(2)
- 谷哥的小弟学前端(06)——CSS基础知识(4)
- 144. Binary Tree Preorder Traversal
- 【一】地图 Leaflet 起步
- PHP判断点是否在多边形区域内外
- Tomcat多域名配置
- Java 时间换算
- 前端css基础知识(3)
- 简练网软考知识点整理-项目风险审计及风险评估
- Linux下解压zip分卷文件
- 运维shell实例
- Android开发命名规范
- 实践mysql主从复制
- linux,scp传输文件用expect工具免密码输入shell脚本
- 145. Binary Tree Postorder Traversal
- 双向循环链表基本操作