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

    CSS标准盒模型与浮动的使用总结

    长期闲置长期闲置2022-08-03 10:17:08转载138
    本篇文章给大家带来了关于css的相关知识,其中主要介绍了关于盒子模型与浮动的相关问题,网页布局的本质在于通过css布局将盒子模型摆放至合适的位置,再放入所需元素,下面一起来看一下,希望对大家有帮助。

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

    盒子模型

    网页布局的本质在于通过css布局将盒子模型摆放至合适的位置,再放入所需元素

    1. 盒子模型(Box Model)

    盒子模型有元素内容,内边距,外边距,边框组成

    标准盒子模型
    在这里插入图片描述

    2. 盒子边框(border)

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

    边框样式

    单独设置一边边框的样式

     border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;

    bottom,left,right以此类推

    表格边框

    通过cellspacing=0单元格距离为0,但是两个单元格之间的边框重叠会是边框变粗,通过css属性

    table{border-collapse:collapse}

    使得边框合并,不变粗

    圆角边框

    border-radius:length;/*length 可以数字也可以百分比*/

    正方形盒子变为圆形,矩形多用高度一半

    3. 内边距(padding)

    边框与内容之间的间距
    在这里插入图片描述

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

    也可以简写

    值个数含义
    1padding:上下左右内边距
    2padding:上下 左右
    3padding:上 左右 下
    4padding:上 右 下 左(顺时针)

    内盒尺寸计算

    当未直接给出width时,padding不会撑开盒子,否则会

    4. 外边距(margin)

    外边距是控制盒子与盒子之间的距离

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

    块级盒子水平居中

    盒子必须指定宽度,然后左右外边距设置为auto

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

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

    文字居中与盒子居中的区别

    插入图片与背景图片区别

    清楚元素内外边距

    * {
    	padding:0;
    	margin:0;
    }

    外边距合并

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

    嵌套块元素垂直外边距的合并

    对于父子块元素,父元素会与子元素合并,父元素没有上padding和边框,合并时外边距取较大值
    在这里插入图片描述

    解决方案:

    区分出父子元素

    盒子布局稳定性

    width>padding>margin

    稳定性依次减小,padding会撑开盒子,margin在合并时也会有问题

    5.盒子阴影

    box-shadow:水平阴影 垂直阴影 模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  内/外阴影;/*单位px*/
    描述
    h-shadow必需,水平阴影,负值在左边
    v-shadow必需,垂直阴影,负值在下
    blur可选,模糊距离
    spread可选,阴影尺寸
    color可选,阴影颜色
    inset可选,内阴影

    注意

    水平垂直阴影必须,其余可以省略,外阴影(outset)默认不写

    p {
    	box-shadow:0 15px 20px rgba(0,0,0,.5)
    }

    浮动

    1. 浮动是什么

    css布局的三种机制

    1. 普通

    2. 浮动

    使得盒子浮动起来。让多个块级盒子一行展示

    3. 定位

    将盒子定位于浏览器中的某一位置

    2. 浮动使用

    通过浮动可以使得多个p水平排列一行,且之间没有空白缝隙,实现左右对齐,最早使用于图片,实现文字环绕效果

    选择器 {float: 值;}
    属性值描述
    none不浮动(默认)
    left元素向左浮动
    right元素向右浮动

    注意

    浮动托标使用浮动后,元素会脱离标准流,后续的标准流会移动至浮动盒子底下,浮动元素会“漂浮”

    在这里插入图片描述

    浮动会改变 元素display属性,任何元素都可以浮动,浮动元素相互紧靠,父级宽度装不下时,多出盒子调至下一行

    浮动与标准流搭配

    给浮动元素添加一个标准流父亲,在子元素使用浮动,从而较少对其他标准流的影响

    3. 浮动与其他盒子关系

    子盒子会与父盒子对齐,但不会与边框重叠,也不会超过父盒子的内边距

    浮动元素只会影响当前以及后面的标准流盒子

    如果一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动。防止引起问题

    4.清除浮动

    很多子元素浮动后,父元素很难直接给出高度,最后父级盒子高度为0,对于以后的标准流盒子会有影响,对于标准流,子盒子会撑开盒子,而浮动不会。

    清除就是为了消除浮动布局对于后续排版影响,主要是解决父元素高度为0的问题

    选择器 {clear: 属性值;}
    属性值描述
    left不允许左侧有浮动元素(消除左侧浮动影响)
    right不允许右侧有浮动元素(消除右侧浮动影响)
    both同时清除左右浮动元素

    额外标签法

    是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <p style=”clear:both”></p>,或则其他标签br等亦可。

    父级添加overflow属性

    overflow : hidden|auto|scroll

    缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

    使用after为元素清除浮动

    :after方式是额外标签升级方式

    .clearfix:after{ 
    	content:""; display:block;height: 0;clear:both; visibility: hidden;
    }
    
    .clearfix {*zoom: 1;}

    双伪元素

    .clearfix:before,.clearfix:after { 
      content:"";
      display:table; 
    }
    .clearfix:after {
     clear:both;
    }
    .clearfix {
      *zoom:1;
    }

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

    以上就是CSS标准盒模型与浮动的使用总结的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
    专题推荐:css
    上一篇:CSS利用float属性控制div左右浮动详解 下一篇:CSS中什么是层级选择器?怎么用?
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3中什么是bfc• CSS宽度、高度属性详解• 通过示例简单了解基础CSS导航栏、CSS下拉菜单• CSS定位属性之固定fixed属性详解• CSS定位属性之相对定位relative属性详解
    1/1

    PHP中文网