前端基础css简述

常用选择器
    .class{}
    #id{}
    p{}
    *{}
复合选择器
	1.交集选择器 选择器1选择器2选择器3{}       【元素选择器开头】
	2.并集选择器 选择器1,选择器2,选择器3{}	 【也叫分组选择器】

关系选择器
	1.子元素选择器 父元素>子元素	  【只要是子元素都选中】
	2.后代元素选择器 空格			  【所有后代】
	3.下一个兄弟 前一个+后一个		  【下一个】
	4.选择所有兄弟 兄~弟			  【所有弟】

属性选择器
	p[title]{}
	p[title=abc]{}
	p[tilte^=abc]{}
	p[title$=abc]{}
	p[title*=abc]{}

伪类选择器:不存在的类，比较动态
	:first-child
	:last-child
	:nth-child(n)全选
	:nth-child(2n)选中偶数位
	:nth-child(2n+1)选中奇数位

	同类型里进行排序
    :first-of-type
    :last-of-type
    :nth-of-type()
	:not(:nth-of-type(3))不包含第三个

	超链接伪类
	:link--没访问过
    :visited--访问过---通常不建议修改，如果要修改只改颜色即可
    :hover--鼠标移入
    :active--鼠标点击
	
::伪元素：不存在的类
	::first-letter第一个字母
    ::first-line第一行
    ::selection选中内容

    需要结合content来使用
	::before元素开始
    ::after元素结束

	after和before无法选中，如果我们需要自定义如下：
    div::before{content:'【';}
    div::after{content:'】';}

样式继承：
	为父元素设置样式同样会被应用到后代元素上，也并不是所有都会被继承

权重：
	#id 
	.class : :: 
	div 
	*

    并集选择器权重单独计算
    越具体优先级越高
    !import优先级超过内联样式

长度：
    像素------像素越小越清晰
    百分比----相对于父元素，父元素变大就变大
    em-------相对于字体，字大就变大
    rem------相对于根元素

元素
    块元素block element---用来宏观布局，可以设置宽高
    行内元素inline element---用来放文字，不可以设置宽高

文档流：最底层的
	1.在文档流里
        块元素--独占一行，宽度是父元素宽度，高度被内容撑开
        行内元素--只占自身大小，宽高内容撑开，放不下会换行
	2.不在文档流里
		不具备1中特性

盒子元素
	边框
	border: solid 10px orange;
	border-top:10px solid orange;
	
	内边距
	padding：10px 20px 30px 40px;

	盒子可见框大小-----内容区+内边距+边框

	外边距：影响盒子位置
	margin-top--向下移
    margin-bottom--向上
    margin-right--向左
    margin-left--向右
	
	盒子水平布局
	<1>通常调width,margin-left,margin-right
    <2>width:auto;margin:auto----------宽度最大
    <3>margin-left:auto;margin-right:auto;----------水平居中，只要左右设置为auto

	盒子垂直方向布局:子元素超过父元素就会溢出，使用overflow可以处理溢出
    visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
    hidden 溢出内容将会被裁剪不会显示
    scroll 生成两个滚动条，通过滚动条来查看完整的内容
    auto 根据需要生成滚动条
    【自动水平或垂直方向的，都不需要都不生成】

	盒子模型外边距折叠
	<1>兄弟元素折叠，两者都是正值，会取兄弟两者之间较大的值【不处理】
	<2>父子元素折叠，父子元素相邻外边距，子元素会传递给父元素
        1.解决方式一：子元素设置padding-top:xxx；再在父元素里减去height；
        2.解决方式二：绝对相对位置

	行内元素盒子模型
	<1>不支持设置宽高
	<2>padding,border,margin设置了不影响布局，注意margin水平方向会相加起来
	

行内元素设置为块元素
	display:inline;块元素设置为行内元素
    display:block;行内元素设置为块元素
    display:inline-block;元素设置为行内块元素
    行内块即可以设置宽度和高度又不会独占一行【可以设置高宽，又不会独占一行】

    display:table;将元素设置为表格
    dispaly:none;元素不在页面显示

	visibility用来设置元素显示状态
    visibility:visible;【默认值】元素在页面中正常显示
    visibility:hidden;元素在页面中隐藏-------依然占据位置，元素没有了


浮动
	<1>浮动不会超出父元素，浮动脱离文档流，浮动元素浮动时候不会超过前面浮动的元素【浮动元素和没有浮动元素永远没办法在一起】
	<2>使用浮动将元素水平排列
	<3>浮动不会盖住文字，会文字自动环绕
	<4>使用float，使用float后不再区分块元素和行内元素
		块元素--不会独占一行，宽高被内容撑开
		行内元素--会变成块元素，和上面描述一样

	浮动带来问题：高度塌陷
    .clearfix::after{
        content:'',
        display:table;
        clear:both:
    }
	


定位position
	如果是static则是没有开启元素定位，其它就是开启了

	相对定位relative：
	1.搭配offset使用
	2.相对于它自己左上角，层次比原来的高，不会脱离文档流，块还是块，行内还是行内

	绝对定位absolute：
	1.搭配offset使用
	2.相对于最近的非static的祖先块元素，层次比原来的高，会脱离文档流，块宽高被内容撑开，行内变成块
	
	固定定位fixed
	1.也是一种绝对定位
	2.唯一不同是固定永远参照于浏览器视口，可以用于广告

	粘滞定位sticky
	1.和相对定位基本一致
	2.粘滞定位可以到某个位置时将其固定
    postition:sticky;
    top:10px;//下滑超过10px就固定住

	水平居中：
    margin-left:auto;
    margin-right:auto

    垂直居中：
    margin-top:auto;
    margin-bottom:atuo;

    垂直水平居中：
    position:relstive;
    margin-left=atuo; 
    margin-right=auto;
    margin-top=auto;
    margin-bottom=auto;


元素层次
    z-index来指定层级，越大越优先显示
    祖先元素层级再高也不会影响后代元素