css常见样式

块级元素和行内元素
常用块级元素：div h1~h6 p hr form ul dl ol pre table li dd dt tr td th
常用行内元素：em strong span a br img button input label select

区别：

• 块级元素独占一行空间（即便设置了宽度也不例外，太霸道了），默认撑满父容器。行内元素只独占自身内容空间（增加内边距padding，内边距撑大的空间也不是自己的，属于非法占用）
• 块级元素内可包含其他块级元素和行内元素。行内元素只能包含文本和行内元素
• 块级元素可设置宽width高height。行内元素设置宽高无效。
• 行内元素设置左右外边距边距margin有效，设置上下外边距margin无效。行内元素设置内边距padding，会将背景色撑开，撑开的空间重叠占据其他元素的空间。而块级元素内外边距设置都有效，增加的空间都是独占。

使用案例：

块级元素居中设置：

margin: 0 auto;/*对自身元素生效。效果是在父元素内居中（块级元素默认独占一整行，居中显示需要先设置width），内部元素布局不变*/

行内元素（或者inline-block）居中设置：

text-align: center;/*对content生效。content是文本，则文本居中；content是行内元素，则行内元素居中；content是块级元素，则块级元素的内容居中*/

对比实例链接

css继承
css继承是指：子元素继承了父元素的CSS样式。

• 能继承的属性：
  • 字体：font-family，font-size，font-weight，line-height
  • 文本：letter-spacing，word-spacing，text-align, text-indent
  • 列表：list-style、list-style-type、list-style-position、list-style-image
  • 颜色：color

注：a标签不能继承父元素的字体颜色，原因是a标签自己有默认字体颜色，会覆盖掉继承自父元素的字体颜色。

• 不能继承的属性：
  • display
  • float
  • border
  • padding和margin
  • width和height
  • background

注：以上属性的使用时，长期验证中

css盒模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距的方式。

css盒模型
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

背景应用于由内容和内边距、边框组成的区域。

css常见属性设置

• display

取值：inline | block | list-item | inline-block | table | inline-table | table-row |    table-cell | none | inherit
初始值：inline
适用范围：所有元素
可继承否：不可继承

元素的display属性设置为inline-block，则该元素具有inline和block的双重属性

• border

.box { 
    border-width: 1px;  /*边框宽度*/
    border-color: red; /*边框颜色*/
    border-style: solid; /* 边框样式，eg：dotted、dash*/
}
/* 简写 */
.box2 { 
    border: 1px dotted #ccc;/*取值无顺序差异*/
}

使用案例：

• 三角形

  tr.png

• 正方形

  sq.png

• 漏斗

  ld.png

• 椭圆

  ty.png

• font

p { 
    line-height: 1.5; /*行高，可以用百分比、倍数或者固定尺寸*/
    font-size: 14px; /*字体大小*/
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; /*宋体、微软雅黑、Arial等*/
    font-weight: bold;/*文字粗度，常用的就是默认值regular和粗体bold*/
}
/* 简写 */
body { 
    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;/*取值无顺序差异*/
}

1. 字体大小为12px，行高是字体大小的1.5倍，
   tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif是浏览器在解析网页字体时需要在用户主机上查找的字体库，按顺序查找，找到为止。

2. line-height和height改变的都是element的高度。设置line-height，单行相当于垂直居中。
3. 用引号包裹是因为字体的名字中包含空格等特殊符号，避免浏览器解析时候把它解析成多个词汇，出现乱码。
4. '\5b8b\4f53'是Unicode码。Unicode码（统一码、万国码、单一码），为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。查找方法：在开发者工具中点开Console控制台，输入escape("字体名") ，回车，获得字符串。eg：escape("宋体")回车得到"%u5B8B%u4F53" ，然后将字符串中所有“%u”替换为“\”，即可获得最终Unicode码。
5. font这个综合属性，简写的时候必须写字体大小和字体类型这两个属性值。如果只是font:12px；这样写是没效果的，必须至少写font:12px arial;才会有效。

• 文本

text-align：文本对其方式 left、center、right、justify
text-indent：文案第一行缩进距离
text-decoration： none、underline、line-through、overline
color：文字颜色
text-transform：改变文字大小写none、uppercase、lowercase、capitalize
word-spacing：可以改变字（单词）之间的标准间隔
letter-spacing：字母间隔修改的是字符或字母之间的间隔

使用案例：

ellipsis.png

• line-height
  设置line-height时，可使用绝对值，也可使用相对值。
  相对值的使用有两种方式。都是自身元素字体大小的倍数。区别在元素继承上

  1. line-height: 2  /*先继承父元素设置的倍数值，后根据自身元素字体大小折算实际大小*/
  2. line-height: 200% /*在父元素里根据父元素的字体大小折算实际大小，再继承*/

推荐链接

• background

  • background-color 设置元素的背景颜色
  • background-image 把图像设置为背景
  • background-repeat 设置背景图像是否及如何重复

    取值：no-repeat（背景图片在规定位置）、repeat-x（图片横向重复）、
    repeat-y（图片纵向重复）、repeat（全部重复）

  • background-attachment 背景图像是否固定或者随着页面的其余部分滚动
  • background-position 设置背景图像的起始位置，先水平后垂直
  • background-size 设置背景的大小
    • 像素值（先水平后垂直，图像比例根据设置会发生变化）
    • contain（图像比例不发生变化，最长的两边刚好放进元素窗口，最短的两边可能不能铺满窗口）
    • cover（图像比例不发生变化，最短的两边刚好放进元素窗口，最长的两边可能被窗口遮挡，显示不全）

.box {
    background-color: #F00;
    background-image: url(background.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0 0;
}
/*简写*/
.box2{
    background: #f00 url(background.gif) no-repeat fixed 0 0;/*习惯顺序*/
}

使用常识

• 颜色

  表示方式：
  1. 单词: red, blue, pink, yellow, white, black
  2. 十六进制: #000000, #fff, #eee, #ccc, #666, #333,#f00, #0f0, #00f
  3. rgb: rgb(255, 255, 255), rgb(0, 255, 0)
  4. rgba: rgba(0,0,0,0.5)

取色方法：
在浏览器的检查元素中操作。在element.style里面分别输入color和red（熟悉的颜色名），回车，red前出现选框，点击选框，有下图

qs.png
然后点击弹出图片顶端的色域，出现小圆圈，这时可移动小圆圈到你要识别的颜色上，点击你要识别的颜色，弹出图片中间显示该颜色的十六进制数值，复制该数值即可。

• 单位：

px： 固定单位
百分比：相对单位
em: 相对单位，相对于父元素字体大小
rem: 相对单位，相对于根元素(html)字体大小
vw vh: 相对单位，1vw 为屏幕宽度的1%

文章著作权归本人所有，转载须说明来源