css常见样式（仅供自己日后查阅）

时间：2023-08-29 20:48:01 | 来源：网站运营

时间：2023-08-29 20:48:01 来源：网站运营

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常见属性设置

• 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*/使用案例：

• 三角形

• 正方形

• 漏斗

• 椭圆

• border-radius:px等于宽高的一半是圆形

• 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是浏览器在解析网页字体时需要在用户主机上查找的字体库，按顺序查找，找到为止。

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

• 文本

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

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

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

• background

1. background-color 设置元素的背景颜色
2. background-image 把图像设置为背景
3. background-repeat 设置背景图像是否及如何重复 取值：no-repeat（背景图片在规定位置）、repeat-x（图片横向重复）、
   repeat-y（图片纵向重复）、repeat（全部重复）
   
   
4. background-attachment 背景图像是否固定或者随着页面的其余部分滚动
5. background-position 设置背景图像的起始位置，先水平后垂直
6. background-size 设置背景的大小
7. 像素值（先水平后垂直，图像比例根据设置会发生变化）
8. contain（图像比例不发生变化，最长的两边刚好放进元素窗口，最短的两边可能不能铺满窗口）
9. 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前出现选框，点击选框，有下图


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

• 单位：

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