CSS阶段四：border，outline，padding，margin，resize

盒子模型

CSS中将每一个元素都设置为了一个矩形的盒子,是为了方便页面的布局。（一切皆为框）

基本构成：内容区，内边距，边框，外边距

布局特点

pc端：会为网页设置一个默认宽度，倾向像素单位（px）

移动端：基于视口作为网页宽度，更倾向使用相对单位（% , rem，vh, wh 等）

border

指定了四个值：四个值会分别设置给 上 右 下 左，按照顺时针的方向设置

指定三个值：三个值会分别设置给 上 左右 下

指定两个值：两个值会分别设置给 上下 左右

指定一个值：四边全都是该值

border-width

边框宽度

border-color

边框颜色，
transparent透明边框

border-style

设置边框的样式

可选值：

  • none默认值，没有边框
  • solid 实线
  • dotted 点状边框
  • dashed 虚线
  • double 双线

border

边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色,而且没有任何的顺序要求

border-top/border-right /border-bottom /border-left

可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

border-spacing

在table中设置单元格间距

table{
width: 500px;
margin: 0 auto;
/设置边框/
/border: 1px black solid;/

            /*
                border-spacing可以用来设置表格边框之间的距离
             * */
            /*border-spacing: 100px;*/
            
            /*
                border-collapse可以用来设置表格的边框合并
                当设置border-collapse以后border-spacing自动失效
             * */
            border-collapse: collapse;
        }

border-collapse

当设置border-collapse以后border-spacing自动失效

在table中设置单元格合并

border-image

使用图片边框，必须为元素设置边框宽度和样式

使用图片作为元素的边框。浏览器支持较好，但商业网站应用很少，主要用在个人博客中。

border-image-source

border-image-source: url("img/border.png");

border-image-slice

图像边界向内偏移

此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理），除非填写关键字。如果省略第四个数字/百分比，它和第二个相同的。如果也省略了第三个，它和第一个是相同的。如果也省略了第二个，它和第一个是相同的。

切割图片的顺序 上，右，下，左，数字表示基于图片边框的切割位置

  • fill 默认四个角填充这个图片

  • n 设置图片切割数值，然后把切割好的图片设置给每个边角

    • 当上切割和下切割有重叠或者是错位只会显示上下边框的边框图片（左右切割线同理）

    • 当上下或者是左右切割线没有重叠或者错位是 每个边都或有图边框图片

  • 百分比

    border-image-slice: 52 26 26 26;
    border-image-slice: fill;
    border-image-slice: 26;

border-image-repeat

参数：

  • stretch默认值,四个边个图片被拉伸
  • round填满,四个边的图片重复平铺 ，确保图片完整性。
  • repeat重复,四个边的图片重复平铺

border-image-width

设置图片边框的宽度 --- 不会改变元素大小

与border-width设置效果相同，但是不会导致元素的实际大小改变。（会往里面挤内容区）
border-image-width: 20px;

border-image-outset

向元素外显示图片边框

图片外边框的位置，只能为整数，位移不会改变盒子的大小。

border-image-outset: 50px 30px;

border-image

简写

简写方式：

border-image: <border-image-source>
                ||<border-image-slice> [/<border-image-width> 
                || <border-image-repeat>]

border-radius

设置边框圆角效果。浏览器支持较好，应用非常广泛。

参数：

  • n 设置固定数值

  • 设置百分比，推荐使用，可以随着元素大小动态调整

    border-radius: 50px;
    border-radius: 50px 20px;
    border-radius: 50px 20px 5px;
    border-radius: 50px 20px 5px 80px;

    /border-radius: 水平半径 / 垂直半径/
    border-radius: 200px/100px;
    border-radius: 200px 50px/ 100px 5px;
    border-radius: 200px 50px 10px / 100px 5px 60px;

    border-radius: 50%， 如果元素是正方形，显示圆形

box-shadow

让元素显示阴影效果。应用非常广泛，主要用来呈现元素立体效果。

内阴影可以用来实现一些立体效果

