CSS三大特性:
1. 层叠性:
后来定义的同一个样式会覆盖之前的样式(后来居上)
2. 继承性:
子元素会继承父元素的样式(子承父业),但是也不是所有的样式都能能够继承:
3. 优先级(重点)
选择器不同,会出现样式同时设置生效优先级问题(权重):
盒子的大小 = 内容宽高度 + 内边距 + 边框
盒子模型的布局稳定性:
按照优先级:宽度(width)>其次使用内边距(padding)>再次使用外边距(margin)
圆角边框:
1. Border-radius: 10px。10代表圆形的半径
2. 1. Border-radius: 50%
3. 矩形设置圆角边框:只能指定半径大小为高度的一般,不能使用半分比形式
盒子阴影:
参数:水平阴影、垂直阴影、模糊距离、阴影尺寸、阴影颜色、内外阴影
box-shadow: 10px 10px 5px #888888;
box-sizing
作用:指定盒模型的计算方式。
取值:
box-sizing: content-box (默认值)
元素的width , height属性只设置内容尺寸,最终在文档中占据的尺寸为margin border padding width/height累加得到。
box-sizing: border-box
元素的width, height属性设置包含边框在内的区域大小,一旦元素设置内边距和边框,会压缩内容显示区域。
元素最终在文档中占据的尺寸由margin和width/ height相加得到。
内边距撑大盒子
设置完内边距后,一般会把盒子的原有大小撑大
解决:
减小内容的大小,让它减去内边距的大小即可,就能保证整个盒子的大小不变
Padding不会影响盒子大小的情况:
如果这个盒子没有宽度,padding就不会撑开盒子
外边距合并
有时候给两个元素设置外边距属性值,会产生冲突…
垂直方向上的外边距 : margin-top
问题:给子元素添加的margin-top属性,可能会作用于父元素上。
解决:
为父元素添加margin-top上外边框属性。
为父元素设置padding-top顶部内边框 : padding-top:0.1px
为父元素设置overflow:hidden 溢出属性。(推荐)
垂直方向上的外边距 : margin-botten
两个块元素分别设置margin-top 、margin-botto,最终元素之间的距离取较大的值。
水平方向上的外边距(行内元素):
默认行内元素水平方向上的外边距会叠加显示。
行内元素
span 、lable 、a 、b、 i、strong、u、s、sub、sup
行内元素的特点:
可以与其他元素共行显示
默认尺寸由内容多少决定,不能手动设置宽高
行内块元素
img 、表单控件
可以与其他元素共行显示
可以手动设置宽高
行内元素只能嵌套行内元素或行内块元素
块级元素
body、 h1~h6、 p、 div、 table、 form、 ul、 ol、li
块级元素的特点:
每个块独占一行,不与其他元素共行显示
可以手动设置宽高
默认宽度与父元素保持一致(table除外,table的默认宽度与td单元格内容相关)
块元素中可以嵌套任何类型的元素
行内元素:无宽高度,行内元素是不能直接设置宽度和高度的!!
行内块元素:有高度,无宽度
行内块元素默认没有宽度
标准流在最底层(海底)------浮动的盒子在中间层(海面上)------定位的盒子在最上层(天空)
浮动元素是半脱离文档流的,不像position:absolute,fixed 完全脱离文档流 所以浮动的元素不会覆盖行内元素,但是可以覆盖块级元素,他们的权重顺序是:内联元素>浮动元素>块级元素
块级元素默认宽度会和父亲一样宽!
盒子中的(文字、行内元素、行内块元素)水平居中对齐:
Text-align:center;
单行文本垂直居中:让文字的行高等于盒子的行高即可(推荐)
Vertical-align垂直居中:只针对于行内元素或者行内块元素
图片与同行文字居中对齐:
Img{vertical-align: middle;}
块级元素居中对齐:
1. 要有宽度
2. Margin: 0 auto;
元素水平垂直居中方法:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
当使用:top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置
translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置
插入图片和背景图片的区别:
小图标、logo、超大背景等:背景图片(只能通过backgroud-position:来调整位置)
产品展示的图片:插入图片(主要通过盒模型的margin和padding来调整位置)
浏览器默认字体大小16像素,为了统一所有浏览器字体,一般需要设置
Body{ Font-size: 16px;}
导航栏一般都是通过<ul>包含li再包含a来实现的
轮播图:并非直接放图片,而是用ul包含li再包含a再包含img来实现的!
搜索引擎对于h1标签的文字内容很重视,会优先收录!
Logo一般使用方式:
放在h1标签(一个网页只有一个)中,
将logo图片设为背景放在a中
浮动的元素在祖级盒子中排不下四个,可以为它的父级盒子设置一个宽度,使得父级稍大于祖级的宽度,然后爷爷设置溢出隐藏即可!
使得块级元素可以在一行显示
如果转换位行内块元素,也可以在一行显示,但是中间会出现缝隙,很难去掉,并且兼容性极差!
三特性:
浮:漂浮起来,会漂浮在标准流上面漏:脱标,不占有位置特:float:会改变元素的display属性成为行内块元素(有高度)但是没有缝隙!小技巧:因为浮动的元素会脱标,所以一般都要给浮动的孩子元素们加一个标准流的父亲,来减少对其他标准流的影响!
清除浮动:
其实不能叫做清除浮动,因为清除浮动是和clear有关,但是clear:both并不能够解决问题,实际还是通过将浮动的元素进行闭合,才能解决问题。所以之后都称为闭合浮动。
为什么要闭合浮动?
很过情况下父元素是不方便给高度的(子元素内容量不固定),需要用孩子来撑开父元素,但是孩子得是标准流才能撑开,浮动孩子不能撑开父亲,因为浮动的孩子不占有位置。
闭合浮动的本质:
闭合浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。
闭合浮动的父盒子会自动检测孩子的高度来撑开自己。
这里暂且这么来讲,其实本质是和底层原理BFC有关系,至于BFC的话,我引用的另一篇文章也有讲:
闭合浮动的方法:
额外标签法:在最后一个浮动元素的后面添加一个空标签<div></div>,将空标签的css属性clear:both;即可!给父盒子添加overflow:hidden|auto|scroll;都可以实现(副作用:会把多余内容切掉)伪元素法:(推荐) .clearfix:after { visibility: hidden; clear: both; display: block; content: ""; height: 0 } /* 兼容ie6,清除浮动的方式 */ .clearfix { *zoom: 1 }4 双伪元素法
什么时候可能需要闭合浮动:
父亲没有高度孩子浮动了影响下面的布局了将盒子定在某一位置上,自由的漂浮在其他盒子上面 ---css离不开定位,特别是后面的js特效
定位之后,元素也相当于转换为行内块元素
为什么要使用定位?
什时候用定位?:
定位 = 定位模式 + 边偏移
定位模式:
Relative(相对定位):
特点:
相对于自己原来在标准流中的位置来说的:
原来在标准流的区域继续占有,后面的盒子仍然以标准的方式对待他
Absulote(绝对定位):
特点:
绝对定位是元素以带有定位的父级元素来移动位置(拼爹型)
不会保留原来的位置,是脱标的
子绝父相!
Fixed(固定定位):
不随滚动条移动
固定定位是特殊的绝对定位,只是基准变成了屏幕(浏览器的可视窗口)
绝对定位盒子是不能设置margin:auto的方式来居中对齐的!绝对定位盒子水平或者居中对齐:将top设为50%,然后往上移动子元素高度的一半!
Z-index:调整的堆叠顺序:数值越大,越靠上层!(只可用于有定位的元素身上)
Display:
Display:none。先隐藏,不保留位置
Display:block. 除了转换为块级元素外,还可显示元素
Visibility:
Visibility:hidden.隐藏,但是保留位置
Visibility:visible.
Overflow:
Overflow:hiddent.超出盒子大小的部分给藏起来
图片消除底部白色缝隙
图片底部存在白色缝隙的原理:图片默认是和文字的基线进行对齐的,虽然一个盒子中可能没有文字,但是下面还是会空出来几个像素来为文字预备。
解决:
1.不让图片基线对齐,随便给图片设置一种对齐方式即可:(推荐)
2.vertical-align对于块级元素来说无效的,因此,可以将图片设置为块级元素即可
溢出的文字用省略号显示
为什么需要精灵技术?
为了有效地减少服务器的图片请求次数
精灵图片(小的背景图标)
测量精灵图的工具可以使用PS、FW
浏览器调试常见错误:
1.单词拼写错误: