传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

CSS3进阶

1 . 盒模型
          1.01 、盒子模型的概念
                     所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容,内边距(padding),边框(border)和外边距(margin)组成。
1.png
                          a、网页就是多个盒子嵌套排列的结果
                     b、内边距出现在内容区域的周围,当给元素添加背景色或背景图像时,该元素的背景色或背景图像也将出现在内边距中
                     c、外边距是该元素与相邻元素之间的距离
                     d、如果给元素定义边框属性,边框将出现在内边距和外边距之间
                     注意:虽然盒子模型拥有内边距,边框,外边框,宽和高这些基本属性,但是并不是要求每个元素都必须定义这些属性。
2 . 边框属性
                        border:设置元素的边框(width stylecolor)/四边宽度,四边样式,四边颜色
                     border-width:设置元素边框的宽度、像素值
                     border-style:设置元素边框的样式 none:无(默认)/solid(单实线)/dashed(虚线)/dotted(点线)/double(双实线)
                     border-color:设置元素边框的颜色
          2.01、单独设置元素上边框
                     border-top :宽度/样式/颜色
                     border-top-width :宽度
                     border-top-style :样式
                     border-top-color:颜色
            2.02、单独设置元素右边框                      
                     border-right:宽度/样式/颜色  
                     border-right-width:宽度   
                     border-right-style:样式
                     border-right-color:颜色
           2.03、单独设置元素的下边框
                     border-bottom:宽度/样式/颜色
                     border-bottom-width:宽度
                     border-bottom-style:样式
                     border-bottom-color:颜色
            2.04、单独设置元素的左边框                                      
                     border-left:宽度/样式/颜色
                     border-left-width:宽度
                     border-left-style:样式
                     border-left-color:颜色
             2.05、综合设置边框
                     像border,border-top等这样,能够一个属性定义元素的多种样式,在CSS中称之为复合属性。
                     常用的复合属性有font、border、margin、padding和background等。
                     复合属性可以简化代码,提高页面的允许速度,但是如果只有一项值,最好不要用复合属性,以免样式不被兼容。
              Tips:
                     a. 表单的边框通常改为0;
                     Border:0 none;//兼容所有浏览器
                     b. 表格的细线边框
                     Table{border-collapse:collapse;}
                     c. 轮廓(链接有虚线和文本框有蓝色边框)
                     Outline-style:none;
            2.06、内边距属性
                      Padding属性用于设置内边距,也是复合属性,相关设置如下:
                                 Padding-top:上内边距
                                 Padding-right:右内边距
                                 Padding-bottom:下内边距
                                 Padding-left:左内边距
                                 Padding:上内边距、右内边距、下内边距 、左内边距
                                 内边距是享有背景色的
           2.07、外边距属性
                     Margin属性用于设置外边框,也是复合属性,相关设置如下:
                                 Margin-top:上外边距
                                 Margin-right:右外边距
                                 Margin-bottom:下外边距
                                 Margin-left:左外边距
                                 Margin:上外边距/右外边距/下外边距/左外边距
                                 Margin相关属性的值,以及符合属性margin取1~4个值得情况与padding相同
                                 外边距可以使用负值,使相邻元素重叠
                                 对块元素应用宽度属性width,并将左右的外边距都设置为auto,可使块级元素水平居中,实际工作中常用这种方式进行网页布局,实例代码如下:
                                .header{width:960px;margin:0 auto};
                                为了更方便地控制网页中的元素,制作网页时,可使用如下代码清除元素的默认内外边距:
                                *{padding:0  /*清除内边距*/
                                 Margin:0; /*清除外边距*/}














分享至 : QQ空间
收藏

7 个回复

倒序浏览
回复 使用道具 举报
很不错的资源哟
回复 使用道具 举报
不错的资源哟 ~~~
回复 使用道具 举报
只有这些吗?好像不全呢
回复 使用道具 举报
蚂蚁L 发表于 2017-9-1 14:17
只有这些吗?好像不全呢

我也觉得不全欸,知道在哪还有么
回复 使用道具 举报
让人SDFSADFSADFSADF
回复 使用道具 举报
666666666666666
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /4 下一条