【教程】html+css零基础入门教程之CSS外边距(十八)
2017-09-25 00:00
288 查看
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的"空白"。
设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。
CSS margin 属性
设置外边距的最简单的方法就是使用 margin 属性。margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。
margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白:
下面的例子为 h1 元素的四个边分别定义了不同的外边距,所使用的长度单位是像素 (px):
与内边距的设置相同,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的
另外,还可以为 margin 设置一个百分比数值:p {margin : 10%;},这样p 元素的外边距是其父元素的 width 的 10%。
margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成"空行"。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。
利用margin实现布局居中,基础单词:marign:0 auto;
即可实现对象居中,但需要一个条件,那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式,其下级包含对象设置了margin:0 auto也会让其布局居中,但为了兼容各大浏览器建议对body设置一个text-align:center属性样式。
CSS 单边外边距属性
您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px,可以采用以下方法:
您可以使用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其他外边距:margin-top、margin-right、margin-bottom、margin-left
一个规则中可以使用多个这种单边属性,例如:
当然也可以写为:p {margin: 20px 30px 30px 20px;},简写的逻辑仍为:上、右、下、左。
练习题
1、定义盒模型外边距的时候是否可以使用负值()
A、可以
B、不行
2、下列哪个属性能够设置框模型的左侧外边距()
A、padding-left
B、text-indent
C、margin-left
D、indent
3、在编写margin样式时,另外左右外边均为10px,上下外边距为20px,那么下面的写法正确的是:()
A、margin:10px 20px 10px 20px;
B、margin:20px 20px 10px 10px;
C、margin:10px 20px;
D、margin:20px 10px;
请把你的答案,写在留言评论区~
相关文章
【教程】html+css零基础入门教程(一)
【教程】html+css零基础入门教程(二)
【教程】html+css零基础入门教程(三)
【教程】html+css零基础入门教程(四)
【教程】html+css零基础入门教程(五)
【教程】html+css零基础入门教程(六)
【教程】html+css零基础入门教程(七)
【教程】html+css零基础入门教程(八)
【教程】html+css零基础入门教程(九)
【教程】html+css零基础入门教程(十)
【教程】html+css零基础入门教程(十一)
【教程】html+css零基础入门教程(十二)
【教程】html+css零基础入门教程(十三)
【教程】html+css零基础入门教程(十四)
【教程】html+css零基础入门教程之CSS尺寸(十五)
【教程】html+css零基础入门教程之CSS边框(十七)
设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。
CSS margin 属性
设置外边距的最简单的方法就是使用 margin 属性。margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。
margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白:
h1 {margin : 0.25in;}
下面的例子为 h1 元素的四个边分别定义了不同的外边距,所使用的长度单位是像素 (px):
h1 {margin : 10px 0px 15px 5px;}
与内边距的设置相同,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的
另外,还可以为 margin 设置一个百分比数值:p {margin : 10%;},这样p 元素的外边距是其父元素的 width 的 10%。
margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成"空行"。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。
利用margin实现布局居中,基础单词:marign:0 auto;
即可实现对象居中,但需要一个条件,那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式,其下级包含对象设置了margin:0 auto也会让其布局居中,但为了兼容各大浏览器建议对body设置一个text-align:center属性样式。
CSS 单边外边距属性
您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px,可以采用以下方法:
p {margin-left: 20px;}
您可以使用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其他外边距:margin-top、margin-right、margin-bottom、margin-left
一个规则中可以使用多个这种单边属性,例如:
h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }
当然也可以写为:p {margin: 20px 30px 30px 20px;},简写的逻辑仍为:上、右、下、左。
练习题
1、定义盒模型外边距的时候是否可以使用负值()
A、可以
B、不行
2、下列哪个属性能够设置框模型的左侧外边距()
A、padding-left
B、text-indent
C、margin-left
D、indent
3、在编写margin样式时,另外左右外边均为10px,上下外边距为20px,那么下面的写法正确的是:()
A、margin:10px 20px 10px 20px;
B、margin:20px 20px 10px 10px;
C、margin:10px 20px;
D、margin:20px 10px;
请把你的答案,写在留言评论区~
相关文章
【教程】html+css零基础入门教程(一)
【教程】html+css零基础入门教程(二)
【教程】html+css零基础入门教程(三)
【教程】html+css零基础入门教程(四)
【教程】html+css零基础入门教程(五)
【教程】html+css零基础入门教程(六)
【教程】html+css零基础入门教程(七)
【教程】html+css零基础入门教程(八)
【教程】html+css零基础入门教程(九)
【教程】html+css零基础入门教程(十)
【教程】html+css零基础入门教程(十一)
【教程】html+css零基础入门教程(十二)
【教程】html+css零基础入门教程(十三)
【教程】html+css零基础入门教程(十四)
【教程】html+css零基础入门教程之CSS尺寸(十五)
【教程】html+css零基础入门教程之CSS边框(十七)
相关文章推荐
- 【教程】html+css零基础入门教程之后代选择器(二十九)
- 【教程】html+css零基础入门教程之CSS选择器(二十五)
- [转]【OpenCV入门教程之十八】OpenCV仿射变换 & SURF特征点描述合辑
- 【教程】html+css零基础入门教程之CSS 相对定位(二十二)
- 2016最新PHP燕十八系统实战入门网站视频教程
- 【教程】html+css零基础入门教程之CSS 绝对定位(二十三)
- 【教程】html+css零基础入门教程之CSS 浮动(二十四)
- 【教程】html+css零基础入门教程之 伪类(三十)
- ExtJs 入门教程十八[AJax请求 :Ext.Ajax]
- 【教程】html+css零基础入门教程之CSS 定位(二十一)
- 【OpenCV入门教程之十八】OpenCV仿射变换 & SURF特征点描述合辑
- 【教程】html+css零基础入门教程之CSS 外边距合并(十九)
- 【OpenCV入门教程之十八】OpenCV仿射变换 & SURF特征点描述合辑
- 2016最新PHP燕十八系统实战入门网站视频教程
- 无废话ExtJs 入门教程十八[树:TreePanel]
- WPF入门教程系列十八——WPF中的数据绑定(四)
- ReportStudio入门教程(十八) - 列表显示组行号和组内行号
- 2016最新PHP燕十八系统实战入门网站视频教程
- 【教程】html+css零基础入门教程之CSS 布局(二十)
- 【OpenCV入门教程之十八】OpenCV仿射变换 & SURF特征点描述合辑