参数：

  • 参数1：投影方式 。默认外阴影，inset是内阴影。

  • 参数2：X轴偏移量 ，正值，阴影在元素右侧，负值在元素左侧

  • 参数3：Y轴偏移量 ，正值，阴影在元素底部，负值在元素顶部。

  • 参数4：阴影模糊半径，可选。只能为正值，如果设置为0，阴影不具备模糊效果。

  • 参数5：阴影扩展半径。可选。如果取正值，整个阴影都延展扩大，反之取负值，则整个阴影都缩小。

  • 参数6：阴影颜色，可选

      box-shadow: inset -30px -30px 100px 0 #000;

  可给高度为0的盒子设置一个单纯的阴影效果。
  height: 0px;
  box-shadow: 0 0 20px 1px #333;

解决IE低版本兼容性问题

border-radius：圆角

box-shadow：阴影
border-image：图片边框

引入外部文件

第一步：下载PIE.js项目压缩文档

第二步：解压缩文件。把PIE引入

<!--[if lte IE 8]>
<script type="text/javascript" src="../PIE/PIE_IE678.js"></script>
<![endif]-->

<!--[if IE 9]>
<script type="text/javascript" src="../PIE/PIE_IE9.js"></script>
<![endif]-->


<style type="text/css">
    .box {

        box-shadow: 0 0 50px 0 red;
        /*引入htc文件，让IE678支持圆角特性*/
        behavior: url("plugin/PIE.htc");
    }
    
</style>

第三步：编写CSS3样式

第四步：behavior: url(path/to/pie_files/PIE.htc);

第五步：在IE下查看

outline

元素轮廓

外轮廓不会改变元素盒子大小

语法 [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

outline-color

外轮廓颜色

outline-style

外轮廓样式

可选值：

  • none 默认。定义无轮廓。
  • dotted 定义点状的轮廓。
  • dashed 定义虚线轮廓。
  • solid 定义实线轮廓。
  • double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
  • groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
  • ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
  • inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
  • outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
  • inherit 规定应该从父元素继承轮廓样式的设置。

outline-width

外轮廓宽度

outline-offset:

外轮廓偏移量，不会导致盒子大小改变。

resize

设置用户可调整盒子大小属性

注意事项：resize 必须搭配 overflow: auto;

可选参数：

  • none 用户不能调整元素宽高。
  • both 用户可以调整元素宽高。
  • horizontal 用户只能调整元素宽度
  • vertical 用户只能调整元素高度
  • inherit 默认继承

padding

内边距

margin

外边距

  • margin还可以设置为auto，auto一般只设置给水平方向的margin
  • 水平方向外边距如果设置为auto，则外边距设置为最大值
  • 垂直方向外边距如果设置为auto，则外边距默认就是0

垂直外边距重叠

  • 在网页中相邻的垂直方向的外边距会发生外边距的重叠
  • 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
  • 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

设置负外边距

使用负外边会产生一个元素“悬浮”在另一个元素上面的效果。
注意：被覆盖的元素文本内容不会被覆盖！

使用场景：左侧自适应，右侧固定宽度布局效果为浮动元素（.box）设置右侧外边距为负右侧外边距绝对值等于紧邻兄弟元素的宽度为紧邻兄弟元素设置左浮动

计算函数

width: calc(200px - 1px);
width: calc(200px + 100px);
width: calc(200px / 2);

内联元素盒子模型

  • padding支持水平方向的内边距，垂直也支持但是垂直内边距不影响布局

  • border支持四个方向边框，但是垂直边框不影响布局

  • margin支持水平，不支持垂直放方向

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,641评论 0赞 6
  • CSS要点记录
    CSS要点记录 CSS 指层叠样式表 (Cascading Style Sheets) 多种样式时的优先级问题 数...
    Tony__Hu阅读 1,194评论 0赞 0
  • CSS1
    第一章 F12: element.style 内联样式（可以直接在上面写代码进行简单调试） user agent...
    fastwe阅读 1,562评论 0赞 0
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,346评论 0赞 11
  • 关于CSS
    学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,101评论 0赞 1