城乡与住房建设厅网站首页,深圳装修公司报价,设计上海地址,如何推广公众号文章目录
描述
示例#xff1a;
CSS 中的 display
CSS 中的 float
CSS 中的 flex 描述
刚刚学完CSS ,导致浮动#xff08;float#xff09;#xff0c;弹性布局#xff08;display:flex#xff09;好几个字段配置属性已经分不清了。
display float 就同层级别#xf…目录
描述
示例
CSS 中的 display
CSS 中的 float
CSS 中的 flex 描述
刚刚学完CSS ,导致浮动float弹性布局display:flex好几个字段配置属性已经分不清了。
display float 就同层级别都是布局的配置项目。
flex是display一个可选值。
flow 不存在这个值或者配置项。但是由它组成单词倒是有仨 text-overflow: inherit; //文本溢出如何显示
display: flow-root; //开启BFC, 解决塌陷问题
overflow: hidden; //内容溢出时的设置示例 display: flex; //实现弹性盒子 float: right; //靠右浮动 在CSS布局中flex、grid以及float属性的差别是flex属性适用于小的UI元素grid属性适合用于为网站整体进行布局而float属性适合在较大的文本文章中设置图像。 CSS 中的 display display 是CSS一个布局的配置项他可使用值如下 /* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;/* box generation */
display: none;
display: contents;/* multi-keyword syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset; 和 float 都可以使元素在同一行但是也各有缺点。 display元素方向不可能控制 float浮动起来的话会脱离标准文档流所以要解决父级边框塌陷的问题 CSS 中的 float float 是CSS一个针对子元素布局的配置项它可使用的值
right,left,top,bottom不需要配合display使用。不需要对父元素设置/*float浮动是一种传统网页的布局方式通过浮动脱离文档而横向排列None默认不浮动*/ float示例 .box2 {width: 400px;height: 300px;border: 10px solid #eee8d5;}.box3 {width: 290px;height: 100px;background-color: #e0c46c;float: right;/*margin:0 auto;*/}//...
bodydiv classbox2div classbox3/div /div
/div/body CSS 中的 flex
flex呢是display配置项一个可选值实现弹性盒子:
display: flex; /*弹性容器
display: flex; 块级
display:inline-block;行内弹性容器
容器里的所有子元素都自动变成 弹性项
主轴 元素排列方向flex-direction:row自右向右column自上向下row-reverse:自右向左column-reverse:自下向上
侧轴 与主轴垂直方向flex-wap:设置是否自动换行none 不换行wrap 按侧轴换行*/
display: flex; flex 示例
styleul {list-style: none}ul {width: 900px;background-color: #eeeeee;border: 10px solid red;/*弹性盒子*/display: flex;/* 修改容器子元素方向*/flex-flow: row;}li {width: 200px;line-height: 50px;font-size: 30px;color: white;/*弹性盒子控制子元素填充,根据当前主轴长度均匀放大或者缩小*/flex-basis: auto;/*当总长度超出主轴时根据主轴长度进行等比缩小0 不缩小1等比缩小*/flex-shrink: 0;}/style
//...
ulli1/lili2/li
/ul
