css盒模型—逆战班学习总结

王小蝶 發表於 2020-2-23 15:50:00

在css中，可以把元素看成一个盒子，就是盒模型，用盒模型可以控制元素之间的位置关系。
盒模型组成由里到外为：concent（内容）+padding（内边距）+border（边框）+margin（外边距）
border普通写法：border-width（宽度）border-style（线型）border-color（颜色）
            复合写法：border:  (宽度) （线型）（颜色）；  border：1px solid #000;         
padding,margin写法：padding：（像素大小）；  padding：1px；
padding,border,margin都可以设置元素四周的值
如：border-top               上边框，
        border-right             右边框，
        border-bottom        下边框，
        border-left                左边框
padding,border,margin都有简便的四周值写法
如：padding：1px;                              上下左右都为1px         
        padding：1px 2px;                       上下为1px，左右为2px
        padding：1px 2px 3px；             上 1px，左右2px，下3px
        padding：1px 2px 3px 4px；      上1 ，右2，下3，左4 ，从顶部顺时针对应
盒模型有标准盒模型和怪异盒模型之分
标准盒模型元素padding和border在元素定义大小范围外添加
怪异盒模型元素padding和border在元素定义大小范围内添加
                      <span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="5"><img class="cke_widget_element lazyload" alt="" width="183" height="255" src="https://img-blog.csdnimg.cn/20200223124807532.jpg" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20200223124807532.jpg&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;183&quot;,&quot;height&quot;:&quot;255&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20200223124807532.jpg"><img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">                                    <span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="4"><img class="cke_widget_element lazyload" alt="" width="182" height="253" src="https://img-blog.csdnimg.cn/20200223124812938.jpg" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20200223124812938.jpg&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;182&quot;,&quot;height&quot;:&quot;253&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20200223124812938.jpg"><img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">
元素可以通过box-sizing属性来改变盒子类型，
box-sizing: content-box;（标准盒模型） box-sizing: border-box;（怪异盒模型）
padding和margin
margin可以写负值，padding不能写负值
padding用来设置父子（嵌套）元素的位置关系，可以控制多行文本的缩进，插入图片的位置等，就是控制显示内容的位置。标准盒模型在测量元素大小时，可以先测量元素所占大小，有padding时需在测量大小上减去padding值，也能直接测量出元素内容大小，再写上padding值。
margin常在同辈元素简用，调整元素与元素之间的位置。
margin有两个bug: 1.上下相邻元素margin 值会覆盖重合，只显示较大的margin 值    
                                      <span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="3"><img class="cke_widget_element lazyload" alt="" width="352" height="185" src="https://img-blog.csdnimg.cn/20200223143105937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzMjg3MQ==,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20200223143105937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzMjg3MQ==,size_16,color_FFFFFF,t_70&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;352&quot;,&quot;height&quot;:&quot;185&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20200223143105937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzMjg3MQ==,size_16,color_FFFFFF,t_70"><img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">
                                 2.给父元素下的第一个子元素设置margin-top值，margin-top值会设置到父元素上
                                    但有这些属性则不会出现margin-top值设置出错的情况：                                           
                                    父元素或子元素有浮动属性，父元素有边框，父元素有overflow-hidden属性
                                    <span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="2"><img class="cke_widget_element lazyload" alt="" width="500" height="266" src="https://img-blog.csdnimg.cn/20200223142311709.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzMjg3MQ==,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20200223142311709.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzMjg3MQ==,size_16,color_FFFFFF,t_70&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;500&quot;,&quot;height&quot;:&quot;266&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20200223142311709.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzMjg3MQ==,size_16,color_FFFFFF,t_70"><img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">
内联元素盒模型的不正常显示
内联元素盒模型依然显示，但元素上下的盒模型不占位置
                                  <span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="1"><img class="cke_widget_element lazyload" alt="" width="530" height="247" src="https://img-blog.csdnimg.cn/20200223143852323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzMjg3MQ==,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20200223143852323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzMjg3MQ==,size_16,color_FFFFFF,t_70&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;530&quot;,&quot;height&quot;:&quot;247&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20200223143852323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzMjg3MQ==,size_16,color_FFFFFF,t_70"><img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">
可改变元素类型解决：display：block;
学习中关于怪异盒模型的小例子：
 写出搜索框：             <span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="0"><img class="cke_widget_element lazyload" alt="" width="227" height="28" src="https://img-blog.csdnimg.cn/20200223130835332.jpg" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20200223130835332.jpg&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;227&quot;,&quot;height&quot;:&quot;28&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20200223130835332.jpg"><img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">
<input  type="text" />        文本框为标准盒模型             
<input  type="submit" />   提交按钮为怪异盒模型             
想要实现图中效果，需设置：提交按钮高度=文本框高度+边框宽度*2
                                                    提交按钮宽度需要把右边框宽度加在内
<blockquote>
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title></title>         <style type="text/css">         *{margin: 0;padding: 0;}             .insup{                 width: 197px;                 height: 26px;                 background: #f1f1f1;                 border: 1px solid #e5e5e5;                 border-right: none;                 float: left;             }             .insub{                 width: 29px;                 /*width=28+1*/                  height: 28px;                 /*height=26+1*2*/                  background: #f1f1f1;                 border: 1px solid #e5e5e5;                 border-left: none;                 float: left;                 font-size: 0;                 /*background:#f1f1f1 url(img/search.jpg) no-repeat 5px 7px;*/             }         </style>     </head>     <body>         <form>             <input class="insup" type="text" placeholder="SEARCH..." />             <input class="insub" type="submit" />         </form>     </body> </html>

</blockquote> 
来源：https://www.cnblogs.com/xiaoyansama/p/12350093.html

頁: [1]

琼殿技术论坛's Archiver

css盒模型—逆战班学习总结