第四章.盒子模型重难点详解(下)

第七讲.外边距重叠

相邻的box的垂直方向的外边距会发生重叠现象

上面的margin-top和下面的margin-bottom会重叠

1. 兄弟元素:

   兄弟元素之间的相邻垂直外边距会取两者间距的较大值

   如果相邻的外边距一正一负,则外边距为二者绝对值相减

   如果相邻的外边距都是负值,则取二者绝对值最大的

   兄弟重叠不需要处理,因为这是我们期望出现的,对开发有利

2. 父子元素:
   父子元素之间的相邻外边距,子元素的会传递给父元素(上外边距)

   这个效果不是我们想要的,因为我们希望的是只移动子元素,因此需要处理

   临时的解决方式:

   • 不用margin,用padding,但是也要改父元素的属性
   • 将父元素单独设置一个margin-top,这样它用的就是自己的margin-top了,不会使用子元素的

   以后会有更好的方法.

第八讲.行内元素的盒子模型

行内元素的盒子模型特点:

1. 不支持设置宽度和高度,它的宽高大小只能被内容撑开

2. 可以设置padding,但是垂直方向的padding不会影响布局,只会覆盖下面的别的盒子

3. 可以设置border,垂直方向的border不会影响布局

4. 可以设置margin,垂直方向的margin不会影响布局,水平方向的margin不会重叠,而是相加

超链接也是行内元素,不能设置宽高.如果就是想设置它的宽高,就要将它从行内元素变成块元素.

display属性可以设置元素显示的类型,有以下可选值:

1. inline:将元素设置为行内元素
2. block:将元素设置为块元素
3. inline-block:将元素设置为行内块元素,兼具了行内元素和块元素的特点既可以设置宽度和高度,又不会独占一行.这个好!!!
4. table:将元素设为表格
5. none:元素不在页面中显示(隐藏元素,不会感知到这个元素的存在)

通过display属性.可以实现行内元素和块元素的转换

a{
	display:block;
	width:100px;
	height:100px;
	background-color:orange;
}

另一个属性visibility,可以用来设置元素的显示状态

可选值:

1. visible:默认值,在页面中正常显示
2. hidden:在页面中隐藏,不显示.但是会占据页面中的位置

display:none不会占据页面中的位置

visibility:hidden会占据页面中的位置

第九讲.浏览器的默认样式

通常情况下,浏览器会为元素设置一些默认样式

默认样式的存在会影响页面的布局,通常情况下编写网页时必须要去除浏览器的默认样式

默认样式:

1. body有一个上下左右均为8px的外边距

2. p元素上下均有16px的外边距,上下外边距会重叠

3. ul(无序列表)也有外边距,同时还有内边距,但是如果直接写padding:0;会导致无序列表的表头被缩进到左边.

   我们一般也用不到表头,于是我们设置一个list-style属性:

   ul{
   	margin:0;
   	padding:0;
   	list-style:none;/*去除项目符号*/
   	margin-left:20px;/*我们通常希望它缩进一些*/
   }
   

但是这么一个个写通常很麻烦,所以通常情况下最简单的做法为:

*{
	margin:0;
	padding:0;
}

*表示所有元素.

实操时,简单项目可以这么做,但是并不完美,在很严谨的项目中,还是要一个一个去除.

有人写好了重置样式表,直接引入即可.

引入方法:

<link rel='stylesheet' href='./css/reset.css'>

第十讲.盒子的大小

默认情况下,可见框的大小由内容区,内边距和边框共同决定

但是盒子尺寸的计算方式也可以手动设置,box-sizing属性,可以设置width和height的作用范围

可选值:

1. content-box 默认值

   宽度和高度用来设置内容区的大小

2. border-box:

   宽度和高度用来指定边框的大小(可见框的大小),即设置边框会使内容区空间变小

   用这个比较方便计算盒子大小

box-sizing:content-box;

第十一讲.轮廓阴影和圆角

1. 轮廓outline

   除了border,还有另一种边框:outline,它用来设置元素的轮廓线.用法和border一样

   区别在于,outline在描边时是直接在外面涂上一层边,并不会改变页面布局和其他元素位置

   outline:10px red solid;
   

   一般在鼠标移动到上面时会设置一个轮廓

2. 阴影box-shadow

   同样不会影响到页面的布局

   默认位置在元素平面的下面一层,我们是俯视元素,所以我们看不到它

   可以设置偏移量.

   四个参数:右偏移量 下偏移量 模糊半径 颜色

   box-shadow:10px 10px 20px rgba(0,0,0,.3);
   

   偏移量正值向右(下)移动,负值向左(上)移动.

   一般的阴影颜色设置为透明度0.5左右,太黑了不像阴影

   模糊半径可以设置阴影模糊的范围大小,太清晰的阴影不想阴影了

   设置了模糊半径,即使没有偏移量也有些许阴影效果

3. 圆角border-redius

   圆角的参数设置的是圆的半径大小

   border-redius:10px;
   

   除了border-redius,还有border-xxx-xxx-radius,第一个设置上下,第二个设置左右

   border-top-left-redius:10px;/*左上角*/
   

   除了圆,还有椭圆,如果某个角设置两个参数,则第一个指定x轴半径,第二个指定y轴半径

   border-top-left-redius:50px 100px;
   

   如果设置四个参数,则设置的是四个角的圆半径:

   border-redius:10px 20px 30px 40px;
   

   四个值分别对应:左上 右上 右下 左下(顺时针)

   如果是三个值,对应的是:左上 右上/左下 右下

   如果两个值,对应的是:左上/右下 右上/左下

   如果一个值,四个角都一样

   如果用border-redius也想设置椭圆,则两个参数之间要用/相隔:

   border-radius:20px/40px;
   

   也可以用百分比设置:

   border-radius:20%;
   

   它设置的是圆的半径占盒子大小的比例