5.盒模型
-
在css中,box model这一术语是用来设计和布局时使用的,在网页中显示一些方方正正的盒子,这种盒子就叫盒模型
-
盒模型有两种: 标准模型和IE模型(了解)
-
盒模型属性
-
width : 内容的宽度
-
height : 内容的高度
-
padding : 内边距,边框到内容的距离,padding区域是有背景颜色的,且背景颜色和内容的颜色一样,也就是说background-color这个属性将填充所有的border以内的区域
-
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
-
-
border : 边框 ,盒子的宽度
-
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
/*上 左右 下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px; -
边框有三个要素,粗细,线性样式,颜色,(如不写粗细不显示边框,不写颜色默认黑色,只写线性样式,默认有上下左右 3px宽度的实体黑色边框
-
按照三要素来写border
-
border- 3px;
border-style: solid;
border-color: red;
/*
border- 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/
/*设置顺序 ：上 右 左 下*/
/*border-style: 实线，点状，双线，虚线*/
-
-
按照方向划分设置小属性
-
border-top- 10px;
border-top-color: red;
border-top-style: solid;
border-right- 10px;
border-right-color: red;
border-right-style: solid;
border-bottom- 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left- 10px;
border-left-color: red;
border-left-style:solid;
-
-
按照方向设置
-
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;
-
-
设置border没有样式
-
border:none；
border：0；
表示border没有设置样式。
-
-
border-radius属性
-
-
利用border画三角形
-
-
-
margin : 外边框,盒子边框到附近盒子的距离
-
在写网页的时候,一般要清除页面标签中的padding和margin,以便我们更好的去调整元素的位置
-
{
padding:0;
margin:0;
} -
效率不高,所以我们要是用并集选择器选中页面中应有的标签,搜索reset.css,可找到方法
-
-
设置margin
-
/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
/*表示盒子距离右面的盒子100px*/
margin-right: 100px;
/*表示盒子距离下面的盒子100px*/
margin-bottom: 100px;
-
-
margin的塌陷
-
html:
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
css:
*{
padding: 0;
margin: 0;
}
.father{
400px;
border: 1px solid gray;
/*float: left;*/
}
.box1{
300px;
height: 200px;
margin-bottom: 20px;
/*float: left;*/
}
.box2{
400px;
height: 300px;
margin-top: 50px;
/*float: left;*/
}
/*
当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候注意margin的用法。
当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
*/
-
-
margin : 0 auto;
-
div{
780px;
height: 50px;
/*水平居中盒子*/
margin: 0px auto;
/*水平居中文字*/
text-align: center;
}
/*当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？
设置margin-left:auto；我们发现盒子尽可能远离左侧，当设置margin-right:auto；我们发现盒子尽可能远离右侧。当两条语句并存的时候，我们发现盒子尽可能远离两侧，此时盒子就居中了。
如果给盒子设置浮动，那么margin:0 auto失效。
使用margin：0 auto;注意点：
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
*/
-
-
-
善于使用父亲的padding,而不是margin
-
margin属性是描述兄弟盒子的关系,而padding描述的是父子盒子的关系
-
给父盒子设定border,或者padding,那么父盒子就不会因为子盒子的原因掉下来
-
-
6.标准文档流
-
web网页的制作,从上往下设计,
-
空白折叠现象
-
高矮不齐,底边对齐
-
图片文档的大小不一都会让页面出现高矮不齐的现象,但是遵循底边对齐
-
-
自动换行,一行写不满,换行写
7.块级元素和行内元素的转换
-
行内元素
-
与其他行内元素并排
-
不能设置宽高,默认的宽度就是文字的宽度
-
-
块级元素
-
霸占一行,不能与其他元素并列
-
能设置宽高,如果不设置宽高,那么宽度将默认变为父亲的100%
-
-
相互转换
-
可以通过display属性将会计元素和行内元素进行互相转换,display即"显示模式"
-
块级元素转换为行内元素
-
display: inline;
-
-
行内元素转换为块级元素
-
display: block;
-
-
8.css脱离标准文档流的三种方式
-
浮动 ; float
-
属性
-
none:表示不浮动,默认
-
left,左浮动
-
right,右浮动
-
-
四大特性
-
浮动的元素会脱离标准文档流
-
浮动的元素互相贴靠
-
浮动的元素有"子围”效果
-
当div浮动,p不浮动,div遮盖了p,div的层级提高,但是p中的文字不会被遮盖,此时就形成了子围效果
-
-
收缩的效果
-
一个浮动的元素,如果没有设置width,那么就自动收缩为文字的高度
-
-
-
清除浮动
-
给父盒子设定高度,但是使用不灵活,常用于页面中固定高度,且子元素并排显示的布局,比如导航栏
-
clear:both
-
left:当前元素的左边不许有浮动的元素
-
right: 当前元素的有边不许有浮动的元素
-
both:两边都不许有
-
-
伪元素清除法(常用)
-
给浮动子元素的父盒子,也就是不浮动元素,添加一个clearfix类,然后设置
-
.clearfix:after{
/*必须要写这三句话*/
content: '.';
clear: both;
display: block;
}
-
-
-
-
overflow:hidden
-
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
有五个值：
值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
-
-
-
定位
-
定位分为三种:决定定位,相对定位,固定定位
-
相对定位
-
现象和使用：
1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right
特性：1.不脱标 2.形影分离 3.老家留坑（占着茅房不拉屎，恶心人）
所以说相对定位在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果
用途：
1.微调元素位置
2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。
-
-
绝对定位
-
特性：1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。
参考点(重点)：
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置 2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
二、以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
还要注意，绝对定位的盒子无视父辈的padding
作用：页面布局常见的“父相子绝”，一定要会！！！！
-
-
固定定位
-
固定当前的元素不会随着页面滚动而滚动
特性: 1.脱标 2.遮盖，提升层级 3.固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点 如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告
-
-
z-index
-
指的就是各个盒子重叠在一起谁上谁下的问题。
四大特性，只要你记住了，页面布局就不会出现找不到盒子的情况。
-
z-index 值表示谁压着谁，数值大的压盖住数值小的，
-
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
-
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
-
从父现象：父亲怂了，儿子再牛逼也没用
-
-
-
8.文本属性和字体属性
-
文本属性
-
属性 描述 属性值 说明 text-align 文本对齐方式 nonecenterleftrightjustify color 文本颜色 text-indent 首行缩进，单位建议em text-decoration 规定文本修饰的样式 none underline overline line-throughinherit 默认下划线定义文本上的一条线定义穿过文本下的一条线继承父元素text-decoration属性的值 line-height 行高 针对单行文本垂直居中公式：行高=盒子高度，使文本垂直居中，只适用单行文本。针对多行文本垂直居中行高不能小于字体，不然字会紧挨一起。 text-shadow 阴影 5px 5px 5px #FF0000 水平方向偏移量垂直方向偏移量模糊度阴影颜色 text-overflow 文字溢出 clipellipsis 修剪文本显示省略号代表被修剪文本 white-space 处理元素内的空白 normalprenowrappre-wrappre-lineinherit 默认。空白被浏览器忽略。空白会被浏览器保留文本不换行，直到遇到 保留空白符序列，但正常地进行换行合并空白符序列，但是保留换行符继承父元素 white-space 属性的值
-
-
字体属性
-
属性 描述 属性值 说明 text-align 文本对齐方式 nonecenterleftrightjustify color 文本颜色 text-indent 首行缩进，单位建议em text-decoration 规定文本修饰的样式 none underline overline line-throughinherit 默认下划线定义文本上的一条线定义穿过文本下的一条线继承父元素text-decoration属性的值 line-height 行高 针对单行文本垂直居中公式：行高=盒子高度，使文本垂直居中，只适用单行文本。针对多行文本垂直居中行高不能小于字体，不然字会紧挨一起。 text-shadow 阴影 5px 5px 5px #FF0000 水平方向偏移量垂直方向偏移量模糊度阴影颜色 text-overflow 文字溢出 clipellipsis 修剪文本显示省略号代表被修剪文本 white-space 处理元素内的空白 normalprenowrappre-wrappre-lineinherit 默认。空白被浏览器忽略。空白会被浏览器保留文本不换行，直到遇到 保留空白符序列，但正常地进行换行合并空白符序列，但是保留换行符继承父元素 white-space 属性的值
-
9.background
-
background-color : 背景颜色
-
background-image : 背景图片
-
background-repeat：设置背景图像的平铺方式 repeatrepeat-xrepeat-yno-repeateinherit 默认。背景图像将在垂直方向和水平方向重复背景图像将在水平方向重复背景图像将在垂直方向重复背景图像将仅显示一次规定应该从父元素继承 background-repeat 属性的设置 background-position：设置背景图像的起始位置 垂直位置 水平位置 可以从两个纬度上设定关键词：上中下 左中右垂直位置：top center bottom水平位置：left center right如仅规定了一个关键词，那么第二个值将是"center"。默认值：0 0；这两个值必须挨在一起。 background-attachment：设置固定的背景图像 scrollfixedinherit
-