【前端知识点总结】CSS 基础二

背景属性

• 背景颜色 background-color(缩写: bgc) ：颜色 ；，transparent 默认值 透明

• 背景图片 background-image:url(路径): (缩写:bgi)

• 背景平铺 background-repeat(缩写:bgr)

  repeat 默认值 平铺
  no-repeat 不平铺
  repeat-x  沿着x轴平铺(水平方向)
  repeat-y  沿着y轴平铺(垂直方向)
  

• 背景定位(位置) background-position ：方位名词/值px； (缩写:bgp)

  1、写两个方位名词：left左 right右 center中 top上 bottom下
  2、写两个具体的数值：第一个值代表x轴移动的距离,第二个值代表y轴移动的距离
  3、方位名词混用(20px top)：第一个是方位名词只能写x轴left right center,第二个写方位名词只能写y轴 top bottom center
  4、如果写一个值,另一个值默认center
  

• 背景属性连写 : background: red url(1.jpg) no-repeat left center;

  背景属性注意事项
    1、没有顺序要求,没有必写项, 不写的值,不是没有值,取默认值
    2、背景颜色背景图片撑不开盒子,设置背景必须有宽高
  

元素显示模式

块元素

• 常见的块元素 ： div,p,h1-h6,ol,ul,li,dl,dd,dt,form...
• 块元素的特点 ：

  1.独占一行
  2.块元素不设置宽高,宽默认父元素的宽,高默认为0,里面的内容会撑开高度
  3.可以设置宽高
  

行内元素

• 常见的行内元素 ： a,span,strong,b,em,i,del,s,ins,u..

• 行内元素的特点 ：

  1.一行显示多个
  2.不能设置宽高 默认值是00 内容会撑开宽高
  3.代码换行会生成缝隙
  

行内块元素

• 常见的行内块元素 ：img,input,textarea..

• 行内块元素的特点 ：

  1.一行显示多个
  2.可以设置宽高,不设置宽高有默认大小
  3.代码换行生成缝隙
  

标签嵌套规范

• 块元素可以嵌套块元素,行内元素,行内块元素.p,h1-h6不能嵌套块元素
• 行内元素里面只能嵌套行内元素和文本
• a标签可以嵌套块元素和行内块元素,最好转换文本
• a标签不能嵌套a标签

转换模式

• display:inline; 其他元素转行内元素
• display:inline-block; 其他元素转行内块
• display:block; 其他元素转块元素

行高的问题 line-height:值;(缩写:lh)

• nomal: 默认值 约等于1.1-1.3倍的文字大小 谷歌为1.3倍
• 取消上下行的间距可以把行高设置为1
• 一行文字的行高和盒子的高度相等,文字垂直居中
• 一行文字行高小于盒子,文字偏上显示
• 一行文字行高大于盒子,文字偏下显示

css三大特性

1.层叠性

• 当样式发生冲突的时候,权重相同时后边的样式会把前面的样式覆盖(层叠)掉.
• 就近原则(离标签近)
• 特殊情况 : 连写时不写的值会取默认值,注意前面有无相同属性被覆盖.

2.继承性

• 可以继承的是 color, font-,text-,line-
• 文字属性可以继承
• 特殊情况: h1-h6不会继承父元素文字大小.a不会继承父元素颜色

3.优先级

优先级是解决样式冲突的一种能力,样式冲突时,优先级(权重)高的元素优先执行.

css样式的权重

权重对比

继承权重 < *通配符选择器权重(0,0,0,0) < 标签选择器(0,0,0,1) < 类选择器(0,0,1,0) < id 选择器(0,1,0,0) < 行内样式(1,0,0,0)< !important (无穷大)

继承权重为0

• 子元素和父元素的样式不冲突时,子元素会继承父元素的样式
• 子元素的样式和父元素冲突时,永远执行子元素自身的样式.
• 父元素的样式对子元素来说,继承的权重为0

权重会叠加

• 选择器选择的是一个(类)标签,权重会叠加
• 权重叠加没有进制
• 权重相同就近原则,继承的是离子元素标签越近权重越大

盒子模型

盒子内容

宽高+背景颜色 : width:300px; hight:300px; background-color:pink;

盒子边框 border-

• -width:数字px; 边框粗细
• -color: ; 边框颜色
• -style: ; 边框线型

  1.solid 实线
  2.dotted 点线
  3.dashed 虚线
  4.double 双线
  

• 边框属性连写

  四边连写 : border:20px solid red;  (边框线型必须写,先后顺序无关)
  单边连写 : border-方位名词:  ;(top上 left左 right右 bottom下)
  

盒子的内边距 padding

设置边框与内容间的距离(内容区域距边界的距离)

• 单方向边距 : padding-方位名词: px;(top上 left左 right右 bottom下)
• 四方内边距设置 : padding: 值 ;

  写一个值:表示上下左右内边距相等
  写两个值:表示 上下 和 左右 内边距
  写三个值: 表示上和左右和下内边距
  写四个值:表示上,右,下,左 顺时针
  

注意 : 盒子内边距边框会撑大盒子

盒子的外边距 margin

外边距是盒子外面的边距 是盒子与盒子之间的距离.

• 单方向边距 : margin-方位名词: px;(top上 left左 right右 bottom下)
• 四方内边距设置 : margin: ;

  写一个值:表示上下左右内边距相等
  写两个值:表示 上下 和 左右 内边距
  写三个值: 表示上和左右和下内边距
  写四个值:表示上,右,下,左 顺时针
  

实际开发CSS常用属性（1）：

• CSS3 盒模型 : box-sizing:border-box;
  内边距边框不会撑大盒子,盒子最终大小就是你设置的宽高。

• 块元素的水平居中 : margin:0 auto;
  外边距左右auto,来给设置宽度的块元素水平居中。

• 清除元素默认内外边距(通配符选择器*{}里写)

  margin:0;  外边距为0
  padding:0;  内边距为0
  

• 清除无序列表符号(编号) :
  li{list-style:none;}