黑马程序员技术交流社区
标题: 前端基础入门第四阶段-CSS3进阶 [打印本页]
作者: 长沙-小知姐姐 时间: 2016-11-5 20:19
标题: 前端基础入门第四阶段-CSS3进阶
CSS3进阶
1 . 盒模型
1.01 、盒子模型的概念
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容，内边距(padding)，边框(border)和外边距(margin)组成。
b、内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中
c、外边距是该元素与相邻元素之间的距离
d、如果给元素定义边框属性，边框将出现在内边距和外边距之间
注意:虽然盒子模型拥有内边距，边框，外边框，宽和高这些基本属性，但是并不是要求每个元素都必须定义这些属性。
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; /*清除外边距*/}
作者: 张婷老师 时间: 2016-11-6 10:20
作者: 浮世散人 时间: 2016-12-27 09:07
很不错的资源哟
作者: 筱沁雪 时间: 2017-3-16 13:13
不错的资源哟 ~~~
作者: 蚂蚁L 时间: 2017-9-1 14:17
只有这些吗？好像不全呢
作者: 想飞的鸟 时间: 2018-1-12 20:04
我也觉得不全欸，知道在哪还有么
作者: 寻水的鱼儿 时间: 2018-2-12 00:04
让人SDFSADFSADFSADF
作者: 前端飘 时间: 2018-9-7 10:53
666666666666666
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
