盒模型(padding)内边距
padding;就是内边距的意思,它是边框到内容之间的距离
另外padding的区域是由背景颜色的,并且背景颜色与内容颜色一样.也就是说background-color这个属性填充所有border以内的区域
padding的设置
padding有4个方向,分别描述4个方向的padding
描述的方法有两种:
写小属性分别描述不同方向的padding
padding-top: 30px padding-left: 20px padding-buttom:30px padding-right: 20px
写综合属性用空格隔开
padding: 20px; /*上下左右*/ padding: 20px 30px; /*上下 左右*/ padding: 20px 30px 40px; /*上 左右 下*/ padding: 20px 30px 40px 50px; /*上 右 下 左*/
一些标签默认有padding
比如ul标签.有默认的padding-left值
那么我们一般在做站的时候,是要清除页面标签中默认的padding和margin
*{
padding: 0;
margin: 0;
}
border(边框)
border:边框的意思,描述盒子的边框
边框有三要素:粗细 线性样式 颜色
border:solid
border:none;
border:0;
表示border没有设置样式
认识 margin
margin:外边距的意思.表示边框到最近盒子的距离
/*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top: 30px; /*表示盒子向右移动了50px*/ margin-left: 50px; margin-bottom: 100px;
标准文档流
空白折叠现象
多个空格会被折叠一个空格显示到浏览器页面中.img标签换行写,会发现每张图片见有间隙,
高矮不齐,底边对齐
文字还有图片大小不一,都会让页面的元素出现高矮不齐,浏览器查看我们的页面底边对齐
自动换行,一行写不满,换行写
在一行内写文字,文字过多,那么浏览器会自动换行显示我们的文字
标准文档流下的标签等级:
•行内元素
•块级元素
行内元素和块级元素的区别:(重要)
行内元素:
与其他行内元素并排
不能设置宽高,默认的宽度.就是文字的宽度
块级元素:
霸占一行,不能与其他任何元素并列
能接受宽,高.如果不能设置宽度,那么将默认变成父类的100%
块级元素和行内元素的分类:
从HTML角度来讲,标签分为:
文本级标签:p,span,a,b ,i,u,em
容器级标签:div,H系列,li,dt,dd
PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。
CSS角度:
行内元素:除了p之外,所有的文本级标签,都是行内元素,p是个文本级,但是是个块级元素
块级元素:所有的容器级标签都是块元素,还有p标签.
块级元素和行内元素的相互转换
可以通过display属性将块级元素和行内元素进行相互转换,display即"显示模式"
块级元素可以转换为行内元素:
一旦给一个块级元素(比如div)设置:
display: inline;
那么这个标签将立即变为行内元素,此时它和一个span无异. inline就是"行内"
此时的这个div不能设置高度,宽度
此时这个div可以和别的并排.
行内元素转换为块级元素:
同样道理一旦给一个行内元素(比如span)设置:
display: block;
那么,这个标签将立即变为块级标签,此时和一个div无异,block是"块"的意思
此时这个span能够设置高度,宽度
此时这个span必须霸占一行,
如不能设置宽度,将撑满父类
脱离标准流:
(1) 浮动
(2) 绝对定位
(3) 固定定位
浮动
浮动是css里面布局最多的一个属性,也是一个重要的属性.
float: 表示浮动的意思,他有四个值.
none:表示不浮动,默认
left:表示左浮动
right:表示右浮动
.box1{ 300px; height: 300px; background-color: red; float:left; } .box2{ 400px; height: 400px; background-color: green; float:right; } span{ float: left; 100px; height: 200px; background-color: yellow; }
三个元素并排显示,.box1和span因为是左浮动，紧挨在一起，这种现象贴边。.box2盒子因为右浮动，所以紧靠着右边。
浮动的四大特性:
1)浮动的元素拖表
2)浮动的元素互相贴靠
3)浮动的元素有字围效果
4)收缩的效果
浮动元素脱标
脱标:脱离标准文档流
<div class="box1">小红</div>
<div class="box2">小黄</div>
<span>小马哥</span>
<span>小马哥</span>
.box1{ width: 200px; height: 200px; background-color: red; float: left; } .box2{ width: 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; width: 300px; height: 50px; }
效果:红色盒子压盖住黄色盒子,一个行内的span标签竟然能够设置标签宽高了
原因1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议大家这样叫。
原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高
浮动元素互相贴靠
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
.box1{ width: 100px; height: 400px; float: left; background-color: red; } .box2{ width: 150px; height: 450px; float: left; background-color: yellow; } .box3{ width: 300px; height: 300px; float: left; background-color: green; }
效果:
如果父元素有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边。
如果没有足够的空间，那么就会靠着1哥，如果再没有足够的空间靠着1哥，自己往边靠
清除浮动:
1:给父盒子设置高度
2:clear:both
3:伪元素清除法
4:overflow:hidden
clear:both
left:当前元素左边不允许有浮动元素
right:当前元素右边不允许有浮动元素
both:当前元素左右两边不允许有浮动元素
伪元素清除法(常用):
给浮动元素的父盒子,也就是不浮动元素,添加一个clearfix的类,然后设置
.clearfix:after{ /*必须要写这三句话*/ content: '.'; clear: both; display: block; }
overflow:hidden(常用):
overflow属性规定当内容溢出元素框时发生的事情
这个属性定义溢出元素内容区的内容会如何处理,如果值为scroll,不论是否需要,用户代理都会提供一种滚动机制.
visible 默认值,内容不会被修剪会出现在元素框之外.
hidden 内容会被修剪,并且其余内容是不可见的
scroll 内容会被修剪,单浏览器会显示滚动条
auto 如果内容被修剪,则浏览器会显示滚动条
inherit 规定应该从父元素继承,overflow属性的值
margin的用法
前提必须是在标准文档流下
margin的水平不会出现任何问题
垂直方向上会出现"塌陷问题"
当给标准流下的兄弟盒子设置了浮动,就不会出现塌陷
margin: 0 auto;
div{ width: 780px; height: 50px; background-color: red; /*水平居中盒子*/ margin: 0px auto; /*水平居中文字*/ text-align: center; }
当一个div元素设置margin: 0 auto时,盒子就会居中
使用margin: 0 auto;注意点
1,使用margin: 0 auto;水平盒子居中必须有width,要有明确width,水平文字居中使用,text-align:center
2,只有标准流下的盒子,才能使用margin: 0 auto;
当一个盒子浮动了,固定定位,绝对定位,
3,margin:0 auto;居中盒子,而不是居中文本,文字水平居中,使用text-align:center
margin描述的是兄弟盒子的关系,而padding描述的是父子盒子的关系
善于使用父亲的padding,而不是margin
文本属性和字体属性
text-align属性规定元素的文本的水平对齐方式.
属性值:none center left right justify
文本颜色
color属性
文本首行缩进
text-indent 属性规定元素首行缩进的距离,单位建议使用em
文本修饰
text-decoration属性规定文本修饰的样式
属性值:underline(下划线) overline(定义文本上的一条线) line-through(定义穿过文本下的一条线) inherit继承父元素的text-decoration属性的值
行高
line-hieght就是指行高
字体大小
font-size表示设置的字体大小,如果设置成inherit表示继承父元素的字体大小值
字体粗细
font-weight表示设置字体的粗细
bold(粗体) border(更粗) lighter(更细) |100~900(设置具体粗细,400等同于normal,700等同于bold) | inherit(继承父元素字体的粗细)
字体系列
font-family
例语法: font-family:"Microsoft Yahei" ,"微软雅黑" ,"Arial" , sans-serif
如果浏览器不支持第一个字体,则会尝试下一个,浏览器会使用它可以识别的第一个值,如果不支持则显示宋体
background
background-color属性表示背景颜色
background-img表示该元素的背景图片
background-repeat表示该元素平铺方式
repeat : 默认背景图像将在垂直方向和水平方向重复
repeat-x: 背景图像在水平方向重复
repeat-y: 背景图片将在垂直方向重复
no-repeat: 背景图片仅显示一次
inherit 规定应该从父元素继承background-repeat 属性的设置
定位
定位的方式有三种:
1 相对定位
2 绝对定位
3 固定定位
相对定位:相对于自己原来的位置定位
如果仅仅设置了相对定位,那么与标准流的盒子没有什么区别
设置相对定位后,我们才可以使用四个方向的属性 , top ,bottom , left, right
特性:
不脱标, 形影不离 , 原位置被保留
用途:
微调元素位置, 做绝对定位的参考(父相子绝)
绝对定位:
1,脱标 2, 做遮盖效果,提升了层级,设置绝对定位之后,不区分行内元素,和块级元素,都能设置宽高
固定定位
1,脱标 2,提升层级,遮盖 3 固定不变