• 技术文章 >web前端 >css教程

    一起聊聊CSS盒子大小与内外边距及边框的关系

    长期闲置长期闲置2022-08-09 11:17:57转载167
    本篇文章给大家带来了关于css的相关知识,其中给大家介绍了关于盒子大小与内外边距及边框关系的相关问题,css学习三大重点是css盒子模型、浮动、定位,下面一起来看一下,希望对大家有帮助。

    (学习视频分享:css视频教程html视频教程

    3-11 盒子大小与内外边距及边框的关系

    盒子模型(CSS重点)

    css学习三大重点: css 盒子模型 、 浮动 、 定位

    主题思路:
    在这里插入图片描述

    目标:

    2. 盒子模型(Box Model)

    标准盒子模型

    在这里插入图片描述

    3. 盒子边框(border)

    border : border-width || border-style || border-color
    属性作用
    border-width定义边框粗细,单位是px
    border-style边框的样式
    border-color边框颜色

    3.1 边框综合设置

    border : border-width || border-style || border-color

    例如:

     border: 1px solid red;  没有顺序

    3.2 盒子边框写法总结表

    很多情况下,我们不需要指定4个边框,我们是可以单独给4个边框分别指定的。

    上边框下边框左边框右边框
    border-top-style:样式;border-bottom-style:样式;border-left-style:样式;border-right-style:样式;
    border-top-width:宽度;border- bottom-width:宽度;border-left-width:宽度;border-right-width:宽度;
    border-top-color:颜色;border- bottom-color:颜色;border-left-color:颜色;border-right-color:颜色;
    border-top:宽度 样式 颜色;border-bottom:宽度 样式 颜色;border-left:宽度 样式 颜色;border-right:宽度 样式 颜色;

    3.3 表格的细线边框

    <style>
    	table {
    		width: 500px;
    		height: 300px;
    		border: 1px solid red;
    	}
    	td {
    		border: 1px solid red;
    		text-align: center;
    	}
    	table, td {
    		border-collapse: collapse;  /*合并相邻边框*/
    	}</style>

    在这里插入图片描述

    4. 内边距(padding)

    4.1 内边距:

    padding属性用于设置内边距。 是指 边框与内容之间的距离。

    4.2 设置

    属性作用
    padding-left左内边距
    padding-right右内边距
    padding-top上内边距
    padding-bottom下内边距

    当我们给盒子指定padding值之后, 发生了2件事情:

    注意: 后面跟几个数值表示的意思是不一样的。

    我们分开写有点麻烦,我们可以不可以简写呢?

    值的个数表达意思
    1个值padding:上下左右内边距;
    2个值padding: 上下内边距 左右内边距 ;
    3个值padding:上内边距 左右内边距 下内边距;
    4个值padding: 上内边距 右内边距 下内边距 左内边距 ;

    练一练:

    请写出如下内边距:

    1. 要求盒子有一个左边内边距是 5像素
    2. 要求简写的形式写出 一个盒子上下是 25像素 左右是15像素。
    3. 要求简写的形式写出 一个盒子 上内边距是 12像素 下内边距是 0 左内边距是 25像素 右内边距是 10像素

    4.4 内盒尺寸计算(元素实际大小)

    4.5 内边距产生的问题

    练一练

    1. 一个盒子宽度为100, padding为 10, 边框为5像素,问这个盒子实际的宽度的是()
    1. 关于根据下列代码计算 盒子宽高下列说法正确的是()
    div {
    
    		width: 200px;
    
             height: 200px;
    
    		border: 1px solid #000000;
    
    		border-top: 5px solid blue;
    
    		padding: 50px;
    
    		padding-left: 100px;
    
    		}

    w 200 + 150 + 2 = 352

    h 200 + 100 + 6 = 306

    4.6 padding不影响盒子大小情况

    如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。

    5. 外边距(margin)

    5.1 外边距

    margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

    5.2 设置:

    属性作用
    margin-left左外边距
    margin-right右外边距
    margin-top上外边距
    margin-bottom下外边距

    margin值的简写 (复合写法)代表意思 跟 padding 完全相同。

    5.3 块级盒子水平居中

    实际工作中常用这种方式进行网页布局,示例代码如下:

    .header{ width:960px; margin:0 auto;}

    常见的写法,以下下三种都可以。

    5.4 文字居中和盒子居中区别

    text-align: center; /*  文字 行内元素 行内块元素水平居中 */margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */

    5.5 插入图片和背景图片区别

     img {  
    		width: 200px;/* 插入图片更改大小 width 和 height */
    		height: 210px;
    		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
    		margin-left: 50px; /* 插入当图片也是一个盒子 */
    	}
    
     div {
    		width: 400px;
    		height: 400px;
    		border: 1px solid purple;
    		background: #fff url(images/sun.jpg) no-repeat;
    		background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
    	}

    5.6 清除元素的默认内外边距(重要)

    在这里插入图片描述

    为了更灵活方便地控制网页中的元素,制作网页时,我们需要将元素的默认内外边距清除

    代码:

    * {
       padding:0;         /* 清除内边距 */
       margin:0;          /* 清除外边距 */}

    注意:

    5.7 外边距合并

    使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。

    (1). 相邻块元素垂直外边距的合并

    解决方案:尽量给只给一个盒子添加margin值

    (2). 嵌套块元素垂直外边距的合并(塌陷)

    解决方案:

    1. 可以为父元素定义上边框。
    2. 可以为父元素定义上内边距
    3. 可以为父元素添加overflow:hidden。

    还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题,后面咱们再总结。。。

    6. 盒子模型布局稳定性

    我们根据稳定性来分,建议如下:

    按照 优先使用 宽度 (width) 其次 使用内边距(padding) 再次 外边距(margin)。

      width >  padding  >   margin

    去掉列表默认的样式

    无序和有序列表前面默认的列表样式,在不同浏览器显示效果不一样,而且也比较难看,所以,我们一般上来就直接去掉这些列表样式就行了。 代码如下

    li { list-style: none; }

    今日总结

    在这里插入图片描述

    拓展@

    以下我们讲的CSS3部分新属性, 但是我们遵循的原则是,以下内容,不会影响我们页面布局, 只是样式更好看了而已。

    1.圆角边框(CSS3)

    在这里插入图片描述

    border-radius:length;

    在这里插入图片描述

    2. 盒子阴影(CSS3)

    box-shadow:水平阴影 垂直阴影 模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  内/外阴影;

    在这里插入图片描述

    div {
    			width: 200px;
    			height: 200px;
    			border: 10px solid red;
    			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
    			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色  内/外阴影; */
    			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
    			}

    CSS书写规范

    开始就形成良好的书写规范,是你专业的开始。

    空格规范

    【强制】 选择器 与 { 之间必须包含空格。

    示例:

    .selector {}

    【强制】 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。

    示例:

    font-size: 12px;

    选择器规范

    【强制】 并集选择器,每个选择器声明必须独占一行。

    示例:

    /* good */
    .post,
    .page,
    .comment {
        line-height: 1.5;
    }
    
    
    /* bad */
    .post, .page, .comment {
        line-height: 1.5;
    }

    【建议】 一般情况情况下,选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。

    示例:

    /* good */
    #username input {}
    .comment .avatar {}
    
    /* bad */
    .page .header .login  input {}
    .comment div * {}

    属性规范

    【强制】 属性定义必须另起一行。

    示例:

    /* good */.selector {
        margin: 0;
        padding: 0;}/* bad */.selector { margin: 0; padding: 0; }

    【强制】 属性定义后必须以分号结尾。

    示例:

    /* good */.selector {
        margin: 0;}/* bad */.selector {
        margin: 0}

    (学习视频分享:css视频教程html视频教程

    以上就是一起聊聊CSS盒子大小与内外边距及边框的关系的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
    专题推荐:css
    上一篇:div外边距重合问题及解决方法 下一篇:css伪选择器学习之伪类选择器解析
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 通过示例简单了解基础CSS导航栏、CSS下拉菜单• CSS定位属性之固定fixed属性详解• CSS定位属性之相对定位relative属性详解• CSS相对定位和绝对定位的关系解析• css定位详解--相对定位、绝对定位和固定定位
    1/1

    PHP中文网