黑马程序员技术交流社区

标题: 技术心得体会帖 [打印本页]

作者: zhaoqh 时间: 2019-4-19 22:13
标题: 技术心得体会帖
在学习的时候，主要碰到以下三大难点，折腾了很多个日日夜夜，现将已总结好的经验分享一下：
01  块元素、行内元素、行内块元素的区别：
一、块元素 block element
块元素的特性
1. 独霸一行，总是在新行上开始；
2. 宽度缺省是它父级元素的100%，除非设定一个宽度；
3. 高度、行高、外边距、内边距都可以设置；
4. 可以容纳其他内联元素或者其他块元素；
二、行内元素 inline element
行内元素的特性
1. 和其他元素都在一行上，遇到父级元素边界会自动换行；
2. 高、行高以及内外边距都不可以改变；
3. 宽度与内容一样宽，且不可改变；
4. 行内元素只能容纳文本或者其他行内元素；
注意：对于行内元素，需要注意的是：设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效。
三、行内块元素
行内块元素的特性
1. 元素排列在一行；
2. 宽度默认由内容决定；
3. 元素间默认有间距；
4. 支持宽高、外边距、内边距的所有样式的设置；
02 页面布局之定位：
定义：将元素定到某一个位置或者其他元素的上面，位置可以任意更改，完全脱了文档流；
定位的基本构成
定位=定位模式+边偏移（left、right、top、bottom）
定位的精髓：利用更改方向英文来进行位置改变设置；
边偏移
left、right 控制左右的位置
top、bottom 控制上下的位置

定位模式
定位属性：
position 取值不同实现的效果不同
定位的分类
静态定位：position:static;
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
相对定位：position:relative;
相对定位是参照自己原来的位置进行定位的，原来占有的位置不会改变还存在；
参照物：自己；
03  浮动float
让元素脱离文档流，进行页面效果的布局，让多个盒子水平排列一行显示，盒子左右对齐，最早是用来实现文字环绕文字
属性和属性值
属性：float
属性值：none  left  right
float:left；  左浮动
float:right；右浮动
浮动的特点
01 浮：让盒子脱离原来的文档流，漂浮起来；
02漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；
03特：a、浮动之后的盒子的显示模式会更改为行内块元素的特点；
b、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶端对齐；
c、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；
注意：做浮动布局的盒子建议尽量都添加固定的宽高；
左中右布局(重点)
一个父级盒子嵌套三个子级盒子，给父级盒子设置固定的宽高，第一个子级盒子左浮动float:left;，第二个子级盒子左浮动float:left; 第三个子级盒子右浮动float:right;
如果每一个盒子之间有距离我们默认给中间的盒子设置margin:0 想要的值；

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2