米东区做网站,软件商店下载电脑版官网,网站超链接用什么,手机必备app排行榜目录 1、CSS的盒子模型1.1 css盒子模型有哪些#xff1a;1.2 css盒子模型的区别1.3 通过css如何转换css盒子模型 1、CSS的盒子模型
1.1 css盒子模型有哪些#xff1a; 标准盒子模型、怪异盒子模型#xff08;IE盒子模型#xff09; 1.2 css盒子模型的区别
标准盒子模型1.2 css盒子模型的区别1.3 通过css如何转换css盒子模型 1、CSS的盒子模型
1.1 css盒子模型有哪些 标准盒子模型、怪异盒子模型IE盒子模型 1.2 css盒子模型的区别
标准盒子模型 标准盒子模型由margin、padding、border、content四部分组成 怪异盒子模型 怪异盒子模型由margin 、content(padding、border)两部分组成在怪异盒子模型中内边距和边框是算在内容区域的。 一般来说我们都会使用怪异盒子模型因为在使用标准盒子模型的时候设置了内边距和边框会把盒子撑大这样我们有得重新计算盒子的大小较为麻烦。
1.3 通过css如何转换css盒子模型 box-sizing: content-box 标准盒子模型默认 box-sizing: border-box 怪异盒子模型 我们只需要给这个元素设置对应的css即可转换成你想要的模型。 我们来看一段代码示例更加深刻的来了解一下他们之间的区别
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleul {list-style: none;}.uls1,.uls2 {display: flex;}.uls1 li{width: 200px;height: 200px;margin: 5px;padding: 50px;border: 5px solid #ccc;}.uls2 li{box-sizing: border-box;width: 200px;height: 200px;margin: 5px;padding: 50px;border: 5px solid #ccc;}/style
/head
bodyul classuls1li1/lili2/lili3/li/ulul classuls2li4/lili5/lili6/li/ul
/body
/html标准盒子模型 我们将每个li的宽高设置为200px、内边距为50px、边框5px此时可看到盒子的宽高已经被内边距和边框撑开了变成了310px * 310px至于为什么显示的是309.33这和浏览器有关。 怪异盒子模型 同样的css属性而设置怪异盒子模型后它的实际宽高还是我们的200px由此可以看出内部距和边框并不会撑大盒子而是当作内容的一部分。
不过还有一种特殊情况我们来看这段代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin:0; padding:0}ul {list-style: none;}.uls {display: flex;}.uls li{box-sizing: border-box;width: 100px;height: 100px;margin: 5px;padding: 50px;border: 5px solid #ccc;}/style
/head
bodyul classulsli/lili/lili/li/ul
/body
/html我们同样是设置的怪异盒子模型宽高各100px内边距50px边框5px按理来说通过怪异盒子模型的原理来计算我们的宽高应该还是100px * 100px 而这里却变成了110px * 110px。 这是为什么呢 主要是因为我们盒子的宽高只有100 * 100 ,内边距已经设置为50px左右上下内边距加起来已经达到了100px而这个时候我们又设置了上下左右5像素的边框内容已经装不下了所有宽/高会自动加上这10像素的宽度/高度。 最后就是我们所看到的110px * 110px。
