学习笔记

1、块元素

h1-h6 （产品标题用h）, p , div , ul , ol ,li

1.独占一行

2.宽高边距可控制

3.宽度默认是父级（容器）的100%

4.是一个容器，里面可以放行或块元素

注意：文字类元素不能放块元素如：p,h1

​ 行内元素

a,strong,b,em,i,span

1. 相邻行内元素在一行上，一行可以显示多个
2. 宽高设置无效
3. 默认宽度为内容宽度
4. 只能装文本或其他行内元素

注意：1.链接里不能再放链接

​ 2.a可以转化块级增加链接触发范围

行内块元素

img input td

1. 相邻行内块元素在一行上，相邻行内块会有间隙
2. 默认宽度为内容宽度
3. 宽高可设置

​ 转化

a{display:block;width;height;

color;text-decoration;text-indent缩进}(从而设置宽高增加触发范围)

div{display:inline;}(灵活设置宽高后放一行)

div{display:inline-block;}(转为行内块实现间隙，和设置宽高和且一行如导航栏)

2、背景

background-image(logo或者装饰性图片，便于控制位置，精灵图):url();

​ 例如：body{background-image:url();

	background-repeat:no-repeat;

​ background-position:center top;}

background-repeat:repeat,no-repeat,repeat-x,y

background-position:x y;坐标可以使用方位名词（第一个为X轴，第二个为Y轴center,top，right）或精确单位

background-attachment:fixed;背景图片固定（制作视察滚动）

复合写法：background:transparent url() repeat-y fixed top;

背景颜色 背景地址 背景平铺 背景固定 背景位置（顺序无关）

background:rgba(0,0,0,0.3)透明度（背景色半透明盒子内容不受影响）白色半透明rgha(255,255,255,0.3)

background-size: 100% 100%; 这将设置为图片的宽高都是100% 来使图片全部展现且适应

.box img{width:100%;}只设置宽或者高来使图片全部展现且适应

img一般使用在HTML里面的，background是用在CSS里面的属性。

img一般用于网站模板的动态调用文章内容插入图片广告图片头像等，background用于固定不变的一些图片图标背景图片。

如果是装饰性的图片就使用background-img，如果和文体内容很相关就使用img。

img 是一个document对象，它是可以操作的。比如更换img src的路径可以达到更换图片的目的，也可以移动它的位置，从document中移除等等操作。

img 上能写字，能增加其余想增加的元素。img标记是做不了背景的。可以做连接．可以做title　与 alt。

background-image是只能看的。background-image存在于大的background中，其属性设置多种多样，变换较为丰富。

网页会先加载标签img的内容，再加载背景图片background-image

如下场景使用img标签比较合适：

1. 如果图像是等内容的一部分或图表或人，使用Img标签加上alt属性。
2. 如果需要打印页面并且默认情况下打印图片则使用IMG。
3. 使用IMG(alt文本)图像有一个重要的语义时,比如一个警告图标。这将确保图像的意义可以很好的和user-agents沟通,包括屏幕阅读器。
4. 如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
5. 如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
6. 使用img代替有背景图像可以显著提高性能的动画背景。

如下场景使用background-image属性比较合适：

1. 如果图像不是内容的一部分时使用backgrond-image。

2. 当图像代替文本使用时使用backgrond-image。

3. 如果你想打印页面并且你不想要的图像包括默认情况下使用backgrond-image。

4. 如果需要缩短下载时间通过CSS sprites 时使用backgrond-image。

5. 如果你只需要展示图像的一部分通过CSS sprites时使用backgrond-image。

6. 如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image

7. 是从用户体验角度来讲的。如果你在body 中通过img标签引入一张图片，那么用户在浏览网页的时候，是可以直接在图片上右键，然后另存为，把图片保存下来，但是background是不可以的；

   ​

3、继承：子元素可以继承父元素样式如：text-,font-,line-,color开头的可继承

行高的继承性：body{

font:12px/1.5 Microsoft YaHei;(文字高度的1.5倍)

}

4、优先级

