css常见样式
2016-12-06 本文已影响89人
lingfighting
块级元素和行内元素
常用块级元素：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;/*取值无顺序差异*/
}
- 字体大小为12px，行高是字体大小的1.5倍，
tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif是浏览器在解析网页字体时需要在用户主机上查找的字体库，按顺序查找，找到为止。
- line-height和height改变的都是element的高度。设置line-height，单行相当于垂直居中。
- 用引号包裹是因为字体的名字中包含空格等特殊符号，避免浏览器解析时候把它解析成多个词汇，出现乱码。
-
'\5b8b\4f53'是Unicode码。Unicode码（统一码、万国码、单一码），为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。查找方法：在开发者工具中点开Console控制台，输入escape("字体名") ，回车，获得字符串。eg：escape("宋体")回车得到"%u5B8B%u4F53"，然后将字符串中所有“%u”替换为“\”，即可获得最终Unicode码。 - 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%
