发表于： 2019-11-14 21:44:37
1 938
一、今天完成的事情
什么是盒子模型
所有html元素可以看做盒子，“box model”这一术语是用来设计和布局时使用的。css盒模型本质上是一个盒子，封装周围的html元素，它包括：边距、边界、填充，和实际内容。盒模型允许我们在其他元素和周围元素之间的空间放置元素。下面的图片说明了盒子模型：
.png)
详解，见之前日报。
outline 轮廓：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
可以指定元素的样式，颜色，和宽度。
.png)
所有css轮廓属性：
.png)
3、什么是css样式，css样式的用法，css样式的代码规范
css样式
css是指的层叠样式表
样式定义如何显示html文件
样式通常存储在样式表中
外部样式可以极大的提高工作效率
外部样式表通常存储在css文件中
多个样式定义可层叠为一
在使用的时候，可以直接将css文件拖到代码编辑器的html文件之中。之后单独在css文件中写样式，然后在html文件中用class引入样式。
css文件样式的命名要有命名规范，见之前日报。而且在写的时候，各属性之间也要有写作顺序。见代码规范。
书写顺序，按照12345的顺序写：
（1）定位顺序：position、display、float、left 、top、right、bottom、overflow、clear、z-index
（2）自身属性：width、height、padding、border、margin、background
（3）文字样式：font-family、 font-size、font-style、font-weight、font-varient、color
（4）文本属性：text-align、vertical-align、text-wrap、text-transform、text-indent、text-decoration、letter-spacing、Word-spacing、white-space、text-overflow
（5）css3中新增属性：content、box-shadow、border-radius、transform
4、position绝对定位
position属性指定了元素的定位类型：
position属性的五个值：
static
relative
fixed
absolute
sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们有不同的工作方式，这取决于他们的定位方法。、
static 定位：
html元素的默认值，既没有定位，遵循正常的文档流对象
静态定位的元素不会受到top、bottom、left、right影响
fixed 定位：
元素的位置相对于浏览器窗口是固定位置
即使窗口是滚动的他也不会移动。
相当于是浮在页面上层的，不会随着窗口的滚动条滑动而移动。
注意：fixed定位在ie7和IE8下需要描述！doctype才能支持。
fixed定位使元素的位置和文档流无关，因此不占据空间。
fixed定位的元素和其他元素重叠。
relative 定位：
相对定位元素的定位是相对其正常位置。
h2.pos_top { position:relative; top:-50px; }
absolute 定位：
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的元素，那么他的位置相对于<html>
absolute定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠，与fixed类似 但是不一样
sticky 定位
sticky的英文字面意思是粘，粘贴，所以可以把它称为粘性定位
position：sticky ； 基于用户的滚动位置来定位
粘性定位的元素是依赖于用户的滚动，在position：relative与position：fixed定位之间切换。
他的行为就像position：relative；而当页面滚动超出目标区域时，他的表现就像position：fixed；他会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是top ,left、bottom、right或之一，换言之，指定top，left、right、bottom或四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意： Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
二、遇到的困难
暂时没有
三。明天要做的事情
栅格布局
四、收获
总结了之前任务的总结，还有深度思考的部分内容，使理解更深入
返回列表
评论