首页 > > 网页制作 > css >

边框详讲---CSS必备的盒子模型知识！

2020-03-07 16:00:32来源：博客园阅读 ()

边框详讲---CSS必备的盒子模型知识！

盒子模型 盒子模型的四个部分：内容区、边框，内边距，外边距；前三者共同决定盒子可见框的大小。边框 为元素设置边框 .box1{ width:100px; height:100px; background-color red; /*设置盒子内容区宽高及颜色。*/ border-width:10px; border-color:yellow; border-style:solid; /*设置边框，三个样式缺一不可，缺了就直接不显示边框。*/ }

border-width 使用border-width可以分别指定四个边框的宽度。指定四个值：按顺时针设置；指定三个值：分别设置给上左右下；指定两个值：分别设置给上下左右；指定一个值：四边全为这个值。 border-width:10px 20px 30px 40px; /*则上边框为10px，右边框为20px，以此类推*。/ //方便起见，此规则自定义为“4321”。　　　　//题外话：如果你也知道3421...hhh border-color 原理同4321有： border-color:red blue green; /*则上边框为红色，左右边框为蓝色，下边框为绿色。*/ border-style 使用border-style来设置边框样式。可选值： none 默认值，没有边框； ? solid 实线； ? dotted 点状； dashed 虚线； double 双线； border-style同4321有： border-style:solid dotted;`` /*上下边框为实线，左右边框为点状。*/ border 边框的简写形式通过它可设置四个边框的样式、宽度、颜色（顺序无要求）。 boeder:red solid 10px; /*这对四个边起作用。*/ border-top border-bottom border-right border-left可单独用来设置四边。 border:red solid 10px; border-top:yellow solid 20px; /*除了上边框为黄色实线20px，其余三边均为红色实线10px*。/ border:red solid 10px; border-top:none; /*常用的去除不要的边的方法。*/ 内边距 内边距指盒子的内容区与盒子边框之间的宽度。内边距会影响可见框的大小；元素的背景会延伸到内边距； ? 即如果给元素添加背景，背景会应用于内容和内边距组成的区域。可通过padding-top padding-bottom padding-right padding-left来单独设置四边之一。 <style type="text/css"> .box1{ width:100px; height:100px; } .box2{ width:100%; /*创建子元素box2来占满父元素box1的内容区， height:100%； *注意：不占内边距*/ } </style> 外边距 外边距指当前盒子与其他盒子之间的距离；不影响可见框的大小，但影响盒子的位置；有四个方向的外边距：margin-top margin-bottom margin-right margin-left ；设置上、左边距时，会改变盒子自身的位置；设置下、右边距时，则会改变其他盒子的位置； margin可设置auto；若只指定左/右外边距的margin为auto， ? 则会将外边距设置为最大值；若垂直方向设置为auto，则外边距默认为0； ? 即垂直方向的盒子会紧挨在一起。常用的使元素自动在父元素中居中的方法： ? 将left和right同时设置为auto。 margin 外边距的简写形式同样符合“4321方向规则” margin: 0 auto; /*将上下外边距设置为0，将左右外边距设置为auto，即这也是居中的写法。*/ 垂直外边距的重叠 在网页中垂直方向的相邻外边距会发生外边距的重叠。外边距的重叠指的是兄弟元素之间的相邻外边距会取最大值。 ? 假设盒1和盒2为垂直方向的相邻兄弟元素， ? a、给盒1设置底面外边距为100px，给盒2设置顶部外边距为100px。 ? 那么两个盒子之间的效果还是100px。 ? b、把盒1设置底面外边距为100px，盒2的顶部外边距设置为200px， ? 那么两个盒子之间的距离就变成了200px(取最大值)。若父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。 ? 即给子元素设置上外边距为100px时，子元素和父元素保持相对位置一起下移100px。解决途径：法一：给父元素设置上边框，把父子隔开；法二：把父元素的内边距设置成 “能使子元素下移到你想要位置 ”的数值。常用去除浏览器默认样式的代码 *{ margin:0; padding:0; } 内联元素的盒模型 内联元素不能设置width和height；能设置水平方向的内边距，也能设置垂直方向的，但垂直方向的内边距不会影响页面的布局（不会挤掉，而是覆盖）；能设置边框，水平、垂直效果同“内边距”；支持水平方向的外边距，不支持垂直方向的。 display 可通过display样式来修改，将一个内联元素转化为块元素。 ? 可选值：inline 将一个元素作为内敛元素显示； ? 　　block 将一个元素作为块元素显示； ? 　　inline-block 将一个元素转化为内联元素，使其既有内联元素的特点又有块元素的特点； ? 　　既可设置宽高，又不会独占一行。【典型：image】 ? 　　none：不显示元素，且元素在页面中也不会继续占有位置。 visibility 通过visibility来设置元素的隐藏和显示的状态。 ? 可选值：visible 默认值，元素默认在页面显示； ? hidden 元素会隐藏，但在页面中继续占有位置（显示空白）。 overflow 父元素默认将溢出内容在父元素外显示。通过overflow可设置父元素如何处理溢出内容。 ? 可选值：visible 默认值不对一处内容处理； ? 　　hidden 溢出内容会被修剪，即不显示； ? 　　 scroll 为父元素添加滚动条，通过滚动条可查看完整内容， ? 　　该属性不管内容个是否溢出，都会添加水平和垂直方向的滚动条；　　auto 会根据需求自动添加滚动条。，　　这些是我在看网课之后手打的笔记，然而学完整套视频之后发现有源码这种东西，枯了；如果你觉得这些知识点对你有一些帮助的话就给我一点回应叭，安慰我一下我这个小菜鸟呲呲。

原文链接:https://www.cnblogs.com/isremya/p/12431957.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有