发表于： 2019-10-30 18:51:24
1 1011
今日完成
完成任务3
了解定位，布局
传统盒模型布局方式：通过盒模型，使用 display 属性（文档流布局） + position 属性（定位布局） + float属性（浮动布局）。
文档流布局：这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行。
浮动布局：使用 float 属性，使元素脱离文档流，浮动起来。
定位布局：通过 position 属性来进行定位。
position常用属性
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
calc:css3新增，英文单词calculate(计算)的缩写，给元素做计算
例calc(计算长度表达式)
运算规则
- 使用“+”、“-”、“*” 和 “/”四则运算；
- 可以使用百分比、px、em、rem等单位；
- 可以混合使用各种单位进行计算；
- 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
- 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
明天完成
完成任务4
了解表单
问题
图片无法居中？
随着图片的缩放图片明显向右偏移？
收获
text-align: center;无法使图片居中
使用绝对定位：
使用绝对定位后图片可以中但随着图片的缩放图片明显向右偏移
使用cal后完成
返回列表
评论