一.选择器
五种：基础选择器，组合选择器，属性选择器，伪元素选择器，伪类选择器。
基础选择器
| 选择器 | 名称 | 说明 |
|---|---|---|
| * | 通用选择器 | 选择所有元素，包括html和body |
| div,span | 标签选择器 | 根据标签选择元素 |
| # | id选择器 | 选择指定id元素 |
| . | 类选择器 | 选择指定class |
组合选择器
| 选择器 | 名称 | 说明 |
|---|---|---|
| s1,s2,s3 | 分组选择器 | 选择多个选择器的元素 |
| s1 s2 | 后代选择器 | 指定选择器的后代元素 |
| s1 > s2 | 子选择器 | 指定选择器的子元素 |
| s1+s2 | 相邻兄弟选择器 | 选择相邻且之后的元素 |
| s1~s2 | 兄弟选择器 | 选择之后的元素 |
属性选择器
| 属性择器 | 含义 |
|---|---|
| E[attr] | 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div |
| E[attr = value] | 匹配属性attr值为value的元素，div[id=test],匹配id=test的div |
| E[attr ~= value] | 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 |
| E[attr ^= value] | 匹配属性attr的值以value开头的元素 |
| E[attr $= value] | 匹配属性attr的值以value结尾的元素 |
| E[attr *= value] | 匹配属性attr的值包含value的元素 |
伪元素选择器
| 选择器 | 名称 | 说明 |
|---|---|---|
| ::first-line伪元素选择器 | 块级首行 | |
| ::first-letter | 伪元素选择器 | 块级首字母 |
| ::before | 伪元素选择器 | 选择元素之前插入内容 |
| ::after | 伪元素选择器 | 选择元素之后插入内容 |
| ::selection | 伪元素选择器 | 光标滑动选择内容 |
伪类选择器（伪类选择器之结构性伪类选择器）
| 选择器 | 名称 | 说明 |
|---|---|---|
| :root | 根元素选择器 | 文档根元素，一般为htm |
| :first-child | 子元素选择器 | 最后一个子元素 |
| :last-child | 子元素选择器 | 选择元素之前插入内容 |
| :first-of-type | 子元素选择器 | 同种标签的第一个子元素，等同于:nth-of-type(1) |
| :last-of-type | 子元素选择器 | 同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
| :only-child | 子元素选择器 | 只有一个子元素的 |
| :only-of-type | 子元素选择器 | 子元素只有一种类型的 |
| :nth-child(n) | 子元素选择器 | 第n个子元素 |
| :nth-last-child(n) | 子元素选择器 | 倒数第n个子元素，第一个编号为1 |
| :nth-of-type(n) | 子元素选择器 | nth-child()作用类似，但是仅匹配使用同种标签的元素 |
| :nth-last-of-type(n) | 子元素选择器 | nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
伪类选择器之UI选择器(input标签用)
| 选择器 | 名称 | 说明 |
|---|---|---|
| :enabled | 表单元素选择器 | input非disabled时 |
| :disable | 表单元素选择器 | input标签disabled时 |
| :checked | 表单元素选择器 | input标签checked时 |
| :default | 表单元素选择器 | 选择元素之后插入内容 |
| :valid | 表单元素选择器 | 选择元素之后插入内容 |
| :invalid | 表单元素选择器 | 块级首字母 |
| :required | 表单元素选择器 | 选择元素之前插入内容 |
| :optional | 表单元素选择器 | 选择元素之后插入内容 |
伪类选择器之动态伪类
| 选择器 | 名称 | 说明 |
|---|---|---|
| :link | 动态伪类选择器 | 未被访问时 |
| :visited | 动态伪类选择器 | 已被访问时 |
| :hover动态伪类选择器 | 鼠标移上时 | |
| :default | 动态伪类选择器 | 选择元素之后插入内容 |
| :active | 动态伪类选择器 | 访问中跳转页面时 |
| :focus | 动态伪类选择器 | 获得焦点时 |
伪类选择器之其他
| 选择器 | 名称 | 说明 |
|---|---|---|
| :not | 动态伪类选择器 | 反选 |
| :empty | 动态伪类选择器 | 空内容 |
| :lang | 鼠标移上时 | 包含lang元素 |
| :target | 动态伪类选择器 | url中有target时 |
二.基本属性
2.1背景
div{
width:200px;
height: 200px;
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
/*
background-color:red | #000 | rgb(255,0,0) | transparent | inhrrit;
background-position:方向值top left | 20% 50% | 30px 30px;
background-size:100% 100% | 200px 300px | 200px auto | cover | contain;
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit;
background-origin: padding-box | border-box | content-box;
background-clip:border-box|padding-box|content-box;(Internet Explorer 8 以及更早的版本不支持)
background-attachment:scroll | fixed | inherit ;(规定背景图像是否固定或者随着页面的其余部分滚动。)
background-image: url("URL") | none |inherit;(IE8 以及更早的浏览器不支持一个元素多个背景图像。)
*/
}
2.2 文本
p{
/*文本*/
color:#000;/*red | #000 | rgb(255,0,0) | transparent | inhrrit*/
direction: rtl;/* ltr:默认。文本方向从左到右。rtl: 文本方向从右到左。inherit: 规定应该从父元素继承 direction 属性的值。*/
letter-spacing: 2px;/* 也可以为负值*/
line-height: 30px;/* 也可设置百分比*/
text-align: center;/*left、right、center、justify（实现两端对齐文本效果。） */
text-decoration: underline;/* none：默认。overline：定义文本上的一条线。line-through：定义穿过文本下的一条线。blink： 定义闪烁的文本。*/
text-indent: 2em;/*也可设置px */
text-shadow: 5px 5px 5px #FF0000;/*IE9以及以下都不支持 */
text-transform:uppercase; /*none:默认；capitalize:文本中的每个单词以大写字母开头;uppercase:定义仅有大写字母;lowercase:定义无大写字母，仅有小写字母;inherit:规定应该从父元素继承 text-transform 属性的值。*/
white-space: nowrap;/*normal:空白会被浏览器忽略。pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap:保留空白符序列，但是正常地进行换行。pre-line:合并空白符序列，但是保留换行符。inherit: 规定应该从父元素继承 white-space 属性的值。*/
word-spacing: 10px;/*设置单词间距。*/
text-align:justify;text-justify: inter-word;/*齐行改变单词间的间隔：只有 Internet Explorer 支持 text-justify 属性。*/
text-outline: 2px 2px #ff0000;/* 属性规定文本轮廓。所有主流浏览器都不支持 text-outline 属性。*/
text-overflow: ellipsis; /*clip|ellipsis|string 规定当文本溢出包含元素时发生的事情*/
word-break: normal;/*normal:使用浏览器默认的换行规则。|break-all:允许在单词内换行。|keep-all:只能在半角空格或连字符处换行。;*/
word-wrap: break-word;/* 在长单词或 URL 地址内部进行换行。 */
}
2.3 字体
/*字体*/
font:bold 16px/30px "simSun";/*font连写 */
font-family: Andalus;/*规定文本的字体系列。 */
font-size: 20px;/*规定文本的字体尺寸。 */
font-style: italic;/*规定文本的字体样式。 */
font-weight: bold;/*规定字体的粗细。 */
2.4列表
ul li{
list-style: none;
list-style-image: url("/i/arrow.gif");/*将图象设置为列表项标记。 */
list-style-type: square; /* circle、upper-roman、lower-alpha 设置列表项标记的放置位置。*/
list-style-position:inside;/*outside inside 设置列表项标记的类型。*/
}
2.5 框模型
border
四.浮动
float:left/right;
清除浮动的四种方法：
<!--常用4种清除浮动的方法-->
1.使用空标记，隔墙放；<div style="clear:both;height:0px;"></div>
2.父盒子使用overflow:hidden;但是,不能和position配合使用，因为超出的尺寸的会被隐藏。
3.父盒子使用display：table，原理：将div属性变成表格，只做了解不推荐。
4.使用after清除浮动,给父盒子添加类 clearfix
.clearfix:after{
content: " " ;
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:1;
}
五.定位
1.相对定位：自恋型，以自己左上角为基准设置定位，占位置；
2.相对定位：看脸型，如果有父盒子以父盒子为准（子绝父相），如果没有以浏览器为准，不占位置；
3.静态定位：static，占位置。
4.固定定位：固执型，不占位置；
六.区别overlow:hidden display:none; visibility: hidden;
overlow:hidden---内容会被修剪，并且其余内容是不可见的，即超出部分隐藏，不占位置。
display:none; ---隐藏后不占位置
visibility: hidden;---隐藏后占位置
七.vertical-align基线问题
309980-20170823155758933-1259394651.gif
.verticleDiv {
width: 300px;
height: 100px;
border: 1px solid #000;
line-height: 100px;
font-size:20px;
vertical-align: bottom;
}
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
img.middle {vertical-align:middle}
<p>
这是一幅<img border="0" src="../eg_cute.gif" />位于段落中的图像。
</p>
<div class="verticleDiv">
位于段落中的图像位于段落中
</div>
<p>
这是一幅<img class="top" border="0" src="../eg_cute.gif" />位于段落中的图像。
</p>
<p>
这是一幅<img class="bottom" border="0" src="../eg_cute.gif" />位于段落中的图像。
</p>
<p>
这是一幅<img class="middle" border="0" src="../eg_cute.gif" />位于段落中的图像。
</p>
<!--让图片居中显示在div里面-->
<div style="width:200px;height:200px;line-height:200px;border:1px solid #000;text-align: center;">
<img class="middle" border="0" src="../eg_cute.gif" />
<!--<p style="display: inline;font-size:36px;">55555555</p>-->
</div>
小结：图片居中显示在div中，div设置height、line-height 、text-align:center; 图片设置vertical:middle.
三、盒模型
盒模型：包含margin+border+padding+content
用css设置的宽高属性默认是content的，但在ie5以及更早的浏览器中宽高属性包含border+padding+content
设置padding和border都会影响盒子的实际大小（ie5以及更早的浏览器不会，会把content空间挤小）
可以通过css3的box-sizing设置盒模型。
参考资料：https://segmentfault.com/a/1190000008789039?utm_source=tuicool&utm_medium=referral
网友评论