发表于： 2019-06-25 22:24:20
1 901
今天完成的事情： 研究了布局和css代码规范，做了一点任务8
明天计划的事情：研究网格、媒体查询、做页面
遇到的问题：还没开始做 没什么问题
收获：官网的文章把所有的布局都讲了一遍，对布局有了一个贯通、以前的css代码写的太不规范了，慢慢改进
知识点补充
height
设置line-height时line-height会自动撑开盒子的height
没有设置height的文字父级盒子height是由line-height撑开的不是由文字撑开
transform
应用于元素的2D或3D转换，设置转换属性可以将元素旋转、缩放、移动、倾斜
常用属性
rotate(10deg)：旋转10度
skew(10deg)：倾斜10度，可以设置x、y轴（skewx、skewy）
scale（1.0）：放大一倍，必须有一位小数，缩小用负值
translate（120px 100px）：向右移动120px，向下移动100px，需要反向用负值
待完成的事
HTML和CSS实现常见的布局
代码规范
记最少五个单词
今日计划
布局
单列布局
水平布局
1.inline-block和text-align实现
父级{ text-align:center;}
子级{display:inline-block;}子级只是文字没有宽高可以不用设置
2.margin:0 auto实现
自身{ margin:0 auto;width:100px}必须指定宽度
3.position:absolute实现
父级{position:relative;top:0;left:0;}
子级{position:absolute;left:50%;transfrom:translate(-50%,0)}太麻烦
4.flex布局实现
父级{display:flex; justify-content:center;}大面积使用影响效率
垂直居中
1.veritcal-align
父级{line-height:300px;} 子级{display:inline-block;veritcal-align:middle;}
父级{display:table-cell;veritcal-align:middle;}子级{displa:inline-block;}
2.绝对定位
3.flex
水平垂直居中
1.veritcal-align,text-align,inline-block
父级{display:table-cell;veritcal-align:middle;text-align:center;} 子级{display:inline-block;}
2.绝对居中
3.flex
多列布局
一列定宽，另一列列自适应
1.float+margin（fix）
left{width:200px;float:left;}
right-fix{width:100%;margin-left:-200px;float:right;} right{margin-left:200px; }
2.flex(可做不定宽)
父级{display;flex;} 子级left{width:200px;} 子级right{flex:1}
多列等分布局
1.float
父级{margin-left:-30px}作用：假设列之间的间距为30px，这个是为了减去第一个盒子的padding-left
子级{float:left;width:25%;padding-left:30px;box-sizing:border-box;}
flex
父级{display:flex;}
子级{flex:1;} 子级+子级{margin-left:30px;}(相邻选择器)
全局布局
flex
父级{ display:flex; flex-direction:column;}
页眉{height:固定高度}
内容{flex:1;display:flex;}左右整体高度随着左右任意一边高度变化而变化
左{width:固定宽度}
右{flex:1;overflow:auto;}内容超出高度出现滚动窗
页脚{height:固定高度}
代码规范
记最少五个单词
top
right
bottom
left
floa
嗯，今天有点水
返回列表
评论