第四节课 盒模型

组合选择器 可配合类名 id 使用

eg:   #m > p{}

盒模型:div   div{

        width:内容的宽度

        height:内容的高度

        border:1px solid blue

        (border 有三个值   border-width  border-style  border-color,  border-style有三个值,solid(实线)与dashed(虚线)dotted(点线)

        (color:有16进制 #000黑色  #fff白色 #999灰色 #eee浅灰色

                           rgb :rgb(1,2,3) 范围 0~255   

                 rgba: a指的是alpha 透明度  1是不透明 0是完全透明 0.5半透明

                当边框不写颜色时,默认边框颜色与字体颜色相同

                分别控制:border-top border-left border-right border-bottom   

        background-color:(background是复合属性,浏览器加载background会加载出其所有属性,写单独一个具体的如background-color可以减轻加载负荷,提高速度。

         padding:内边距 内容与border之间的距离),会增大盒子,宽度\高度增大2倍padding 

                (padding是复合属性 top right bottom left)      padding:一个值,代表四个方向都赋予这个值,二个值代表上下与左右赋予这个值,三个值代                                                                                                                                                           表上 左右  下,四个值是 上右下左(顺时针)

        margin:外边距(实心木板) div1 margin 10px      div2 margin 10px  div1 给浮动,div1 与div2在同一行相距20px,四个值对应顺序与padding相同

}

qq打开  ctrl+alt+a 出现截图工具

猜你喜欢

转载自www.cnblogs.com/yzdwd/p/12080509.html
今日推荐