CSS基础

标签：距离   square   大小写   cells   city   list   char   的区别   lock   

1、css(Cascading Style Sheets)层叠样式表也称级联样式表注释用/*内容*/

2、css样式有三种，行内样式，style作为行内元素属性；内部样式，style样式内容包含在头部head标签对中；外部样式，style样式内容 单独存放在外部.css文件中，需要通过<link href="" type="text/css" rel="stylesheet">导入或者使用@important url("");命令导入

3、CSS盒模型4、css单位绝对单位：pt（磅），12pt字体等于1/6英寸；in（英寸）；mm；cm；pica(pc)，在印刷领域使用，1pc等于12磅，也称12点活字。相对单位：em，表示元素字体高度，它根据font-size属性值来确定单位的大小；ex=0.5em；px,像素；百分比

4、选择器

• 基本选择器：标签选择器、类选择器和ID选择器，类型首字母必须以字母开头，且区分大小写通配选择器：* {}
• 复合选择器：
  • 子选择器：div>span(直接子类)
  • 相邻选择器：div+span（x相邻的一到两个）
  • 包含选择器：div span(可一次匹配多个元素，比子选择器选择面大)
  • 多层选择器：div p span（css允许跨级嵌套，允许多层嵌套）
  • 属性选择器：div[id="header"]、div[class]、div[id][class]
  • 伪选择器和伪元素选择器：a:link、a:visited、a:hover、a:active
  • 选择器分组：body,div,p,h1 {}多个元素共用同一样式
  • 兄弟选择器：div～span(可匹配多个相同同级元素)
  • 结构伪类选择器：（父）子元素且子类相同包括first-child、last-child、nth-child(2n/2n-1/even/odd)、nth-last-child()
  • 父子元素且子类不是都相同包括nth-of-type()、nth-last-of-type、first-of-type、last-of-type
  • 父子元素包括only-child、only-of-type、empty
  • 否定伪类选择器：input:not([type="submit"]) {}
  • 状态伪类选择器：input:[type="password"]:disabled {}主要针对表单（表单是UI灵魂）

5、css继承和层叠

• 除字体和文本类属性等涉及网页通用属性可以使用继承性外，其它属性一般不建议使用继承
• css优先级：作者>用户>浏览器>HTML默认设置；行内样式优先级高于内部样式和外部样式；
• css权重：通配选择器和继承来的样式权重为0；标签和伪元素或为对象选择器权重为1；属性类选择器权重为10；ID选择器权重为100

6、文本样式

• 字体类型：font-family:ncursive|fantasy|monospace|serif|sans-serif（可设置多个属性，以，隔开）
• 字体大小：font-size:xx-small|x-small|samll|medium|large|x-large|xx-large|larger|smaller|length（单位多为em和px,如0.75em）
• 字体颜色：color:gray|rgb(120,120,120)|rgb(50%,50%,50%)
• 字体粗细：font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900(normal为400，bold为700，bolder为500)
• 定义下划线：text-decoration:none|underline|line-through|overline|blink
• 定义字体大小写：font-variant:small-caps|normal(仅西文字体支持，小型的大写字母字体)
• font-transform:none|capitalize|uppercase|lowercase
• 文本水平对齐：text-align:left|right|center|justify(两端对齐)
• 文本垂直对齐：vertical-align:auto|baseline|aub|sup|top|text-top|middle|bottom|length|text-bottom
• 字距和词距：letter-spacing:1em;word-spacing:1em;中文只有字距
• 行高：line-heigth:normal|length(一般行高为1.2～1.8em,字体越大行高越小，如12px,1.8em;14px,1.5～1.6em;16～18px,1.2em)
• 缩进：text-indent:2em

7、图像样式

• 图像边框：
  • border-style:dashed|double|dotted|solid(border-top|right|bottom|left-style)
  • border-color(border-top|right|bottom|left-color)
• 图像透明度：opacity:0～1(值越小越透明)
• 图像圆角：border-radius(border-top|right|bottom|left-raidus):12px
• 阴影图像：box-shadow:8px 8px 14px #06c
• 背景图像：
  • background-image:none|url(images/2.jpg)
  • background-repeat:repeat-x|repeat-y|no-repeat|repeat|round|space
  • background-position:left center|0% 50%|12px 23px(像素表示从浏览器左上角水平位移和垂直位移距离)
  • left center|center left 0% 50% 参照点：左上角 定位点：图像左边线中点
  • center center 50% 50% 参照点：左上角 定位点：图像正中心
  • right center|center right 100% 50% 参照点：左上角 定位点：图像右边线中点

8、超链接样式

• a:link;a:visited;a:hover;a:active;/*不能更换顺序，否则会导致样式覆盖失效*/
• background:transparent url(images/2.jpg) no-repeat top left;/*清除超链接背景色*/
• text-indent:-999px;/*隐藏文本*/

9、列表样式

• list-style(-type):none|disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(阿拉伯数字)
• list-style-positon:outside(默认)|inside(项目符号在里显示)
• li {list-style:none;background:url(images/3.jpg) no-repeat left top;padding-left:1em;}

10、导航位置的li标签里面的<a>元素是行内元素不能直接定义高度和宽度，因此常设置为{display:inline-block|block;}显示。

11、水平布局两种技巧

• 用行内显示设计水平布局，一般是定义列表项目为行内显示，设计所有列表项目在同一行显示
• 用浮动显示设计水平布局，一般定义列表项目浮动显示，但浮动布局可能存在两个问题，一是列表框的自动收缩，此时需定义列表框浮动显示或通过其他方法强制列表框展开以包含列表项，二是项目浮动显示时会影响相邻模块定位关系以及内部包含的超链接。

