CSS3盒子模型

盒子模型1:
盒子模型剖析及浮动与定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
</head>
<style>
        /* 边框属于盒子边缘,边框大小会影响盒子大小
       设置边框至少设置三个样式:边框高度(border-width)颜色(border-color)样式(border-style)
            45讲 */
    .box1{
        width: 100px;
        height: 100px;
        background-color: aqua;
        border-width: 20px;
            /* 有默认值,一般是三个像素,可以用来指定四个方向的宽度,
                写四个值时(10px 20px 30px 40px)上 右 下 左 
                三个值:上 左右 下
                两个值:上下 左右
                一个值:上下左右
               除了border-width还有一组 border-xxx-width
                xxx:(left;top;bottm;right)下面两个同理*/

        border-color: aqua;
            /* 指定边框颜色,语法和border-with一样
               没有border-color时默认为color的颜色 */

        border-style: solid;
            /* 指定边框样式,默认值是none 表示没有边框
                solid 表示实线
                dotted 点状实线
                dashed 虚线
                double 双线 */

        border:30px solid red;
        /* 简写属性:可以同时设置边框所有相关样式,无顺序要求,需要用空格隔开
            同样有 border-xxx 语法 
              46讲*/
        padding:100px;
        /* 内边距(padding):也有padding-xxx 语法,会影响盒子大小,背景颜色会延伸到内边距上
            同时设置四个内边距时,语法和 border-width 一样
              47讲 */
        margin: 100px;
        /* mairgin-x(top、left、right、bottm)外边距,可以下右外边距影响其它元素位置,可以为负值
                48讲 */
        margin-right: 200px;
        /* 在一组父元素中,水平布局必须满足一下条件;margin-left+border-left+padding-left+width+padding-right+border-right+margin-left=800
            等式必须满足,如果不成立,称为过度约束,会自动调整,如果某个值为auto,则自动调整auto的那个值 
            将两个外边距设置为auto,宽度固定值,则两外边距会相等,可以用此居中元素
                49讲*/
        overflow: hidden;
        /* visible:默认值,子元素会从父元素中溢出。在父元素外部显示
           hidden:溢出内容将会被裁剪不显示
           scroll:生成两个滚动条,通过滚动来查看完整内容
           auto:根据需要生成滚动条 
            50讲*/
        /*  外边距的折叠:
            垂直相邻的外边距会取较大值的一边,如果两外边距一正一负则去和,两负则取绝对值大的
             父子元素相邻的外边距,子元素会传递给父元素
             兄弟元素间相邻的垂直外边距去最大值
             如果一正一负取和,都是负值取绝对值大的
            51讲*/
       	display: inline;
        /* 行内元素的盒模型
            行内元素不能设置宽度和高度,只能由行内内容决定
            可以设置boder,margin和padding,不会影响布局,会覆盖其它元素
        display:用来设置元素显示的类型
                可选值:inline 将元素设置为行内元素
                        block 将元素设置为块元素
                        inline-block 将元素设置为行内块元素,既可以设置高度又不会独占一行
                        table 将元素设置为一个表格
                        none 元素不在页面中显示*/
        visibility:hidden
        /*用来设置元素的显示状态
                可选值:visible 默认值,元素在页面中正常显示
                        hidden 元素在页面中隐藏,不显示,但是依然占据元素位置52讲 */
        /* 去除浏览器默认样式:
                浏览器有默认外边距,去浏览器查看body,list-style:none 去除项目符号
                reset.css:直接去除浏览器的默认样式
                normalize:对默认样式进行统一 */
        box-sizing:content-box;
            /* content-box 默认值,宽高用来设置内容区的大小,可见框往外扩展
               border-box 宽高就表示整个盒子的大小,设置的可见框会占用宽高的值 
                    58讲*/
        outline: 10px red solid;
            /* outline 用来设置元素的轮廓线,语法和border一样
                轮廓不会影响可见框的大小,不会影响布局 */
        box-shadow: 10px 10px 50px rgba(0, 0, 0, .3);
            /* box-shadow 用来设置阴影效果,不会影响布局,语法(水平偏移量 垂直偏移量 阴影的模糊半径 颜色rgba( , , , . ))
                负值向左和向上显示,一般颜色都用rgba设置 */
        border-radius: 10px 20px 30px 40px;
            /* 设置圆角 语法和border一样,从左上角开始
                border-radius:50% 无论元素多大都会变成圆形
                    59讲 */
        opacity: 0.5;
                /* 设置背景与图像不透明度,(0.0~1.0) */
        background-clip: border-box;
                /* 设置背景图片的显示区域,是否延伸到边框下面 
                    属性值:border-box,padding-box,content-box*/
            }
        /* 浮动与定位: */
    .box1{
        float: none;
            }
            /* 63-65讲
               none 默认值,元素不浮动
               left 元素向左浮动
               right 元素向右浮动
               浮动元素不会从父元素中移出,不会超过前面的其它元素
               只有前面元素也浮动时才可以使水平排列
               浮动元素的高度不会超过其兄弟元素
               浮动不会盖住文字,文字会自动环绕在浮动元素的周围
               元素浮动以后脱离文档流,块元素不再独占一行 行内元素脱离文档流后变成块元素 
            高度塌陷问题:
                    在浮动布局中,父元素的高的是被子元素撑开的,当子元素浮动后,就会完全脱离文档流
                    父元素高度丢失后下面的元素会自动上补
            BFC:块级格式换环境
                     CSS的隐含属性,开启后该元素会变成一个独立的布局区域
                     开启BFC的元素不会被浮动元素覆盖,子元素和父元素的外边距不会重叠
                     可以包含浮动的子元素
                可以通过设置overflow=""开启BFC
                也可以通过设置浮动,设置为行内块元素(不推荐) */
            /* clear:left
               clear:right
                    left:清除左侧浮动元素对当前元素产生的影响
                    right:清除右侧浮动元素对当前元素所产生的影响
                    both:清除两侧中最大影响的那一侧
                  原理:设置浮动后,浏览器会自动为元素添加一个上外边距
                    66讲
                用css的::after伪类设置clear撑开被浮动的元素,::after设置的是行内元素,所以还需要结合display */
    .clarfix::before,
    .clarfix::after{
        content: '';
        display: table;
        clear: both;
            }
            /* clearfix可以同时解决高度塌陷和内边距重叠问题
                68讲*/
            
    .box1{
    	position: relative;
            }
        /* postion: ; 定位,可以将元素设置在任意位置,并且不会影响其它元素
            
            static:默认值
            
            relative:开启元素的相对定位(原点在元素本来的位置),会提升元素的层级,不会脱离文档流,不改变元素性质
            
            absolute:绝对定位 , 会脱离文档流,改变元素性值,块变行内,行内变块,提升层级
                      相对于包含块(当前元素最近的祖先块元素)进行定位,原点在离它最近开启了相对定位的祖先元素
                      如果所有祖先元素都没开启相对定位,根元素(html)就是包含快(原点)
                      可通过设置四个方向为零,margin:auto;来居中元素
            fixed:固定定位 ,与绝对定位唯一不同的是参照于浏览器视口(浏览器的可视窗口)进行定位,
                      会随网页滚动条滚动而滚动
           
            sticky:粘滞定位 , 和相对定位类似,粘滞定位可以在下拉滚动条时到达某个位置将其固定
        偏移量(offset)
            通过偏移量设置元素的位置
            top: ;  bottom: ;  left: ;  right: ;  
        对于开启了定位的元素,可以通过z-index属性指定元素的层级,整数值越大层级越高
            祖先元素层级再高也不会盖住后代元素
            69-73讲*/
