网站框架图怎么做,免费商城系统源码,做企业官网多少钱,在线评审wordpress1.标准的CSS的盒子模型#xff1f;与低版本IE的盒子模型有什么不同的#xff1f;
标准盒子模型box-sizing: border-box; 宽度内容的宽度#xff08;content#xff09; border padding margin 低版本IE盒子模型#xff1a;宽度内容宽度#xff08;contentborderpaddin… 1.标准的CSS的盒子模型与低版本IE的盒子模型有什么不同的
标准盒子模型box-sizing: border-box; 宽度内容的宽度content border padding margin 低版本IE盒子模型宽度内容宽度contentborderpadding margin
通过属性box-sizing进行区分标准盒模型box-sizing为默认值content-box; 低版本IE盒子模型box-sizing:border-box
2.IE盒模型——实际运用场景
如以下整个区域分为外面的边框和绿色框的商品展示区。外面的边框区域宽高固定。如果想要让绿色框的商品展示区随着外面的边框的宽高自适应就可以设置父级容器box-sizing: border-box子级设置width和height为100%即可。这个是外部宽高固定的情况下
如果宽高不固定就可以使用标准盒模型 3.flex布局
布局的传统解决方案基于盒状模型依赖 display属性 position属性 float属性。它对于那些特殊布局非常不方便比如垂直居中就不容易实现。
3.1思考有三个div在不适用flex布局的前提下想让其横向布局怎么实现
使用浮动float; ——float:left 全部向左浮动display改为行内块级元素; —— 三个子元素中使用display: inline-block定位
3.2 flex-wrap指定 flex 元素单行显示还是多行显示。
nowrap默认不换行如果子元素宽度超过父容器宽度会压缩子元素宽度wrap换行第一行在上方 。wrap-reverse换行第一行在下方
3.3不使用display:flex情况下怎么让几个div横向居中
横向子元素中display:inline-block或者float浮动或者定位
横向居中父级元素中使用text-align:center
注意定位一般能不用就不用因为定位布局会脱离文档流
4.重点如何让一个盒子水平垂直居中
行内块级水平垂直居中方案子元素使用display: inline-blockvertical-align: middle; 父元素使用text-align: center; line-height: 元素高度通过定位实现水平垂直居中 分为知道子元素宽高和不知道子元素宽高两种情况父相子绝定位margin/transform使用flex布局
4.1 块级行内水平居中
子元素使用display: inline-blockvertical-align: middle; 父元素使用text-align: center; line-height: 元素高度
注意ertical-align: middle必须设置在子元素中
style.parent {width: 400px;height: 400px;background-color: gray;margin: 0 auto;line-height: 400px;text-align: center;}.child {width: 200px;height: 200px;background-color: aqua;display: inline-block;/* 注意垂直居中设置在子元素中 */ vertical-align: middle;}/style
/head
bodydiv classparentdiv classchild/div/div
/body
4.2通过定位实现水平垂直居中分为知道子元素宽高和不知道子元素宽高两种情况
知道宽高情况下父元素相对定位子元素绝对定位left:50%和top:50%; margin-top:负子元素高度一半margin-top:负子元素宽度一半
不知道宽高时使用transform。父元素相对定位子元素绝对定位left:50%和top:50%; transform: translate(-50%,-50%)
style.parent {width: 400px;height: 400px;background-color: gray;margin: 0 auto;position: relative;}.child {width: 200px;height: 200px;background-color: aqua;position: absolute;top:50%;left: 50%;/* transform: translate(-50%,-50%); */margin-top: -100px;margin-left: -100px;}/style
/headbodydiv classparentdiv classchild/div/div
/body
4.3使用flex布局 5.用纯CSS创建一个三角形的原理是什么宽高设置为0其中边框宽度设置为宽度宽边框任意三边颜色设置为透明transparent
/*加一个四色的正方形*/
width: 100px;
height: 100px;
border-top: 1px solid purple;
border-left: 1px solid orange;
border-right: 1px solid blue;
border-bottom: 1px solid #ff0000;
/*四个三角形*/width: 0;height: 0;border-top: 100px solid purple;border-left: 100px solid orange;border-right: 100px solid blue;border-bottom: 100px solid #ff0000;/*元素宽度和高度设置为0设置一个边框为元素宽度一样给其他三边边框颜色设置为透明属性transparent就能形成三角形*/width: 0;height: 0;border-top: 100px solid transparent;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 100px solid #ff0000;