12、表格样式

• border-collapse:separate(默认独立显示)|collapse(合并单元格边框);
• border-spacing:length(3个值，第一个上下，第二个又，第三个左；2个值，第一个值上下，第二个值左右)
• cellspacing:2px和empty-cells:hide(border-collapse值为separate时才有用)
• border覆盖的规则和顺序（border-collapse值为separate时才能是指border属性）
• border-style:hidden;所有边框样式都失效

  ---

• border-style:none;优先级最低，除非没有定义任何边框样式才生效
• 更宽的边框将覆盖较窄的边框，如果边框宽度值都相同，那么样式优先级顺序为：double>solid>dashed>dotted>ridge>outset>groove>inset
• 如果边框样式只有颜色上的区别，那么颜色优先级为：td>tr>thead(tbody、tfoot)>col>colgroup>table

13、

• tr>td 第一列到第七列
• tr>td+td+td+td+td+td+td 第七列
• td>td+td 第二列到第七列
• 15、hidden隐藏元素知识看不到，但会存在物理空间保存信息；none属性则是不显示，且不会保留物理空间

14、网页布局性质分类

• 固定宽度布局（以像素为单位定义网页宽度）
• 流动宽度布局（以百分比为单位定义网页宽度）
• 液态宽度布局（以em为单位定义网页宽度）

15、margin外边界重叠时，以两者中较大的margin值作为两者实际margin

16、边框默认1px在实际布局中，尤其是浮动布局中，可能会导致在水平方向出现滚动条

17、在没有明确定义元素的高度和宽度时，使用补白来调整元素内容的显示位置要比边界更加安全、可靠。由于行内元素没有height和
width值，所以可以利用补白padding来定义元素的高度和宽度，以便能够撑开行内元素。

18、css网页布局两种基本方法：float和position

• float:none|left|right;
  • 浮动对象的display属性被忽略，它被默认为block;浮动元素具有自动收缩功能，当没有任何内容时，它会收缩为一点，而块状元素没有这个功能，当没有定义其宽度时，会以100%显示
• clear:none|both|left|right
  • clear属性能够强迫浮动元素换行显示，还能对块状元素产生影响，例如禁止浮动元素和块状元素重叠显示。
• position:static(默认)|relative|absolute|fixed(固定不随滚动条滚动)
  • static：无特殊定位，对象遵循正常文档流，top、right、left和bottom等属性不会被应用。
  • relative：相对定位，对象遵循正常文档流，但将依据top、right、left和bottom等属性在正常文档流中便宜位置。
  • absolute：绝对定位，对象脱离正常文档流，使用top、right、left和bottom等属性进行绝对定位，其层叠顺序通过z-index属性定义。
  • fixed：固定定位，对象脱离正常文档流，使用top、right、left和bottom等属性进行定位。

19、定位包含框不同于结构包含框，它定义了所包含的绝对定位元素的坐标参考对象。凡是被定义相对定位，绝对定位或固定定位的元素都
会拥有定位包含框的功能。如果没有明确指定定位包含框，则将以body作为定位包含框，即以窗口四边为定位参考系。

20、在定位布局中，如果元素定义了宽度和高度，则优先满足left和top；反之，则会同时满足left、top、right和bottom而被向四边拉伸

21、设计定位板三栏页面布局

• 绝对定位

#main {position:relative;}
#content {margin-left:25%;margin-right:20%;}
#subplot {width:25%;position:absolute;left:0;top:0;}
#serve {width:20%;position:absolute;right:0;top:0;}

• 浮动布局之三栏高度自适应

#main {overflow:hidden;}
#content {float:left;width:55%;}
#subplot {width:20%;float:left;}
#serve {width:25%;float:right;}
#content,#subplot,#serve {padding-bottom:9999px;margin-bottom:-9999px;}

• 负margin设计三栏高度自适应

#content {float:left;width:55%;margin-left:20%;}
#subplot {width:20%;margin-left:-75%;float:left;}

22、CSS Hack包括三种形式：条件过滤器、属性过滤器和选择符过滤器。

• 条件过滤器
  • lte：小于或等于某个版本的的IE浏览器
  • lt：小于某个版本的IE浏览器
  • gte：大于或等于某个版本的IE浏览器
  • gt：大于某个版本的IE刘爱了你
  • !：不等于某个版本的IE浏览器

<!--[if IE 6]>
<h1>仅IE6可识别</h1>
<![endif]-->

• 属性过滤器

p{
color:#c30; /* For Firefox */
[;color:#ddd;]; /* For webkit(Chrome and Safari) */
color:#090\0; /* For Opera */
color:#00f\9; /* For IE8+ */
*color:#f00; /* For IE7 */
_color:#ff0; /* For IE6 */
}

• 选择过滤器
  • IE7 *+html body {}
  • IE6及其以下版本 *html body {}
  • 非IE浏览器 html>/**/body {}

23、常见兼容问题

• 列表项错行

<style type="text/css">
li {
list-style-position:inside;//设为outside
zoom:1;
}
li a{
display:inline-block;//或者设为inline-block
}
</style>

• 流动被浮动包含问题

<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>浮动被流动包含问题</title>
<style type="text/css">
#wrap {
background:#ffccff;
border:solid 1px red;
}
#box {
float:left;
width:400px;
height:200px;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div id="wrap">
<div id="box">
<h3>栏目标题</h3>
<p>正文信息</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>

• 包含框不能自适应问题

#wrap {
background:#ffccff;
padding:1px;//加上padding:1px;
}

CSS基础

标签：距离   square   大小写   cells   city   list   char   的区别   lock   

原文地址：https://www.cnblogs.com/agasha/p/9975965.html