网站安全维护内容,站酷网站的比赛网页谁做的,商城网站建设定制,广州市网站建设 合优华子目录 flex布局flex布局原理flex使用三要素 阿里图标#xff08;字体#xff09; flex布局
相关学习网站#xff1a;http://c.biancheng.net/css3/flex.html 1.flex是当前最主流的布局方式#xff1a;用它布局起来更方便#xff0c;取代了浮动的作用。 2.浮动布局有缺… 华子目录 flex布局flex布局原理flex使用三要素 阿里图标字体 flex布局
相关学习网站http://c.biancheng.net/css3/flex.html 1.flex是当前最主流的布局方式用它布局起来更方便取代了浮动的作用。 2.浮动布局有缺陷会脱离文档流可能会导致布局崩塌 注用flex布局的元素成为flex容器它里面的子元素为容器项目或flex项目 父级容器 子级项目
flex布局原理
就是通过两个轴把网页分割成一行行一列列
flex主轴从左往右
flex副轴从上往下flex使用三要素
1.主轴的方向左右水平布局/上下垂直布局
2.主轴的对齐方式
3.副轴的对齐方式flex使用display: flex;flex-wrap: wrap;/*多行显示*/display样式说明设置主轴方向决定左右/上下flex-directionrow;默认属性 行 从左往右column; 列 从上往下row-reverse;行反转从右往左column-reverse;列反转从下往上
设置主轴对齐方式justify-contentflex-start;默认值 按照起点对齐 flex-end; 终点对齐space-around;均分布局space-between;两端对齐center;居中
设置副轴对齐方向align-itemscenter;居中flex-end;靠终点flex-start;靠起点align-content: space-around; 副轴均分布局!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin: 0;padding: 0;}.box{width: 500px;height: 500px;background-color: pink;display: flex; /*设置弹性盒模型*/}.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 100px;height: 100px;background-color: yellow;}.box3{width: 100px;height: 100px;background-color: rgb(28, 8, 8);}/style
/head
bodydiv classboxdiv classbox11/divdiv classbox22/divdiv classbox33/div/div
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin: 0;padding: 0;}.box{width: 500px;height: 500px;background-color: pink;display: flex; /*设置弹性盒模型*//* flex-direction: column; 主轴从上往下 *//* flex-direction: row;主轴从左往右 *//* flex-direction: row-reverse;主轴从右往左 *//* flex-direction: column-reverse;主轴从下往上 *//* justify-content: flex-end;偏向箭头方向 *//* justify-content: flex-start;偏向剑尾方向 *//* justify-content: space-around;均匀分布 *//* justify-content: space-between;两端对齐 *//* align-items: center;副轴居中 *//* align-items: flex-end;偏向副轴箭头方向 *//* align-items: flex-start;偏向副轴剑尾方向 */}.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 100px;height: 100px;background-color: yellow;}.box3{width: 100px;height: 100px;background-color: rgb(28, 8, 8);}/style
/head
bodydiv classboxdiv classbox11/divdiv classbox22/divdiv classbox33/div/div
/body
/html阿里图标字体
原理将小图标定义成为字体通过引入字体来展示这些小图标。因为此时的小图标相当于文字所以支持文字对应的所有样式。字体大小颜色等等 类似于我们的颜表情它不是图片而是特殊字体。
免费将图标以字体的形式加载页面使用步骤1.打开阿里图标官网https://www.iconfont.cn/2.注册登录3.选择需要的图标加入购物车4.下载代码!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlelink relstylesheet href./Ali_icon/download/font_8k7a6w8dx2i/iconfont.css
/head
bodyspan classiconfont icon-huafei/span
/body
/html
