第三章 盒子模型笔记

1.盒子模型-border
    组成宽度、颜色、样式:
    border-width: 2px;/*边框宽度*/
    border-color: pink;/*边框颜色*/
    border-style: solid;/*边框样式*/
    复合写法border: 1px solid pink;
    left:
    right:
    top:
    bottom;
 
  代码示例:
    .box{
        width: 200px;
        height: 200px;
        /* background-color: pink; */
        border-width: 2px;/*边框宽度*/
        border-color: pink;/*边框颜色*/
        border-style: solid;/*边框solid实线 dotted点状线 dashed虚线 double双实线*/

    }
    <div class='box'></div>
    border-style: solid;  /*默认3px黑色边框*/
    单例型写法/复合型写法
    border:厚度 样式 颜色;对四条边
    border-right:厚度 样式 颜色;
    border-right-width:右边厚度
    border-width: 10px 10px 10px 10px;上 右 下 左
    border: none;去除边框

    border-color:blue/red/yellow
    border-color:rgb(255,0,0)
    border-color:rgba(255,0,0,0)//alpha:0透明,1不透明
    border-color:#ffffff

2、盒子模型外边框-margin
    margin:10px;/*外边距,上右下左各10px*/
    margin-top:
    margin-right:
    margin-bottom:
    margin-left:
    margin:10px 30px;/*上下10px,左右30px*/
    margin:10px 30px 50px;/*上10px,左右30px,下50px*/
    margin:auto;
    margin:0 auto;/*常见水平居中方式*/
    二个相邻的盒子外边距合并特性
    解决合并问题:
        1、给父级设置内边距代替自己外边距
        2、给父级加边框
        3、给父级overflow:hidden
        4、设置绝对定位
        5、设置display:inline-block;
        %:基于父元素宽度的百分比的外边距
    inherit:从父元素继承外边距

3、盒子模型内边距-padding

4、盒子宽度高度计算:
正常模型:
    box-sizing:content-box(默认)、往外扩
    width/height+border+padding+margin(左右和上下)

怪模模型:
    border-box计算宽度width/height+border+padding往内缩

.box1,.box2{/*并列选择器*/

}
5、外边距和内边距合拼问题
解决方案:
    overflow:hidden;解决内边距重合的
    float: left;
    display: inline-block;
    border:1px transparent solied;
    transparent:透明
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qsky001/article/details/80690196
文章标签: 盒子模型
个人分类: 前端技术
上一篇第二章 常用CSS和规范笔记
下一篇第四章 元素类型与样式初始化
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