web学习笔记-4

css基础

css样式优先级

样式冲突时的生效原则

1. 不同选择器不同样式：当不同的选择器对同一个元素选中，但所要设置的样式不相同时，会叠加渲染，所有的样式都会生效。
2. 相同选择器相同样式：按照顺序读取渲染，后来者覆盖前面的样式，只会生效最后一次修改。
3. 样式继承：最近的祖先样式优先级比较远的祖先样式优先级高
4. 指定样式大于继承样式：如果自身指定了css样式，继承样式不生效。

选择器的权值

选择器	权值
！important	10000
行内样式	1000
id选择器	0100
类，伪类	0010
标签，伪元素	0001
通用，子代，兄弟	0000
继承	无

注意：选择器的权值可以累加，累加值大的样式生效；权值层级分明，累加不会越级，

css的选择器

选择器类型

选择器	效果
*{}	通用选择器，选中页面的所有元素，一般用在去除页面的默认效果 ，例如：*{margin:0;padding:0;}
标签名	标签名选择器，对页面所有该类型的标签进行选择渲染
类选择器	class=‘类名’，对页面所有相同类名的元素进行选择渲染
伪类选择器	型为（：伪类名），如 a标签有的：（a:hover、a:visited、a:hover、a:active），选中的是元素的某个状态
id选择器	选中某个id的元素进行渲染，型为（#{}）
~	兄弟选择器，选择本元素后面所有兄弟。例如 （p~p{}）
+	相邻兄弟选择器，只选本元素后面的最近的一个兄弟。例如（p+p{}）
空格	后代选择器，选中后代中所有此元素。例如（div p{}）选中div里的所有p
>	子代选择器，选中的是儿子一代，儿子的二子不在选择范围内。例如（div>p{}）
伪元素	由html帮忙生成的内容称之为伪元素，型为（::before、::after）
群组选择器	批量选择元素设置同一样式，型为（p,.box,#id{}），每个之间用逗号隔开
并列选择器	同时满足所有条件的元素才能被选择，型为（p.box#id），不加空格依次写即可。

页面的显示模式

行内元素（display:inline;）

行内元素在页面中，从左向右依次排列，与其他元素挤在同一行，当内容放不下以后才会进行换行，不能设置宽高，只能由内容撑起；
常见行内元素：span img a i b …；
img是特殊的行内元素，既有自己的宽高，又能被设置宽高；

块级元素（display:block;）

块级元素，在页面当中按照从上到小的顺序排列，每一个都独占一行（默认宽度是父元素的宽度），能够自设宽高；
常见块级元素：div h系列 p …;

行内块元素（display:inline-block;）

行内块元素，兼具行内元素和块级元素的特点，既可以与其他元素同在一行，又能设置自己的宽高；
常见的行内块元素：input button…；

css盒子模型

盒子模型（Box Model）

内容盒子
一个普通的div在浏览器控制台中查看它由（content(418x50)+padding+border+margin）形成。

padding：内间距 ，有四个方向分别为 padding-top padding-right padding-bottom padding-left；
border：边框，也有四个方向的值；
margin：外间距，盒子与盒子之间的距离，有四个方向的值，不属于盒子的范围，是公共部分。
普通盒子在水平方向所占空间：（左外间距+左边框+左内间距+内容宽度+右内间距+右边框+右外间距）margin-left+border-left+padding-left+width+padding-right+border-right+margin-right；
在垂直方向上所占空间：（上外间距+上边框+上内间距+内容高度+下内间距+下边框+下外间距）margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom；
边框盒子（怪异盒模型）
前面的内容盒子，以内容为主，设置给盒子的宽高是内容部分的，加边框，间距都会向外占用空间。边框盒子设置宽高给到边框，添加间距，压缩内容的大小。

盒子模型-边框

在样式中边框的写法
border: 1px solid green;（border: 宽度 类型 颜色;）边框的一般写法；
border-width: ; 单独设置边框的宽度；
border-style: ; 设置边框的类型，有实线，双实线，点状等；
border-color: ; 设置边框的颜色；
border-top: ; border-right: ; border-bottom: ; border-left: ; 设置盒子的四个方向的边框；
border-radius: ; 设置边框角的圆滑成度；

	border: 1px solid green;
	border-width: ;
	border-style: ;
	border-color: ;
	border-top: ;
	border-right: ;
	border-bottom: ;
	border-left: ;
	border-radius: ;

盒子模型-间距

内间距
元素内容与边框之间的距离称为内间距（padding）。行内元素的内间距视觉上只会生效左右，不会生效上下，此时会造成样式重叠，不建议行内元素使用。块级元素和行内块元素正常使用即可。
外间距
盒子与盒子之间的距离称为外间距（margin）。外间距有上右下左四个方向的取值，表示在这四个方向与其他盒子的距离，因此我们可以利用这个特性调整盒子的位置。盒子之间的距离由margin值大者决定（大包小，而不是叠加效果）
外间距取值可以随意，正为向右向下，负为向左向上。
外间距不是盒子的内容，不会有拥有盒子例如背景等样式。

盒子模型-背景

背景颜色
background-color: 颜色;
背景图片

background-image: url();
background-repeat: no-repeat;
background-position: ;

background-image: url(背景图路径);
background-repeat: no-repeat; 背景向图默认进行平铺（平铺有X轴和Y轴方向进行），一般我们设置为不要平铺；
background-position:左右 上下 ; 调整背景图的位置第一个值表示左右，正向右，负向左，第二个值表示上下，同理；

背景图的九个方位

拓展
精灵图
CSS Sprite 直译为CSS精灵图，网页图片的一种处理方式
UI会把多个小图标整合到一张图片中，再利用背景图定位，选取到需要的小图标位置展示出来。
优点：减少了向服务器的请求次数，进行了CSS优化