选择器	权重
继承或*	0,0,0,0
元素选择器 如p{}	0,0,0,1
类选择器，伪类选择器 如.div{}	0,0,1,0
ID选择器	0,1,0,0
行内样式style=’’	1,0,0,0
!important	无穷大

注意：继承的权重是0！如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0.

a链接浏览器默认指定了样式 蓝色的 有下划线 顾本身存在元素选择器a{color:blue;}.

权重叠加 如.nav li > ul li>li

a:hover 权重为 0,0,1,1

可以用.box .last（权重20）的方式来增加权重
5、盒子模型

边框：

border-top：1px solid red;无顺序

border-width边框粗细

border-style边框样式 （solid实线边框 dashed 虚线边框 dotted点线边框）

border-color边框颜色

表格边框：

border-collapse:collapse;相邻边框合并在一起

注意：边框影响盒子实际大小，测量盒子大小的时候不量边框

圆角边框：

border-radius:10px;（圆角半径，贴矩形四角。用px或百分百，50%则半径为高度一半，成圆形，两个值则为 左上和右下 右上和左下 ）

padding内边距（边框与内容直接的距离）

1个值(上下左右都有边距)

2个值(上下第一个，左右第二个边距)

3个值(第一个上 第二个左右 第三个下)

4个值(上右下左 呈顺时针)

注意：内边距影响盒子实际大小，添加的边距会加上盒子大小成为大盒子，故（用盒子大应该的小减去边距即是盒子大小）

不影响盒子大小的情况：无指定宽度则宽度不撑开，若写宽度为100%也会撑大宽度。如：给评论的子盒子不设置宽，而设置左右内边距达到不撑大盒子又使文字两边存在边距，而要设置上下边距用外边距即可

应用：

给导航栏文字不同的盒子设置（内边距撑开盒子）

不给盒子宽度，只给高度，然后给padding最合适

margin外边距

可以让块级盒子水平居中，但必须满足：1、盒子必须指定了宽度 2、盒子左右外边距设置为auto

margin:0 auto;

行内元素或者行内块元素水平居中给其父元素添加

text-align:center即可

相邻块元素垂直外边距合并：上下相邻两个兄弟关系块元素，如果上面元素有下外边距，下面元素有上外边距，则他们之间的垂直间距取较大者

嵌套块元素垂直外边距的塌陷：父子关系的块元素，父元素和子元素均有上外边距此时父元素塌陷较大的外边距值！但浮动的盒子不会有外边距塌陷。

此时可以为父元素添加overflow:hidden解决

注意：行内元素，只设置左右内外边距，不设置上下内外边距，除非转化为块级和行内块

清除内外边距

*{

margin:0;padding:0;}

6、盒子阴影

box-shadow:h-shadow(水平阴影位置) v-shadow(垂直阴影位置) blur(模糊距离) spread(阴影尺寸) color(阴影颜色) insert(内阴影)

例子：div:hover{box-shadow:10px 10px 10px -4px rgba(0,0,0,0.3)}

文字阴影

text-shadow:h-shadow(水平阴影位置) v-shadow(垂直阴影位置) blur(模糊距离) color(阴影颜色)

7、常见网页布局：top banner main(left,right) footer

定义版心为公共类（居中对齐,宽度1200px）可以节省时间.

.w{width1200px;margin:auto;

}

导航栏用ul包含li包含a的做法而不是直接用a,让导航栏一行显示给li加浮动，因为li是块级，导航栏不给宽给内边距即可

li{list-style:none;

}

行高会继承，给父级line-height（不必每个子盒子分别居中），可以使子盒子垂直居中

8、元素的显示与隐藏

​ 1、display（转换）:none(隐藏对象)，block(显示元素和转换块级)

注意：隐藏元素后，不占有原来位置

​ 2、visibility（可见性）：visible(元素可视)，hidden(元素隐藏)

注意：隐藏元素后，继续占有原来位置

​ 3、overflow(溢出):visible(溢出可视)，hidden(溢出隐藏),scroll(显示出滚动条，不溢出也显示),auto(溢出时添加滚动条)

注意：如果有定位的盒子，慎用overflow:hidden因为它会隐藏多余的部分。