我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

丁竹清-前端(9)-20221114

[复制链接]
清墨、 发表于 2022-11-16 01:01:45 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
盒子模型
        边框(border)
                border:border-width border-style border-color
                border-style常用值:solid(实线)、dashed(虚线)、dotted(点线)
                边框会影响盒子的宽度
                表格细线边框(将相邻的边框合并在一起):border-collapse:collapse
        内边距(padding)
                padding-left:
padding-right:
padding-top:
padding-bottom:
                padding:5px
padding:5px 10px
padding:5px 10px 20px
padding:5px 10px 30px
                        写1个值,代表上下左右都是5px
写2个值,代表上下是5px,左右是10px
写3个值,代表上是5px,左右是10px,下是20px
写4个值,代表(顺时针)上5px右10px下20px左30px
                如果盒子没有指定宽度,就不会被padding撑开,指定了宽度就会被撑开
                如果不想被撑开,将高和宽减去padding值即可
        外边距(margin)
                分开写和简写逻辑同内边距
                典型应用:将块级元素水平居中
                        必须满足:
1、盒子必须有宽度
2、左右外边距设置为auto(自动)
                                如果行内盒子水平居中:
给父元素加text-algin:center
                外边距合并:
                        margin定义块元素垂直外边距时可能会出现
                                相邻块元素垂直外边距合并
                                嵌套块元素垂直外边距塌陷
                                        1、给父元素定义上边框
2、给父元素添加上内边距
3、给父元素添加 overflow:hidden
        清除内外边距:
*{padding:0;
margin:0;}
        CSS的圆角边框
(border-radius:像素值/百分比)
                border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
                简写borer-radius:顺时针
        CSS盒子的阴影
box-shadow:
                h-shadow
                        必须,水平阴影位置,可有负值
                v-shadow
                        必须,垂直阴影位置,可有负值
                blur
                        模糊距离
                spread
                        阴影尺寸
                color
                        阴影颜色
                inset
                        内部阴影;默认outset不过不要写会造成阴影失效

回复

使用道具 举报

关注0

粉丝0

帖子10

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026