</style>
<body>
    <!-- 所有元素都是盒子模型 -->
    <div class="box1"><div class="box2"></div></div>
    
</body>
</html>
盒子模型2:
过渡及动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /*几何转换:*/
    	.box1{
			transform: rotate(90deg); /*顺时针旋转90度*/
		}
    /* 过渡: */
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            animation: test;
        }
        /*结合伪类选择器一起使用*/
        .box1:hover{
            background-color: blue;
            transition-property: all;
                /* 指定过渡的属性 上下左右,所有*/
            transition-duration: 2s,1s;
                /* 指定过渡效果的持续时间,用","可以指定不同方向的时间 */
            transition-timing-function: ease;
                /* ease:默认值,先加速再减速
                   linear:匀速运动
                   ease-in:加速运动
                   ease-out:减速运动
                   ease-in-out:先加速后减速
                   cubic-bezier() 来指定时序函数,(https://cubic-bezier.com)
                   steps(2,end) 分布执行过渡效果
                        可以设置一个第二个值
                            end 在时间结束时执行过渡
                            start 在时间开始时执行*/
           transition-delay: 2s;
                /* 过渡效果延迟 */
           transition: 2s all ease ;
                /* 可以设置过渡相关的所有属性,两个时间第一个是持续时间,第二个是延迟时间 
                        115讲*/
    /* 动画 */
            animation: test 2s ;
                /* 所有动画属性的简写属性 */
            animation-name: test;
                /* 规定动画的名称 */
            animation-duration: 2s;
                /* 规定动画完成的时间 */
            animation-iteration-count: infinite;
                /* 规定动画的循环次数
                    infinite:无限执行 */
            animation-direction: normal;
                /* 指定动画运行方向
                    normal 从from向to执行
                    reverse:从to向from执行
                    alternate 从from向to运行,重复执行时反复执行 */
                animation-fill-mode: none;
                    /* none 默认值 动画执行完毕元素回到原来的位置
                       forwards 动画执行完毕元素会停在动画的结束位置
                       backwards 动画延时等待时,元素会处于开始的to位置
                       both 结合forwards和backwards */
                }
    /* 动画:*/
           @keyframes test{
               from{
                /* 动画开始的位置 */
               }
               to{
                /* 动画结束的位置 */
               }
           }
        

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在前端开发过程中,可以通过CSS3来设置盒子模型盒子模型CSS中布局的基础,可以控制元素的尺寸、边距、填充和边框。 首先,可以使用CSS的`width`和`height`属性来设置盒子的宽度和高度。通过指定一个固定的像素值、百分比或者其他单位,可以精确地定义盒子的尺寸。 其次,可以使用`margin`属性来设置盒子的外边距。外边距可以控制盒子与周围元素之间的间距。可以分别设置上、右、下、左四个方向的外边距,也可以直接设置一个值来统一设置四个方向的外边距。 接着,`padding`属性可以用来设置盒子的内边距。内边距指的是盒子内容与盒子边框之间的距离。同样,可以分别设置四个方向的内边距,或者使用一个值来统一设置。 还可以使用`border`属性来设置盒子的边框。可以指定边框的宽度、样式和颜色。边框样式可以是实线、虚线、点线等,颜色可以是具体的颜色值或者预定义的颜色关键字。 除此之外,CSS3还引入了更多的盒子模型属性,比如`box-shadow`可以设置盒子的阴影效果,`border-radius`可以设置盒子的圆角,`background`可以设置盒子的背景样式等。 总结来说,CSS3盒子模型的设置包括宽度和高度的调整、外边距和内边距的控制、边框样式的定义以及一些附加效果的设置。这些属性的灵活使用可以让前端开发者更好地控制和布局网页中的元素。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

轩尼诗道-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值