发表于： 2019-11-18 21:10:14
1 839
今天完成的事情：
不浮动 默认占一行
浮动 元素脱离文档流 此时如果向左浮动 由于脱离文档流下方元素会占之前元素的位置，会被浮动元素压在下面
向右浮动不会占据原本的位置
如果是内联块 即使浮动脱离文档流 也不会被覆盖
浮动元素高度不同，向下移动时可能被其它浮动元素卡住
浮动实现文字围绕图片 让图片浮动
俩个元素都浮动 宽度相加 大于容器宽度 会掉下来
小于容器宽度无事
如果一个元素要浮动，它的祖先元素一定要有高度。
有高度的盒子，才能关住浮动。
怎么去除内联块的间隙
font-sizi：0；
不换行 都写在一行上
开头的闭合标签省略 最后一个闭合标签写上
浮动
利用html的注释<!-- --!>
外边距的负值可以实现
css哪些属性可以继承
a标签字体颜色 / h1~h6字体大小不可以继承
内联元素 文本缩进可以继承 （水平对齐 text-aligh不可以继承）
块级元素 文本缩进可以继承 （水平对齐 text-aligh不可以继承）
无属性继承
文本属性 vertical-aligh
文字修饰 text-decoration
文字阴影 text-shadow
处理空白区 white-space
文本排列方向 unicode-bidi
盒模型：宽 高 内外边距 边框
背景属性 背景图片、颜色、位置
定位属性：浮动、清除浮动、定位position
————————————————————————
对雪碧图重新进行理解，复制代码，对比，调整，查看变化，解决了之前对雪碧图的盲区
span { width: 30px; 放置雪碧图容器的宽度
height: 30px; 放置雪碧图容器的高度
display: inline-block; 内联元素无法设置宽和高，转为内联块
background-image: url(./img/dd.png); 雪碧图导入
background-repeat: no-repeat; 不重复
}
.icon1 {
background-position: 0 0; 对雪碧图进行定位
}
理解之后发现并没有想象的那么难，不能只看不操作，多运用，就好了
——————————————————————————
清除浮动
在想要清除浮动的元素后面加上空标签
.这个类名随意 { clera：both；}
<div class=" 这个类名随意"></div> 这个办法少用
给父元素使用overflow: hidden; 父元素的高度可以撑起来了 谁影响布局清除谁
给父元素加伪类 父元素有高度了 这个较常用
.s:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
给父元素加双伪类清除浮动
.s:before,.s::after {
content: "";
display: table;
}
.s::after {
clear: both;
}
测试菜鸟官网的 push 和 pull 属性在bootstrap 4.0以上版本 无效了 会出现bug 列偏移也无效了
————————————————————————————
对于任务八的第一个页面，有了一定方向 ，上半部分大体完成了， 细节的地方还需要整改，现在只是有外型
下半部分也有点方向 不是特迷糊了
这个问题有空隙导致无法居中 网上找到
text-align:justify;
添加就解决了
最后一小格再想办法实现边距的问题 响应式运用还不是很灵活，要多练习
明天计划的事情：
第一个页面结构完成，还有时间就整改细节
遇到的问题：
一些细节问题还没解决，整体结构完成再整改吧
收获：
对任务有方向了
返回列表
评论