css(二)：css基础

一.选择器

五种：基础选择器，组合选择器，属性选择器，伪元素选择器，伪类选择器。

基础选择器

选择器	名称	说明
*	通用选择器	选择所有元素，包括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