我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

css4-门帅20221114

[复制链接]
I1220 发表于 2022-11-14 19:50:47 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
今日学习内容
css的盒子模型
        边框:border
                语法:border:border-width  border-style(solid,dotted点线 dashend 虚线)  boder-color;
                边框会影响盒子的实际大小做法:width/height减去边框的宽度*2
                给表格设置细线边框:border collaspe
        内边距:padding
                边框与内容之间的距离
                padding-left:左内边距
padding-right:右内边距
padding-top:上内边距
padding-bottom:下内边距
        外边距:margin
                边框和边框之间的距离
                margin-left:左内边距
margin-right:右内边距
margin-top:上内边距
margin-bottom:下内边距
                应用:
                        1.将块级盒子进行水平居中:盒子必须有宽度
将左右的外边距设置为auto
                        外边距的合并
                                相邻块元素垂直外边距的塌陷:相邻两个块元素相遇时,当块元素1有下边距,块元素2有上边距时,这时候的margin取值为两块元素中较大的值
                                嵌套块元素垂直外边距的塌陷:两个块元素嵌套时,当父元素有上边距,子元素也有上边距时,这时候的父元素取值为两块元素中较大的值。

解决办法:1、给父元素定义上边框border -top
2、给父元素添加上内边距 paddig-top
3、给父元素添加overflow:hidden;属性

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

css圆角边框
border-radius:像素值/百分比
        如果想要画一个正圆,就可以先设置一个正方形,然后将border-raidus设置为宽高的一半,或者直接写成50%
        border-top-left-radius:左上角圆角边框设置
border-top-right-radius:右上角圆角边框设置
border-bottom-left-radius:左下角圆角边框设置
border-bottom-right-radius:右下角圆角边框设置
css的盒子阴影
        在CSS中使用box-shadow属性来为盒子添加阴影
        h-shadow  必须值,水平阴影的位置,允许有负值
        v-shadow 必须值,垂直阴影的位置,允许有负值
      blur 可选,模糊距离
      spread 可选,阴影的尺寸
      color 可选 阴影颜色
      inset 可选, 外部阴影是outset  内部阴影是inset
    注意:盒子阴影不占有空间,不会影响其他盒子的排列

今日遇到的问题:无
今日已解决问题:无
回复

使用道具 举报

关注0

粉丝0

帖子33

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

客服电话:18009298968

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

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

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