1、外边距margin
概述:用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性
1.1、单个方向定义
-
margin-bottom 设置下内边距。
-
margin-left 设置左内边距。
-
margin-right 设置右内边距。
-
margin-top 设置上内边距。
.box{ margin-left:10px; margin-right:20px; margin-top:30px; margin-bottom:40px; }
1.2、简写
-
语法:空格隔开
-
取值:1-4个规则与padding值 一致
-
取值
-
px,
-
auto浏览器自动计算
-
允许使用负值
-
.box{ margin:10px 20px 30px 40px; }
1.3、外边距应用
-
外边距实现已知宽度的块级盒子居中
.box{ width:200px; /* margin-left:auto; margin-right:auto; */ margin:0 auto; }
1.4、外边距问题
典理情形一
-
结构关系:嵌套块元素的垂直外边距塌陷
-
问题描述 :当父元素没有padding,border时子元素与父元素直接相临,子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果最终结果是正值取两者中的较大值,负值取绝对值较大的值
-
表现:父子元素公用一个外边距
.parent{ width:100px; background-color:red; margin-top:200px; } .child{ width:100px; height:100px; background-color:green; margin-top:100px; margin-bottom:100px; }
<div class="parent"> <div class="child"> </div> </div>
-
解决方法
-
给父元素设置边框或内边距(慎用)
-
父元素overflow:hidden
-
典型情形二
-
结构 关系:相邻元素垂直外边距合并
-
问题描述 :当两个块级兄弟元素垂直方向上的margin值直接相遇,会发生合并,最终结果是正值取两者中的较大值,负值取绝对值较大的值
-
表现:两个外边距合并成一个
.box1{ width:100px; height:100px; background-color:red; margin-bottom:100px; } .box2{ width:100px; height:100px; background-color:green; margin-top:100px; }
<div class="box1"></div> <div class="box2"></div>
-
解决方法
-
方法1.尽量只定义其中一个的margin值
-
方法2.给其中一个盒子加父元素overflow:hidden(auto\scroll也可),改变渲染规则
-
-
其他情况同上
2、overflow详解
概述:溢出元素内容区的内容会如何处理
2.1、取值
-
visible 默认值。内容不会被修剪,会呈现在元素框之外。
-
hidden 内容会被修剪,并且其余内容是不可见的。
-
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
-
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
.box{ width:200px; height:200px; border:1px solid red; overflow:auto; }
<div class="box"> 【环球网军事报道 特约记者 杨铁虎】4月22日-24日,第九届世界雷达博览会在江苏南京国际博览中心隆重举行。作为承办单位,中国电子科技集团公司第十四研究所(简称中国电科14所)以“科技改变生活、铸造大国重器”为主题精彩亮相,通过实物、模型、图像以及视频等多种形式展示了多款先进的军用雷达,引发国内外广泛关注。 </div>
2.2、应用
-
产品描述的溢出隐藏
-
模块溢出显示滚动条
补充:盒子模型值计算
包含了 边框 内间距 外间距 内容
盒子宽度 = width + 左右border + 左右padding + 左右的margin
盒子的高度=height + 上下的border + 上下的padding + 上下的margin
margin 在页面中是透明的 我们看到的 盒子的尺寸 不包含margin
3、CSS背景
CSS 背景属性用于定义 HTML 元素的背景,通过背景属性我们可以定义元素的背景颜 色、背景图片、背景图片的平铺方式和显示位置等。
3.1、background-color
background-color 属性,设置元素的背景颜色。
常用的值
-
color_name 规定颜色值为颜色名称的背景颜色(比如 red)
-
hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
-
rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
-
transparent 默认。背景颜色为透明。
提示:背景应用于由内容和内边距、边框组成的区域
3.2、background -image
background-image 属性,为元素设置背景图像。
background-image:url(" 图片资源路径 ");
常用的值
-
url(‘URL’) 指向图像的路径。
-
none 默认值。不显示背景图像。
元素的背景默认绘制区域包括内边距和边框。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
我们也可以通过 background-repeat 属性可以改变背景图像的平铺方式。
3.3、background -repeat
background-repeat 属性,设置是否或如何重复背景图像。
常用的值
-
repeat 默认。背景图像将在垂直方向和水平方向重复。
-
repeat-x 背景图像将在水平方向重复。
-
repeat-y 背景图像将在垂直方向重复。
-
no-repeat 背景图像将仅显示一次。
3.4、background -position
background-position 属性,设置背景图像(由 background-image 定义)的起始位置。 背景图像如果要重复,将从这一点开始。
语法:background-position: xpos ypos;
一般来说它有两个值:第一个值表示水平位置,第二个值表示垂直位置。如果仅规定 了一个值,另一个值将是 50%。
取值
-
关键字:top、bottom、left、right 和 center ; 指定图像放置于元素内边距区域的位置,一个对应水平方向,另一个对应垂直方向。 左上角为:left top;
-
长度值 指定图像相对于元素 内边距区左上角的偏移量。左上角是 0 0,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上
-
百分比 指定百分数值将同时应用于元素和图像,左上角是 0% 0%;右下角是 100% 100%。 如果设置为 50% 50%,图像的中心点将与元素的中心点对齐显示。
3.5、background简写
background是背景复合属性,在一个声明中设置所有背景属性。
语法:background:bg-color bg-image bg-repeat bg-position;
background: red url(“bgimage.jpg”) no-repeat left top;
-
当使用简写属性时,属性值的顺序为::
-
background-color
-
background-image
-
background-repeat
-
background-position
-
如果某个属性不需要设置,可以省略。
4、CSS显示模式(元素的分类)
概述: 显示模式是指元素以什么方式显示,如div默认独占一行,span默认可以多个在一行排列,了解它们的特点与分类可以更好的布局网页。HTML元素一般分为块级元素与行内元素、行内块元素
4.1、元素默认显示模式与元素特性总结
-
本身属性为display:block;的元素 称为块级元素
-
常见块级元素 div,h1-h6,p,ul,li,dl,dt,ol
-
-
本身属性为display:inline;的元素称为行级元素
-
常见行级元素:span,strong,em,i,a,b
-
-
本身属性为display:inline-block的元素称为行级块元素
-
常见行内块元素:img、input(表单元素后续会讲到)
-
块级元素特性总结(记忆)
-
独成一行,可以设置宽高。
-
在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度。
-
在不设置高度的情况下,块级元素的高度是它本身内容的高度。
-
可以设置上下左右的内边距和外边距。
行内元素特性总结(记忆)
● 默认并排,不可以设置宽高,宽高取决于内容。
● 设置上下外边距无效
● 行内元素只能容纳文本或者其他内联元素
行内块元素特性总结(记忆)
● 默认并排,可以设置宽高。
● 可以设置上下左右的外边距和内边距。
● 如果不设置宽高,宽高取决于内容
4.2、元素类型转换(记忆)
特殊情况下我们需要进行元素的模式转换,改变默认元素模式使其拥有另一种元素模式的特性,使用display属性能够将三者任意转换。
-
display:inline;转换为行内元素。 【不常用】
-
display:block;转换为块状元素。 【常用】
-
display:inline-block;转换为行内块状元素 【比较常用】
4.3、CSS显示隐藏
display:
-
none:隐藏该元素并且该元素所占的空间也不存在了。
-
block; 显示元素
visibility:
-
hidden 隐藏该元素但是该元素所占的内存空间还存在,即“隐身效果”。
-
visible 显示元素
display的隐藏 visibility 隐藏的区别
5、CSS图片
5.1、清除图片下间隙
原因:图片默认与文本的基线对齐
解决方法一:将图片显示为块
img{display:block;}
解决方法二:改变图片的对齐方式,
img{vertical-align:不为baseline}
5.2、vertical-align 属性详解
作用1:回顾表格处的应用
作用2:定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
常用的值:
-
baseline 默认。标签放置在父标签的基线上。
-
top 把标签的顶端与行中最高标签的顶端对齐。
-
middle 把此标签放置在父标签的中部。
-
bottom 把标签的顶端与行中最低的标签的顶端对齐。
典型应用
-
图片与图片垂直方向的对齐(行内块与行内块)
-
图片与文字垂直方向的对齐
5.3、图片居中
方法1:父元素{text-align:center}
方法2:img{display:block;margin:0 auto;}
6、CSS三大特性总结
6.1、继承性
概念:父元素向后代元素传递属性的机制
表现:后代元素会继承父元素的属性
总结常用可继承的属性
font-size,font-style,font-weight,font-family,font,text-align,text-indent,cursor,list-style等
font- text- color
但是: a标签无法继承父元素的 字体颜色 text-decoration: none, text-indent 标题标签是无法继承父元素的 字体大小的
强制继承
每个CSS属性都接受这些值inherit 表示强制开启了继承”。
作用
恰当地使用继承可以简化代码,降低CSS样式的复杂性
6.2、优先级
概述:浏览器通过优先级来判断哪些属性值与一个元素最为相关,从而在该元素上应用这些属性值。 样式不冲突,优先级没有意义。当同一个元素有多个冲突声明的时候,优先级才会有意义
行内样式与选择器的优先级
概述:匹配元素的每一种类型CSS都级指定了相应的权重,权重越高优先级越高
概述:选择器的权重表述为4个部分,比如0,0,0,0. 一个选择器的数值如下确定: (1)对于选择器中给定的各个ID属性值,加0,1,0,0 (2)对于选择器中给定的各个类属性值、属性选择或伪类,加0,0,1,0; (3)对于选择器中给定的各个元素和伪元素,加0,0,0,1 (4)结合符和通配选择器对特殊性没有贡献.其特殊性为0,0,0,0 (5)每个行内样式特殊性都是1,0,0,0
总结: 复合选择器的权值计算方式为,组成其所**有单一选择器的权重累加** 同级之前比较个数,不同级别不可跨越
继承样式的优先级
概述:每一个直接作用于元素的 CSS 规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。
继承的属性有限小于 单独设置的样式优先级
* > 继承属性
例外规则important
概述:当在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明
语法:.box{background-color:red;!important}
注意:一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
6.3、层叠性
概念:当样式声明发生冲突时,用户代理需要确定样式声明的最终值,既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ,这个过程就叫做层叠
表现
(1)开发者样式>浏览器默认样式 (2)行间 >id >类>元素名称>* >继承样式 (3)当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上,内部和外部样式遵循就近原则
总结
css的层叠性是通过继承 和 优先级实现
-
样式声明不冲突 (同时应用于元素)
-
样式声明冲突
-
同级选择器,css样式中最后定义的声明应用于元素(就近原则)
-
不同级选择器,由选择器优先级决定
-
思维导图: